CSSに変換してJekyllで使用する

Question

以前の投稿（How do I reset all css styles for a certain div? (Jekyll blog)）では、ジキルのサイトで使用するときにそのスタイルを失うようなタイムラインについて質問しました。

私はiframeを試してみましたが、それはモバイル用の良い解決策ではありません。

私のタイムラインは、このプロジェクトに基づいています：https://github.com/ybogdanov/history-timeline。そのタイムラインは、スタイルを提供するためにLESSを使用します。

問題はJekyllがCSSではなくSASSを使用することです。

これは、IFRAMEと完全に動作します私の修正以下のスタイルである：私はCSSコンバータにLESSを使用して、私はこれを取得

#content { 
    flex: 1; 
    overflow: scroll; 
    position: relative; 
} 

#ruler { 
    top: 0px; 
    height: 30px; 
    padding-top: 5px; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
    transition: top 0.1s linear; 
} 

#chart { 
    margin-top: 35px; 
} 

svg { 
    .axis path, 
    .axis line { 
     fill: none; 
     stroke: black; 
     shape-rendering: crispEdges; 
    } 

    .axis text { 
     font-family: sans-serif; 
     font-size: 18px; 
    } 
} 

：

#content { 
    flex: 1; 
    overflow: scroll; 
    position: relative; 
} 
#ruler { 
    top: 0px; 
    height: 30px; 
    padding-top: 5px; 
    position: absolute; 
    background: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 
    transition: top 0.1s linear; 
} 
#chart { 
    margin-top: 35px; 
} 
svg .axis path, 
svg .axis line { 
    fill: none; 
    stroke: black; 
    shape-rendering: crispEdges; 
} 
svg .axis text { 
    font-family: sans-serif; 
    font-size: 18px; 
} 

しかし、いくつかの行は私与えます「不明なプロパティ」に関する警告と、divを使用してタイムラインを挿入するとスタイルが欠落します。

どうすればよいですか？私は読解可能なテキストを持つことについてのみ疑問があります。 IFRAMEと

タイムライン：

Answer 1

original fileは一部だけインデントにLESS使用し、サスで動作するはずです、単にファイル名を変更して置く：DIVと

タイムラインそれは_sassフォルダにあり、ジキルがそれを構築できるようになっています。

mv styles.less timeline.scss && mv timeline.scss _sass 

とcss/main.scssファイルを作成します。あなたはまだ提供していない

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">