Верстка \ Препроцессоры css

Как использовать селектор Sass placeholder в файлах SCSS и CSS

От автора: Sass поддерживает селектор placeholder в связке с классом или id. В обычном CSS они задаются через символы «.» и «#», однако в Sass они заменены на «%». Для работы с селектором placeholder их можно использовать с директивой @extend. Без @extend вы не сможете отобразить результат в CSS.

Продолжить чтение

Верстка \ Препроцессоры css

Пример использования вложенных свойств в файле SCSS

От автора: с помощью вложенных свойств можно избежать повтора CSS. Например, используйте font в качестве пространства имен, в котором есть свойства font-family, font-size, font-weight и font-variant. В обычном CSS эти свойства необходимо писать каждый раз в пространстве имен. С помощью Sass эти свойства можно вложить и писать пространство имен лишь один раз.

Продолжить чтение

Верстка \ Препроцессоры css

Основы Sass — пример создания ссылок на родительские селекторы

От автора: выбрать родительский селектор можно с помощью символа &. Этот символ говорит, в каком месте необходимо вставить родительский селектор. Сегодня рассмотрим основы Sass по использованию родительских селекторов.

Продолжить чтение

Верстка \ Препроцессоры css

Sass комментарии: возможности, о которых вы не знали

От автора: в этой главе мы рассмотрим Sass комментарии. Они представляют собой размещенные в исходном коде неисполняемые операторы и делают исходный код более понятным. SASS поддерживает два типа комментариев.

Продолжить чтение

Верстка \ Препроцессоры css

Sass — вложенность селекторов

От автора: Sass вложенность комбинирует разные логические структуры. С помощью Sass можно комбинировать множество CSS правил одно в другом. Если вы используете множество селекторов, то вы можете поместить один селектор в другой, чтобы создать составной селектор.

Продолжить чтение

Верстка \ Препроцессоры css

Стили Sass — преимущества и недостатки

От автора: Sass – это препроцессор CSS, с помощью которого можно снизить количество повторяющегося CSS кода и сэкономить время. Это более стабильное расширение CSS, четко и структурно описывающее стили документа.

Продолжить чтение

Верстка \ Препроцессоры css

Основы препроцессора Sass: переменные, миксины, операторы, импорт, вложенность, наследование

От автора: CSS сам по себе веселый, однако стили становятся все больше, сложнее и труднее в обслуживании. Здесь может помочь препроцессор. Sass позволяет использовать функции, которых пока что нет в CSS. Например, переменные, вложенность, миксины, наследование и другие хорошие функции, которые оживляют CSS.

Продолжить чтение