Sass Basics @-правила и директиви

@-правилата и директивите са ключови характеристики на Sass, с които трябва да сте наясно, особено директивата @import. Някои от тези @-правила разширяват CSS @-правилата, други са специфични за Sass. Във всеки случай, трябва да знаете тези правила, ако ще работите със Sass.

Sass разширява правилото за CSS @import, за да включи възможността за импортиране на SCSS/Sass файлове. Обикновено използваме това правило за импортиране на Sass файлове в основния файл. Импортирането на файл ви дава достъп до всички миксини и променливи в този файл.

Sass по подразбиране търси други файлове в текущата директория и след това в директорията Sass под Rails. Можете също да посочите допълнителни папки, в които да се търсят файлове. Например, ако използвате Compass, можете да зададете настройката sass_dir в config.rb.

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

Файлово разширение .css
Името на файла започва с http://
Името на файла е url()
@import съдържа медийни заявки

Ако разширението на файла е .scss или .sass, файлът ще бъде импортиран. Ако не е указано разширение, Sass ще се опита да намери файл с това име и подходящото разширение. Например:

И двата израза са валидни, файлът sample.scss ще бъде импортиран. Вторият @import също ще включва файла sample.sass, ако съществува.

Можете да импортирате няколко файла в един израз, като посочите имената им, разделени със запетаи.

Трябва да се внимава, когато импортирате файловете, тъй като те трябва да бъдат импортирани в правилния ред. Например, ако имаме файл myVariables, който съдържа променливите в проекта и файл myStyles, който използва тезипроменливи, тогава първо трябва да се импортира файлът myVariables.

Ако импортираме файловете в реда, показан по-горе, ще получим грешка, защото myStyles използва променливи, които все още не са дефинирани.

Това е правилният начин, защото първо ще бъдат импортирани променливите.

Импортиране на фрагменти

Когато импортираме SCSS/Sass файл, той се компилира в отделен CSS файл със същото име. Обикновено все още искаме да съберем всички SCSS/Sass файлове в един CSS. За да предотвратите компилирането на всеки файл в отделен CSS, файловете могат да бъдат импортирани като фрагменти чрез добавяне на долна черта пред името на файла. Подчертаната черта казва на Sass, че този файл не трябва да се компилира в отделен CSS, но съдържанието му трябва да бъде вмъкнато в текущия файл вместо оператора @import.

Когато импортираме фрагмент, не е необходимо да се посочва долната черта. Нека преименуваме файла myVariables на _myVariables. Свързва се по същия начин както преди.

Разликата е, че файлът myVariables.css няма да бъде създаден, съдържанието се импортира в основния CSS файл. Важно е да запомните, че в една и съща директория не трябва да има фрагмент и отделен файл. Файловете _myVariables.scss и _myVariables.scss трябва да са в различни папки.

Вложени импорти

Най-често директивата @import се намира в горната част на файла, но може да бъде включена директно в правилата. Импортираните стилове ще бъдат включени там, където са импортирани. Например, имаме тестов файл със следното правило:

Можем да импортираме този файл в main.

Директиви като @mixin са разрешени само на основно ниво и не трябва да присъстват във файлове, които се импортират в правила. Също така не можете да извикате @import вътре в смесителна или контролна директива.

Директивата @media е подобна на директивата @media на CSS, с единствената разлика, че може да бъде вътре в правилата. Ако директивата @media е вътре в правило, тя преминава на най-високо ниво, когато се компилира.

Ще се компилира до:

Получихме отделно правило за нашата медийна заявка, въпреки че в Sass то беше вложено в .container. Можем също така да вложим @media директиви една в друга. Тези искания ще бъдат комбинирани от И.

Компилиране на резултатите в две медийни заявки. И накрая, можем да използваме променливи, функции и оператори в медийни заявки.

В горния пример използвахме променливата $format и различни променливи за различни типове устройства в подзаявките. Получаваме:

Понякога един елемент на страница трябва да има всички стилове на друг елемент, плюс своя собствен. Да кажем, че имаме два класа за текст, първият е за нормален текст, вторият е за селекция.

Това работи чудесно, но трябва да използвате и двата класа за избрания текст:

Използваме Sass, за да намалим количеството код. Директивата @extend позволява на един клас да наследи всички стилове на друг.

Примерът по-горе ще се компилира до:

Както можете да видите, класът .emphasis включва всички стилове на класа .master и също така има свой собствен за подчертаване на текст. Сега само класът .emphasis може да се използва за избран текст.

С директивата @extend можете да наследявате от множество селектори, един клас може да има множество директиви @extend и те също могат да се свързват във верига. Повече подробности можете да видите в документацията.

Използвайте @extend внимателно, тъй като може да обърка стиловете. Хюго написа публикация за това защо избягва да използва @extend и по-подробна публикация по същата тема.

Директивата @at-root създава правилата в основата на документа вместо в родителския елемент, където са посочени.

Ще се компилира до:

Директивата @at-root работи като блок за избор. Както можете да видите, правилата вътре в @at-root са компилирани в корена на документа, а другите селектори са вложени в .top.

Директивата @at-root също позволява селектори да бъдат извадени от друга директива с (без: . ) или (с: . ). Например:

Директивата @at-root беше използвана с without, така че стиловете бяха компилирани без медийна заявка.

Директивата @debug ви позволява да изведете стойност към стандартния изход. Например:

Когато запазя файла, изходният поток на командата watch ще се покаже:

Директивата @warn отпечатва стойността на израза в стандартния изход.

Този код ще изведе стойността на израза и номера на реда на предупреждението.

Директивата @error също ви позволява да запишете стойността на израз в стандартния изход.

Този код ще изведе стойността на израза и номера на реда на предупреждението.

Заключение

Покрихме редица @-правила и директиви, за които може да не знаете. Може да не сте в състояние да ги използвате често, но винаги е добре да знаете какви инструменти имаме на разположение.