Sass-документация

Главная информация

Sass: (Syntactically Awesome Style Sheets) это мощный инструмент, который предоставляет языку CSS некоторые полезные функции программирования, такие как переменные, функции, импорт и экспорт.

Файлы Sass имеют расширение (.scss), и мы связываем их с файлами HTML так же, как мы использовали файлы CSS.

Настройка среды

1) Установите расширение живого компилятора Sass на VSCode.

2) Создайте обычный файл HTML

3) Создайте папку с именем (styles) и создайте в ней файл Sass с именем (style.scss)

4) Нажмите кнопку с изображением глаза в нижней части экрана VSCode с надписью (Sass watch). Он переведет ваш файл Sass (.scss) в обычный файл CSS (.css) и создаст его.

5) Теперь перейдите к своему HTML-файлу и свяжите с ним новый CSS (style.css) обычным способом. Теперь все, что вы напишете в файле Sass, будет переведено в CSS и обновит файл CSS.

Важно:

теперь мы только вводим наши стили в файл Sass, мы не должны ничего менять в файле CSS.

Работа с переменными

Мы можем хранить значения атрибутов внутри переменных, чтобы использовать их в любом месте кода.

Создайте переменную

$primaryColor: rgb(255, 255, 255);

он создаст переменную с именем (primaryColor) и присвоит ей значение цвета RGB, чтобы мы могли использовать ее несколько раз.

Используйте переменную

background-color: $primaryColor;

он будет использовать значение переменной (primaryColor) в качестве значения атрибута (background-color).

Вложенные атрибуты HTML

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

Старый способ:

body{
    background-color: white;
}
body div{
    color: black;
}
body p{
    color: red;
}

Новый способ:

body{
    background-color: white;
    div {
        color: black;
    }
    p {
        color: red;
    }  
}

Разделение файла Sass на группы

Мы можем разделить наш код Sass на множество подфайлов и связать их вместе, чтобы упорядочить код.

1)Мы должны создать подфайл, имя которого должно начинаться с символа подчеркивания ( _ ). Итак, создайте новый файл Sass внутри папки стилей с именем (_header.scss) и поместите в него свой CSS-код для услышанного элемента.

2)Теперь вернитесь к основному файлу Sass и импортируйте новый подфайл.

@import "./header";

3)Теперь два файла будут объединены вместе.

Построение и вызов функций

Создание функции

Мы используем ключевое слово (mixin) для создания функции в Sass с аргументами или без них.

Следующая функция (flexCenter) применит процесс центрирования с помощью (flex) и задаст указанное направление для любого элемента, который его вызывает.

@mixin flexCenter($dir) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $dir;
}

Вызов функции

Мы используем ключевое слово (include) для вызова функции и передачи аргументов, которые нужно применить. Следующий div будет иметь центрированное значение гибкого отображения с гибким направлением столбца.

div {
    @include flexCenter(column);   
}

Наследование стилей

Мы можем наследовать все стили от одного селектора к другому по ключевому слову (extend).

Определение исходного селектора

Придаем стиль элементу по классу (.box)

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

Наследование стилей другому селектору

Теперь мы можем предоставить элементу body все стили класса (.box).

body {
    @extend .box;
}

Переопределение стиля

Мы можем переопределить унаследованный стиль, снова переназначив его значение в новом селекторе.

body{
    @extend .box;
    flex-direction: column;
}

Арифметические операции

Мы можем использовать арифметические операции, такие как + — / *, с числовыми значениями, такими как ширина и высота, чтобы получить динамические адаптивные стили.

main{
    width: 400px - 300px;
}