Как преобразовать CSS в Sass и SCSS для веб-дизайнеров

CSS – действительно простой и понятный язык, но когда он становится слишком длинным – скажем, для тысячи строк, он превращается в «кошмар» обслуживания. Все будет слишком сложно поддерживать, и мы потеряемся в том, какие правила стиля нужно соблюдать или перезаписывать. По этой причине был создан препроцессор CSS, чтобы сделать запись CSS программируемой и более удобной в обслуживании.

Среди разработчиков и дизайнеров пользуется популярностью Sass, о котором мы ранее писали в таких статьях:

Если вы только что перешли с CSS на Sass, возможно, вы думаете преобразовать свой старый CSS в Sass или SCSS. Что ж, если это так, вы можете использовать сторонний инструмент под названием css2sass.

Использование CSS2SASS
Этот инструмент прост и интуитивно понятен – мне, возможно, даже не придется рассказывать вам, как его использовать, но в демонстрационных целях мы проведем несколько тестов с этим инструментом. Во-первых, учитывая следующие коды CSS:

заголовок .nav {margin-top: 100px; } заголовок .nav li {маржа слева: 10px; } заголовок .nav li a {height: 30px; высота строки: 10 пикселей; }

Мы хотели бы преобразовать его в синтаксис Sass, который превращается в:

заголовок .nav margin-top: 100px li margin-left: 10px высота: 30px line-height: 10px

Теперь правила стиля вложены в предыдущие селекторы с использованием отступа для разделения уровня каскадирования. Если преобразовать его в синтаксис SCSS, каскад будет отличаться фигурными скобками, как в CSS.
Те же правила стиля
Давай попробуем еще раз. На этот раз у нас есть два следующих селектора с одинаковыми правилами стиля, и мы скроем их в синтаксис Sass.

.footer {цвет: # b3b3b3; цвет фона: #fafafa; } .copy {цвет: # b3b3b3; цвет фона: #fafafa; }

Сгенерированный вывод довольно умный, этот инструмент объединяет селекторы в одну строку и разделяет их запятой, как показано ниже.

.footer, .copy цвет: # b3b3b3 background-color: #fafafa

Хотя на самом деле это не то, чего я ожидал. Было бы лучше, если бы вывод был в Наследование селектора, вероятно, будет что-то вроде кода ниже.

.inherit1 color: # b3b3b3 background-color: #fafafa .footer @extend .inherit1 .copy @extend .inherit1 Комбинация псевдокласса и селектора
Наконец, мы хотели бы попробовать преобразовать некоторые правила стиля с помощью: hover псевдокласс и комбинацию переключателей, как показано ниже.

.button: hover {цвет: #ffffff; цвет фона: # bf813d; } .button.active {цвет фона: # 986731; }

Результат такой, как ожидалось. Этот инструмент вкладывает псевдокласс и комбинацию селектора со знаком &, вот так.

.button &: hover color: #ffffff background-color: # bf813d & .active background-color: # 986731 Возможности для улучшения
Этот инструмент имеет некоторые ограничения в распознавании нашей каскадной структуры CSS для их надлежащего преобразования в синтаксис Sass или SCSS. Но, безусловно, есть возможности для улучшения.

Я не совсем уверен, можно ли интегрировать Компас в этот инструмент преобразования. Было бы здорово, если бы мы смогли преобразовать следующее правило CSS3 @ font-face:

@ font-face {семейство шрифтов: “DroidSansRegular”; src: url (“шрифты / DroidSans-webfont.eot”); src: url (“fonts / DroidSans-webfont.eot? #iefix”) формат (“embedded-opentype”), url (“fonts / DroidSans-webfont.woff”) формат (“woff”), url (“fonts / DroidSans-webfont.ttf “) формат (” истинный тип “), формат URL (” шрифты / DroidSans-webfont.svg # DroidSansRegular “) (” svg “); font-weight: нормальный; стиль шрифта: нормальный; }

… В миксин Compass @ font-face следующим образом

@include font-face (“DroidSansRegular”, файлы шрифтов (“DroidSansRegular-webfont.ttf”, “DroidSansRegular-webfont.otf”, “DroidSansRegular-webfont.woff”), “DroidSansRegular-webfont.eot”, обычный);

Но в целом этот инструмент – одно из многих хороших мест для тех, кто только начинает работать с Sass. Преобразуйте свой старый CSS, и вы увидите, как он построен в синтаксисе Sass или SCSS.