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

Sass — Директивы функций

От автора: в этой главе мы рассмотрим Директивы функций. В SASS вы можете создать собственную функцию и использовать ее в контексте скрипта или применить любое значение. Функции вызываются через имя функции с любыми параметрами.

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

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

Расширение возможностей Sass с помощью пользовательских функций

От автора: вы можете расширить функционал SASS, чтобы предоставить пользователям дополнительные возможности и настройки. Чтобы использовать эти функции, пользователь должен знать Ruby.

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

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

Sass — стили вывода

От автора: в этой главе мы рассмотрим стили вывода SASS. Файл CSS, который генерирует SASS, содержит стиль CSS по умолчанию, который отражает структуру документа. Стили CSS по умолчанию -—это хорошо, но они не подходят для всех ситуаций; в то же время, SASS поддерживает многие другие стили.

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

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

Sass — включение миксинов с помощью директивы @include

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

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

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

Sass Script — аргументы миксинов

От автора: значения Sass Script могут приниматься в качестве аргументов миксинов, которые передаются при включении миксина, они становятся доступными в миксине в качестве переменных. Аргумент — это имя переменной, которое добавляется через запятую при определении миксина. Существует два типа аргументов.

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

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

Sass — Функция if()

От автора: встроенная функция if(), возвращает только один результат из двух возможных, основываясь на заданном условии. Результат Sass функции можно связать с переменной, которую не нужно определять отдельно или использовать для дальнейших вычислений.

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

Верстка \ Препроцессоры 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 эти свойства можно вложить и писать пространство имен лишь один раз.

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