sass учебник
Начало работы с sass

замечания

Версии

Настроить

Когда дело доходит до использования SASS, существует несколько способов настройки рабочего пространства. Некоторые люди предпочитают использовать инструменты командной строки (возможно, люди Linux), а другие предпочитают использовать приложения с графическим интерфейсом. Я расскажу об обоих.

Инструменты командной строки

Страница «Установить SASS» на sass-lang.com достаточно хорошо sass-lang.com это. Вы можете использовать SASS с Ruby (который может быть установлен из диспетчера пакетов Linux или вы можете загрузить программу установки в Windows). macOS поставляется с предустановленной Ruby.

Как только вы установили Ruby, вам нужно установить SASS (в некоторых случаях sudo может и не понадобиться):

sudo gem install sass

Наконец, вы можете проверить, что вы установили SASS с sass -v .

Приложения для графического интерфейса пользователя

Хотя есть несколько приложений GUI, которые вы можете использовать, я рекомендую Scout-App . Он автоматически создает и сжимает ваши файлы CSS для вас, сохраняет файлы и поддерживает MacOS, Windows и Linux.

переменные

Если у вас есть значение, которое вы часто используете, вы можете сохранить его в переменной. Вы можете использовать это, чтобы определить цветовые схемы, например. Вам нужно будет только определить вашу схему один раз, а затем вы можете использовать ее в своих таблицах стилей.

Чтобы определить переменную, вы должны префикс ее имени символом $. (Как и в PHP.)

Вы можете сохранить любое допустимое значение свойства CSS внутри переменной. Например, цвета, шрифты или URL-адреса.

Пример №1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

Импорт

Давайте предположим следующий сценарий: у вас есть две таблицы стилей: _variables.scss и layout.scss . Логически, вы сохраняете все свои переменные внутри своей таблицы стилей переменных, но хотите получить к ним доступ из таблицы стилей макета.

ПРИМЕЧАНИЕ. Вы можете заметить, что таблица стилей переменных имеет знак подчеркивания ('_') перед его именем. Это потому, что это частичное - это означает, что он будет импортирован.

sass-lang.com говорит о частичных: вы можете создавать частичные файлы Sass, содержащие небольшие фрагменты CSS, которые вы можете включить в другие файлы Sass. Это отличный способ модулизации вашего CSS и упрощения обслуживания. [...] Подчеркивание позволяет Sass знать, что файл является лишь частичным файлом и что он не должен быть сгенерирован в файл CSS. Частицы Sass используются с директивой @import.

Переменные SCSS отлично подходят для этого сценария. Предположим, что ваш _variables.scss выглядит так:

$primary-color: #333;

Вы можете импортировать его с помощью @import а затем имя таблицы стилей в кавычках. Теперь ваша таблица стилей макета может выглядеть так (обратите внимание на то, что в импорте не было подчеркивания или расширения файла):

@import 'variables';
body {
  color: $primary-color;
}

Это приведет к следующему:

body {
  color: #333;
}

гнездование

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

выход

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

Комментарии

SASS поддерживает два типа комментариев:

• Встроенные комментарии. Они охватывают только одну строку и обычно используются для описания переменной или блока. Синтаксис выглядит следующим образом: // Your comment here (вы добавляете его с двойной косой чертой ( // ), а остальная часть строки игнорируется синтаксическим анализатором.

• Многострочные комментарии. Они охватывают несколько строк и обычно используются для отображения авторских прав или лицензии в верхней части документа. Вы можете открыть многострочный блок комментариев с помощью /* и вы можете закрыть многострочный блок комментариев с помощью */ . Вот пример:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/