Сас запазва CSS кода СУХО (Не се повтаряйте). Един от начините да напишете DRY код е да запазите свързания код в отделни файлове.
Можете да създавате малки файлове с CSS фрагменти, които да включите в други Sass файлове. Примери за такива файлове могат да бъдат: файл за нулиране, променливи, цветове, шрифтове, размери на шрифта и т.н.
Файлове за импортиране на Sass
Подобно на CSS, Sass също поддържа @import директивата.
В @importдирективата позволява да включите съдържанието на един файл в друг.
@importДирективата CSS има сериозен недостатък поради проблеми с производителността; той създава допълнителна HTTP заявка всеки път, когато я извикате. @import Директивата Sass обаче включва файла в CSS; така че не се изисква допълнително HTTP повикване по време на изпълнение!
Синтаксис на импортиране на Sass:
Съвет: Не е необходимо да указвате разширение на файл, Sass автоматично приема, че имате предвид файл .sass или .scss. Можете също да импортирате CSS файлове. В @import директивата внос на файла и всички променливи или mixins определени в импортираните файлове могат да бъдат използвани в основния файл.
Можете да импортирате толкова файлове, колкото са ви необходими в основния файл:
Пример
Нека разгледаме пример: Да приемем, че имаме файл за нулиране, наречен „reset.scss“, който изглежда така:
Пример
Синтаксис на SCSS (reset.scss):
и сега искаме да импортираме файла „reset.scss“ в друг файл, наречен „standard.scss“.
Ето как го правим: Нормално е да добавите @import директивата в горната част на файл; по този начин съдържанието му ще има глобален обхват:
Синтаксис на SCSS (standard.scss):
И така, когато файлът „standard.css“ бъде транслиран, CSS ще изглежда така:
CSS изход:
Sass Partials
По подразбиране Sass транпилира директно всички .scss файлове. Когато обаче искате да импортирате файл, не е необходимо файлът да се транслира директно.
Sass има механизъм за това: Ако стартирате името на файла с долна черта, Sass няма да го транслира. Файлове, наречени по този начин, се наричат частици в Sass.
И така, частичен файл Sass се именува с водеща долна черта:
Частичен синтаксис на Sass:
Следващият пример показва частичен файл на Sass, наречен „_colors.scss“. (Този файл няма да бъде транслиран директно в „colors.css“):
Пример
„_colors.scss“:
Сега, ако импортирате частичния файл, пропуснете долното. Сас разбира, че трябва да импортира файла „_colors.scss“: