Что такое Сасс? Узнайте, как использовать этот язык расширений CSS

Синтаксически удивительные таблицы стилей (Sass) — это популярный язык расширений CSS. Язык существует уже около 15 лет. Он хорошо работает с любой версией CSS, что делает его совместимым со всеми библиотеками и фреймворками CSS, от Bootstrap до Foundation.

Язык позволяет вам писать код Sass, а затем компилировать этот код в CSS. Ценность использования Sass вместо обычного CSS заключается в том, что он предоставляет дополнительные функции, которые в настоящее время выходят за рамки CSS.

В этом руководстве вы узнаете, как использовать Sass и его самые важные функции.

Установка Sass

Существует несколько способов использования Sass на вашем устройстве. К ним относятся запуск приложения (например, LiveReload или Scout-App), загрузка Sass с GitHub, или установить его используя нпм.

Установка Sass с помощью npm

Чтобы установить Sass с помощью npm, вам нужно установить NodeJS и npm на вашем устройстве. Затем вам нужно будет создать пакет.json файл (что является хорошей практикой при установке любого пакета npm в ваших проектах). Вы можете создать базовую

пакет.json файл в каталоге вашего проекта с помощью следующей команды терминала:

инициализация npm -y

Выполнение этой команды создаст файл package.json со следующим содержимым:

{
 "имя": "мое_приложение",
 "версия": "1.0.0",
 "описание": "",
 «основной»: «index.js»,
 "скрипты": {
 "test": "echo \"Ошибка: тест не указан\" && выход 1"
 },
 "ключевые слова": [],
 "автор": "",
 "лицензия": "ISC"
}

То пакет.json файл важен, потому что он служит конфигурацией для вашего проекта. Каждый раз, когда вы устанавливаете новый пакет npm, пакет.json файл отразит это.

Теперь вы можете установить Sass, вставив следующую команду в свой терминал:

npm установить sass

Эта команда обновит пакет.json файл, создав новый поле зависимости, который будет содержать новый пакет Sass. Это также создаст новый пакет-lock.json файл и установите sass (плюс зависимости) в node_modules каталог.

Различные типы файлов Sass

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

Пример файла .scss

$основной цвет: синий;
тело {
 цвет: $основной цвет;
 п {
 красный цвет;
 }
}

Пример файла .sass

$основной цвет: синий
тело
 цвет: $основной цвет
 п
 красный цвет

Компиляция файла Sass в CSS

Вы можете скомпилировать отдельный файл Sass с помощью дерзкий программа командной строки:

sass файл.scss > файл.css

Вы также можете запустить sass для всех файлов в определенном каталоге:

sass scss: dist/css/

Эта команда компилирует все файлы Sass в scss каталог и сохраняет полученные файлы в расстояние/CSS.

Если вы используете npm, вы можете настроить удобный ярлык для компиляции sass с помощью сценарии поле в вашем пакет.json файл:

"скрипты": {
 "test": "echo \"Ошибка: тест не указан\" && выход 1",
 "sass": "sass --watch scss: dist/css/"
 },

В этой конфигурации используется --смотреть вариант. Он поддерживает работу sass и обеспечивает повторную компиляцию этих файлов всякий раз, когда они изменяются. Для каждого файла sass будет генерировать .css и .css.карта файл.

Чтобы выполнить приведенный выше Sass-скрипт, вам нужно выполнить следующую команду в своем терминале:

нпм запустить sass

Выполнение этой команды приведет к выводу, подобному этому:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Скомпилировал scss\main.scss в dist\css\main.css.
Sass следит за изменениями. Нажмите Ctrl-C, чтобы остановить.

Sass-переменные

Вы можете создавать переменные в CSS сегодня, но 15 лет назад переменных CSS не существовало, поэтому поддержка Sass для них была ценной. Переменные Sass работают почти так же, как переменные CSS. В них хранятся значения (например, цвета), которые вы собираетесь использовать в файле CSS. Одно из основных преимуществ переменных заключается в том, что они позволяют обновлять множество вхождений значения, изменяя его только в одном месте.

Каждая переменная Sass начинается со знака доллара, за которым следует любая комбинация символов. Постарайтесь сделать ваши переменные описательными, например $ основной цвет пример выше. Важно отметить, что переменная Sass не компилируется в переменные CSS. Например, этот файл .scss:

$основной цвет: синий;
тело {
 цвет: $основной цвет;
}

Будет скомпилирован в следующий CSS:

тело {
 цвет синий;
}

Как видно из файла выше, переменных CSS нет. Преимущество переменных заключается в том, что любое изменение, внесенное в файл Sass, приведет к обновлению соответствующего файла CSS.

Сасс Миксины

Если у вас есть одно свойство, которое вы хотите использовать несколько раз в своем проекте, тогда отлично подойдет переменная. Но если у вас есть группа свойств, которые вы хотите использовать как единое целое, примесь сделает свое дело.

Каждый миксин начинается с @mixin ключевое слово, за которым следует имя, которое вы хотите присвоить миксину. У вас есть возможность передавать переменные миксину в качестве параметров и использовать эти переменные в теле миксина почти так же, как функцию.

Использование миксина

@mixin light-theme($primary-color: белый, $secondary-color: #2c2c2c) {
 семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
 цвет фона: $основной цвет;
 цвет: $вторичный цвет;
}
#дома {
 @include светлая тема (синяя);
}

Первое, что вы можете заметить в приведенном выше коде, это то, что миксин принимает два аргумента. Вы можете присвоить аргументам значения по умолчанию и переопределить их при включении.

После того, как вы создали свой миксин, вы можете использовать его в любом разделе вашего веб-сайта с помощью @включать ключевое слово, за которым следует имя миксина.

Компиляция приведенного выше кода Sass сгенерирует следующий код CSS в вашем целевом файле:

#дома {
 семейство шрифтов: "Franklin Gothic Medium", "Arial Narrow", Arial, без засечек;
 цвет фона: синий;
 цвет: #2c2c2c;
}

Sass-функции

Помимо разных ключевых слов, основное различие между функцией и примесью заключается в том, что функция должна что-то возвращать. Вы можете использовать функции Sass для вычисления значений или выполнения операций.

@function add-numbers($num-one, $num-two){
 $сумма: 0;
 $sum: $num-one + $num-два;
 @возврат $сумма 
}

Эта функция выше принимает два числа и возвращает их сумму. Функции Sass могут даже содержать операторы if, циклы for и другие операторы управления потоком.

Sass-модули

Если бы вам нужно было включить все ваши переменные, примеси и функции в один файл, у вас был бы массивный файл Sass при создании больших приложений. Модули позволяют разбивать большие файлы на более мелкие, которые sass объединяет во время компиляции. Например, у вас может быть функциональный модуль и модуль миксина, все, что вам нужно запомнить, это @использовать ключевое слово.

Вот пример, показывающий, как вы можете выделить предыдущий миксин в отдельный файл:

Файл mixins.scss

@mixin light-theme($primary-color: белый, $secondary-color: #2c2c2c) {
 семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
 цвет фона: $основной цвет;
 цвет: $вторичный цвет;
}

Файл main.scss

@используйте 'примеси';
#дома{
 @include mixins.light-тема;
}

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

#дома {
 семейство шрифтов: "Franklin Gothic Medium", "Arial Narrow", Arial, без засечек;
 цвет фона: белый;
 цвет: #2c2c2c;
}

Используйте Sass для расширения и организации вашего CSS

Sass — это расширение синтаксиса CSS. Это позволяет оптимизировать таблицы стилей и более эффективно управлять ими. Но вам все равно нужно будет владеть принципами CSS и веб-дизайна, чтобы создавать эффективные дизайны.

В этой статье вы узнаете, как установить и использовать Sass. Вы узнали, как создавать переменные Sass, миксины, функции и модули. Теперь все, что вам осталось сделать, это создать HTML-документ и посмотреть, как оживает ваш код Sass.

8 основных советов и приемов CSS, которые должен знать каждый разработчик

Читать далее

Об авторе