Основы Sass: @ -rules и директивы

@ -Rule и директивы в Sass — это магистральные функции, о которых вы должны хотя бы знать, особенно когда это касается правила @import. Некоторые из этих @ -rules являются расширениями CSS @ -rules, в то время как другие являются специфическими директивами Sass. В любом случае лучше знать, для чего эти правила и как они работают, если вы собираетесь работать с Sass.

@импорт

Sass расширяет правило CSS @import, чтобы он мог импортировать файлы SCSS / Sass. Обычно мы используем это правило для импорта нашего Sass в один мастер-файл. Мы включаем этот мастер-файл в качестве основного CSS-файла в проект, чтобы использовать все сводные правила. Импорт файла дает доступ к любым миксинам или переменным, включенным в файлы.

Sass по умолчанию ищет другие файлы Sass в текущем каталоге, а затем в каталоге файлов Sass в Rails. Вы также можете указать дополнительные каталоги, используя опцию пути загрузки. Если вы используете Compass, вы можете указать каталог, изменив значение sass_dir в config.rb.

@import ищет файл Sass для импорта, но скомпилирует с правилом CSS @import при следующих условиях:

• Расширение файла .css
• Имя файла начинается с htp: //
• Имя файла является URL ()
• У @import есть медиа-запросы

Если расширение файла — .scss или .sass файл будет импортирован. Если расширение отсутствует, Sass попытается найти файл, который соответствует имени и правильному расширению. Например:

 @import "sample.scss"; @import "sample"; 

Оба эти оператора @import действительны и будут импортировать файл sample.scss. Второй импорт также импортирует sample.sass, если он существует.

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

 @import "sample1", "sample2", "sample3"; 

При импорте файлов необходимо соблюдать осторожность, поскольку они должны быть импортированы в правильном порядке. Например, допустим, у нас есть файл myVariables который включает переменные в нашем проекте. Если у нас есть другой файл с именем myStyles который использует эти переменные, файл myVariables должен быть импортирован первым.

 @import "myStyles"; @import "myVariables"; 

Если мы импортируем в этом порядке, мы получим ошибку, так как myStyles попытается использовать переменные, которые еще не были определены.

 @import "myVariables"; @import "myStyles"; 

Это правильный способ импорта, поскольку переменные, myStyles файле myStyles , уже импортированы.

Частичные @import

При импорте файла SCSS / Sass он будет компилироваться в файл с тем же именем CSS. Обычно мы хотим импортировать отдельные файлы SCSS / Sass в один основной файл CSS против нескольких файлов CSS. Для этого нам нужно импортировать файлы как частичные. Мы превращаем файл SCSS / SASS в частичное, добавляя подчеркивание перед именем. Подчеркивание говорит Sass не компилировать файл как отдельный CSS-файл, а объединить его с текущим файлом, который содержит оператор @import.

Когда мы импортируем эти части, нам не нужно включать подчеркивание. myVariables мы изменили myVariables на _myVariables . Мы импортировали бы файл таким же образом.

 @import "myVariables"; 

Разница в том, что файл myVariables.css не будет создан, файл будет объединен с основным файлом CSS. Важно отметить, что нельзя включать в каталог частичное и не частичное имя с одинаковыми именами. Мы не можем иметь _myVariables.scss и myVariables.scss в одном месте.

Вложенный @import

Большую часть времени у нас будет @import на верхнем уровне нашего документа, мы можем включить их в наши правила. Импортированные правила будут вложены туда, где они были импортированы. Например, допустим, у нас есть test имени файла со следующим правилом

 .try { color: blue; } 

 #why { @import "test"; } 

 #why .try { color: blue; } 

 .container { width: 60%; @media (min-width: 200px) and (max-width:600px) { width: 100%; } } 

 .container { width: 60%; } @media (min-width: 200px) and (max-width: 600px) { .container { width: 100%; } } 

 @media screen { .main { @media (max-width: 600px) { width: 100%; } @media (min-width: 700px) { width: 70%; } } } 

 @media screen and (max-width: 600px) { .main { width: 100%; } } @media screen and (min-width: 700px) { .main { width: 70%; } } 

 $format: screen; $mobile: 500px; $tablet: 800px; $desktop: 1200px; @media #{$format} { .menu { @media (max-width: $mobile) { width: 100%; } @media (max-width: $tablet) { width: 60%; } @media (max-width: $desktop) { width: 30%; } } } 

 @media screen and (max-width: 500px) { .menu { width: 100%; } } @media screen and (max-width: 800px) { .menu { width: 60%; } } @media screen and (max-width: 1200px) { .menu { width: 30%; } } 

 .main { color: black; font-size: 12px; } .emphasis { font-weight: bold; } 

 <div class="main emphasis"> 

 .master { color: black; font-size: 12px; } .emphasis { @extend .master; font-weight: bold; } 

 .master, .emphasis { color: black; font-size: 12px; } .emphasis { font-weight: bold; } 

 .top { .first { font-size: 12px; } @at-root { .second { font-size: 14px; } .third { font-size: 16px; } } .fourth { font-size: 18px; } } 

 .top .first { font-size: 12px; } .second { font-size: 14px; } .third { font-size: 16px; } .top .fourth { font-size: 18px; } 

 @media print { .copy { color: black; @at-root (without: media) { width: 100%; } } } 

 @media print { .copy { color: black; } } .copy { width: 100%; } 

 @debug 10px + 20px; 

 1 DEBUG: 30px 

 $wrn: 20px; @warn "#{$wrn}"; 

 $test: 1px; @error "#{$test}";