將LESS轉換爲CSS並與Jekyll一起使用

在上一篇文章中（How do I reset all css styles for a certain div? (Jekyll blog)）我曾問過一個時間線，當我將它與我的Jekyll站點一起使用時，它的風格就會消失。將LESS轉換爲CSS並與Jekyll一起使用

我曾嘗試給我們一個iframe，但這不是一個好的手機解決方案。

我的時間表基於此項目：https://github.com/ybogdanov/history-timeline。該時間線使用LESS提供樣式。

問題是，Jekyll使用SASS而不是CSS。

這是我的作品完美與一個iframe修改較少風格：

#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; 
    } 
}

我用更少的CSS轉換器，我得到這個：

#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：

時間軸與格：

來源

2016-08-08 pachamaltese

你仍然不能提供代碼進行調試。一塊CSS代碼是不夠的。 –

的original file只用少部分縮進，並應與薩斯工作，只是重命名文件，並把它在_sass文件夾中，以便Jekyll可以構建它。

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

創建一個css/main.scss文件有：

--- 
--- 

@import "timeline";

在你的佈局或您的包含文件，你應該鏈接到生成的文件main.css：

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

來源

2016-08-08 23:23:12 DirtyF

雖然這可能在理論上回答這個問題，但[這將是更可取的]（// meta.stackoverflow.com/q/8259）在這裏包括答案的基本部分，並提供了供參考的鏈接。 – manetsus

非常感謝！我從終端嘗試了這個以及'lessc style.less style.css'。問題是這兩個都創建一個未知元素的CSS文件，被任何瀏覽器忽略。 – pachamaltese

@manetsus，感謝您的指點，我更新了我的答案，我希望它更有用。 – DirtyF

將LESS轉換爲CSS並與Jekyll一起使用

回答

相關問題