Предварительная обработка
CSS сам по себе может быть забавным, но таблицы стилей становятся больше, сложнее и сложнее в обслуживании. Здесь может помочь препроцессор. В Sass есть функции, которых еще нет в CSS , такие как вложенность, примеси, наследование и другие полезные штуки, помогающие писать надежный, удобный в сопровождении CSS.
Как только вы начнете возиться с Sass, он возьмет ваш предварительно обработанный файл Sass и сохранит его как обычный файл CSS , который вы можете использовать на своем веб-сайте.
Самый прямой способ сделать это — в вашем терминале. После установки Sass вы можете скомпилировать Sass в CSS с помощью sass
команды. Вам нужно указать Sass, из какого файла строить и куда выводить CSS . Например, запуск sass input.scss output.css
с вашего терминала потребует один файл Sass input.scss
, и скомпилирует этот файл в output.css
.
Вы также можете просматривать отдельные файлы или каталоги с --watch
флажком. Флаг наблюдения указывает Sass следить за вашими исходными файлами на предмет изменений и перекомпилировать CSS каждый раз, когда вы сохраняете свой Sass. Если вы хотите наблюдать (вместо того, чтобы создавать вручную) свой input.scss
файл, вы просто добавляете флаг просмотра в свою команду, например:
sass --watch input.scss output.css
Вы можете просматривать и выводить в каталоги, используя пути к папкам в качестве ввода и вывода и разделяя их двоеточием. В этом примере:
sass --watch app/sass:public/stylesheets
Sass просматривал все файлы в app/sass
папке на наличие изменений и компилировал CSS в public/stylesheets
папку.
Переменные
Думайте о переменных как о способе хранения информации, которую вы хотите повторно использовать в своей таблице стилей. Вы можете хранить такие вещи, как цвета, стеки шрифтов или любое значение CSS , которое, по вашему мнению, вы захотите использовать повторно. Sass использует $
символ, чтобы сделать что-то переменной. Вот пример:
Синтаксис SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Вывод CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Когда Sass обрабатывается, он берет переменные, которые мы определяем для $font-stack
и $primary-color
выводит обычный CSS со значениями наших переменных, помещенными в CSS. Это может быть чрезвычайно полезным при работе с фирменными цветами и их согласованности на всем сайте.
Вложенность
При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную и визуальную иерархию. CSS , с другой стороны, нет.
Sass позволит вам вкладывать ваши селекторы CSS таким образом, чтобы следовать той же визуальной иерархии вашего HTML. Имейте в виду, что слишком вложенные правила приведут к чрезмерно квалифицированному CSS , который может оказаться сложным в обслуживании и обычно считается плохой практикой.
Имея это в виду, вот пример некоторых типичных стилей навигации по сайту:
Синтаксис SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Вывод CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Вы заметите, что селекторы ul
, li
и a
вложены внутрь nav
селектора. Это отличный способ упорядочить CSS и сделать его более читабельны.
Части
Вы можете создавать частичные файлы Sass, содержащие небольшие фрагменты CSS , которые можно включать в другие файлы Sass. Это отличный способ модульности вашего CSS и упрощения обслуживания. Частичный — это файл Sass, имя которого начинается с нижнего подчеркивания. Вы могли бы назвать это как-то вроде _partial.scss
. Подчеркивание сообщает Sass, что файл является лишь частичным файлом и что его не следует создавать в виде файла CSS . Партиалы Sass используются с @use
правилом.
Модули
Вам не нужно писать весь свой Sass в одном файле. Вы можете разделить его, как хотите, с помощью @use
правила. Это правило загружает другой файл Sass как модуль , что означает, что вы можете ссылаться на его переменные, примеси и функции в вашем файле Sass с пространством имен, основанным на имени файла. Использование файла также будет включать CSS , который он генерирует в ваш скомпилированный вывод!Синтаксис SCSS
// _base.scss $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss @use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
Вывод CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
Обратите внимание, что мы используем @use 'base';
в styles.scss
файле. Когда вы используете файл, вам не нужно включать расширение файла. Sass умен и все поймет за вас.
Миксины
Некоторые вещи в CSS немного утомительны для написания, особенно с CSS3 и многими существующими префиксами поставщиков. Mixin позволяет вам создавать группы объявлений CSS , которые вы хотите повторно использовать на своем сайте. Это помогает сохранить ваш Sass очень сухим. Вы даже можете передавать значения, чтобы сделать миксин более гибким. Вот пример для theme
.
Синтаксис SCSS
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
Вывод CSS
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
Чтобы создать миксин, вы используете @mixin
директиву и даете ему имя. Мы назвали наш миксин theme
. Мы также используем переменную $theme
внутри круглых скобок, чтобы мы могли передать theme
все, что захотим. После того, как вы создадите свой миксин, вы можете использовать его как объявление CSS , начиная с @include
, за которым следует имя миксина.
Расширение/Наследование
Использование @extend
позволяет передавать набор свойств CSS из одного селектора в другой. В нашем примере мы собираемся создать простую серию сообщений об ошибках, предупреждениях и успехах, используя другую функцию, которая идет рука об руку с классами-заполнителями. Класс-заполнитель — это особый тип класса, который печатается только тогда, когда он расширен, и может помочь сохранить ваш скомпилированный CSS аккуратным и чистым.
Синтаксис SCSS
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended. %equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
Приведенный выше код говорит .message
, .success
, .error
и .warning
вести себя так же, как %message-shared
. Это означает, что везде, где %message-shared
появляется, .message
, .success
, .error
, & .warning
тоже будет. Волшебство происходит в сгенерированном CSS , где каждый из этих классов получит те же свойства CSS%message-shared
, что и . Это поможет вам избежать написания нескольких имен классов в элементах HTML .
Вы можете расширить большинство простых селекторов CSS в дополнение к классам-заполнителям в Sass, но использование заполнителей — это самый простой способ убедиться, что вы не расширяете класс, вложенный где-то еще в ваших стилях, что может привести к появлению непреднамеренных селекторов в вашем CSS.
Обратите внимание, что CSS не %equal-heights
генерируется, потому что %equal-heights
никогда не расширяется.
Операторы
Выполнение математики в вашем CSS очень полезно. В Sass есть несколько стандартных математических операторов, таких как +
, -
, *
, math.div()
и %
. В нашем примере мы собираемся выполнить простую математику, чтобы вычислить ширину для article
и aside
.
Синтаксис SCSS
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}
Вывод CSS
.container {
display: flex;
}
article[role="main"] {
width: 62.5%;
}
aside[role="complementary"] {
width: 31.25%;
margin-left: auto;
}
Мы создали очень простую плавную сетку на основе 960 пикселей. Операции в Sass позволяют нам делать что-то вроде получения значений пикселей и без особых хлопот преобразовывать их в проценты.