Конвертировать LESS в CSS и использовать его с Jekyll

Question

В предыдущем посте (How do I reset all css styles for a certain div? (Jekyll blog)) Я спрашивал о временной шкале, которая портит ее стиль, когда я использую его с моим сайтом 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.

Что я могу сделать? Я только задаюсь вопросом, есть ли читаемый текст.

Timeline с IFRAME:

Timeline с DIV:

Answer 1

original file использовать только МЕНЕЕ для некоторых отступов и должен работать с Sass, просто переименовать файл и положить он находится в папке _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 }}">