Как преобразовать scss в css

-2

Вот пример, написанный в scss, мне нужен этот код в css, есть ли способ? получить такой же результат? Вот пример ссылки [Example of scs][1] LINK Как преобразовать scss в css

источник

2016-10-20 Sudarshan Kalebere

В CSS панели OnClick из выпадающего списка, вы получите вид скомпилированный SCSS и вы получите ваш CSS код –

... Спасибо @priya_singh –

Согласно @ priya_singh замечании, вот скомпилированный код CSS:

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px; 
} 

body { 
    text-align: center; 
    background-color: #34495e; 
} 

h1 { 
    font-weight: 100; 
    font-size: 32px; 
    padding: 40px; 
    color: #fff; 
} 

#breadcrumb { 
    list-style: none; 
    display: inline-block; 
} 
#breadcrumb .icon { 
    font-size: 14px; 
} 
#breadcrumb li { 
    float: left; 
} 
#breadcrumb li a { 
    color: #FFF; 
    display: block; 
    background: #3498db; 
    text-decoration: none; 
    position: relative; 
    height: 40px; 
    line-height: 40px; 
    padding: 0 10px 0 5px; 
    text-align: center; 
    margin-right: 23px; 
} 
#breadcrumb li:nth-child(even) a { 
    background-color: #2980b9; 
} 
#breadcrumb li:nth-child(even) a:before { 
    border-color: #2980b9; 
    border-left-color: transparent; 
} 
#breadcrumb li:nth-child(even) a:after { 
    border-left-color: #2980b9; 
} 
#breadcrumb li:first-child a { 
    padding-left: 15px; 
    -moz-border-radius: 4px 0 0 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px 0 0 4px; 
} 
#breadcrumb li:first-child a:before { 
    border: none; 
} 
#breadcrumb li:last-child a { 
    padding-right: 15px; 
    -moz-border-radius: 0 4px 4px 0; 
    -webkit-border-radius: 0; 
    border-radius: 0 4px 4px 0; 
} 
#breadcrumb li:last-child a:after { 
    border: none; 
} 
#breadcrumb li a:before, #breadcrumb li a:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    border: 0 solid #3498db; 
    border-width: 20px 10px; 
    width: 0; 
    height: 0; 
} 
#breadcrumb li a:before { 
    left: -20px; 
    border-left-color: transparent; 
} 
#breadcrumb li a:after { 
    left: 100%; 
    border-color: transparent; 
    border-left-color: #3498db; 
} 
#breadcrumb li a:hover { 
    background-color: #1abc9c; 
} 
#breadcrumb li a:hover:before { 
    border-color: #1abc9c; 
    border-left-color: transparent; 
} 
#breadcrumb li a:hover:after { 
    border-left-color: #1abc9c; 
} 
#breadcrumb li a:active { 
    background-color: #16a085; 
} 
#breadcrumb li a:active:before { 
    border-color: #16a085; 
    border-left-color: transparent; 
} 
#breadcrumb li a:active:after { 
    border-left-color: #16a085; 
}

источник

2016-10-20 06:35:25 Moo

Спасибо, что работали –

Чтобы компилируются CSS на CodePen, нажмите на стрелку в правом верхнем углу CSS и выберите «Просмотреть скомпилированный код». Это отобразит скомпилированный вывод.

Viewing Compiled CSS on CodePen

источник

2016-10-20 13:49:24

Как преобразовать scss в css

ответ

Смежные вопросы