@import директива е в нормалния CSS, тя се използва за внос на един стил лист (или няколко) в друга. SASS език се простира на директивата, въпреки че умен, за да се каже, SASS компилатор разширява директивата.
От SASS се отнася до езика на предпроцесорни, са добавени нови функции, за да @import директивата. След като съставител е все още на SCSS-файл компилира CSS-ку, тя може съвсем директно чрез директивата за @import да включва стилове на нашите SCSS-файлове. Ако конфигурирате правилно компилатора. можете да получите един на изхода на CSS-файл. Така SCSS-файлове са структурирани, ние ще "header.scss", "basket.scss" и така нататък, и на изхода, които получаваме един CSS-файл. Някои хора наричат този процес на раздробяване или разделяне на блокове. Време все още е включен SCSS-файл, директивата @import не са непременно свързани само в началото на файла, то може да бъде свързан навсякъде. Така че ето го:
Файл например main.scss
След компилация получаваме файла "main.css" с стилове от "header.scss" на файла. не е задължително да ukazyvaet разширяването му да се свърже SCSS-файл. Например:
След компилация получаваме като за последен път на файла "main.css" с стилове от "header.scss" на файла. Тъй като ние сме с помощта на компилатор, ние можем да се движат далеч от стандартните правила на CSS и включване на файлове, както следва:
@import "глава", "кошница", "каталога";
След компилация получаваме main.css файл с стилове "header.scss" Файл ", basket.scss", "catalog.scss".
Включването SCSS-файл чрез директива @import няма да се случи (@import ще бъдат показани на правилата на CSS), ако:
марж. 30px 10px;
Както можем да видим от примера по-горе, не е включването на стилове от файл "example.scss" в "main.scss". В същото време включването не е просто един файл, и в класа на лента. защото ние закачен @import директива в страничната лента на класа. Ние приложихме вложени правила.
И така, какво трябва да бъде свързан чрез директивата за @import. Всичко зависи от размера на проекта. Колкото по-голям проект, толкова по-голям броят на блокове на стойност пробив. Ако проектът е малък (сайт за визитки, прост блог), не трябва да се притеснява особено за които се разпределят в отделни блокове, но в този случай е необходимо да се извършва в отделни блокове плъгини (fancyBox, КолорБокс, jcarousel и т.н.). Ние вече учи променливи. така че може и да е в състояние да направи в отделните променливи са нещата, които най-често stilizuete тези плъгини. Така например, в fancybox дизайнери стилизирам: бутон за затваряне, а стрелката за превъртане, подложката за фото галерия. Снимки на тези елементи и техните размери е напълно възможно да се въвеждат в променливи, така че не трябва да го търсим. Така че можете увеличи скоростта на вашата работа. За онлайн магазини, аз направих някои блокове в кошницата директория. Аз просто се свържете кода чрез @import директива. промяна на променливи и всички готови дори да наложи нищо. Ако се прави типичните неща и дизайнери рядко нещо ново идва, не се мързеливи, за да ги приведат в променливите, вторият път, когато трябва да ги изложи по-бързо, и най-вероятно ги имате и да наложи не само ще се свърже, променливите на, и това е напълно достатъчно.
директива @import и CSS-рамка-и
Говорейки за директивата за @import не е възможно да се каже за CSS-рамка-ах. На SASS-е написал следното рамка-и: фондация zurb. Gumby. бърбън. и това не е изчерпателен списък. Малко хора знаят, но можете да изтеглите файлове с данни SCSS-рамка-те. Ако не можете да сваляте файлове от SCSS-официален сайт, винаги можете да ги намерите на GitHub-е. Тази рамка-и имат техните компоненти, Mixin-ите, уреждащ дизайн, конфигурационни файлове. Използването на SASS можете да персонализирате рамка-и данни по-гъвкаво. Просто свържете тези рамка-и чрез редовен CSS, те не получават този вид гъвкавост.
Позволете ми да обясня всичко конкретен пример. Да предположим, че искате да се свържете с вашия проект страниране, като zurb основа. Всичко, което трябва да направи това е да изтеглите версия на SASS-zurb основата (тя може да бъде изтеглена от официалния сайт) и се свързват чрез @import директива файла "_pagination.scss" (5 zurb основа да лежи в основите на папка / компоненти). На най-високото "_pagination.scss" файла е 20 променливи, да ги промените, можете да персонализирате страниране, така, както желаете.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
$ Включи-страниране класове. $ Включване в HTML-класовете по подразбиране !;
$ Pagination височина. REM-изчислено (24) подразбиране !;
$ Pagination марж. REM-изчислено (-5) подразбиране !;
$ Pagination-ли-поплавък. $ Default-флоут подразбиране !;
$ Pagination-ли-височина. REM-изчислено (24) подразбиране !;
$ Pagination-ли-шрифт цвят. $ Jet подразбиране !;
$ Pagination-ли-размер на шрифта. REM-изчислено (14) подразбиране !;
$ Pagination-ли-марж. REM-изчислено (5) подразбиране !;
$ Pagination-връзка-подложка. REM-изчислено (1 10 1) подразбиране !;
$ Pagination-връзка-шрифт цвят. $ Алуминиеви подразбиране !;
$ Pagination-връзка-активна-бг. мащаб цвят ($ бяло, $ лекота: -10%) по подразбиране ;!
$ Pagination-връзка-недостъпна-курсор. подразбиране подразбиране !;
$ Pagination-връзка-недостъпна-шрифт цвят. $ Алуминиеви подразбиране !;
$ Pagination-връзка-недостъпна-бг-активни. прозрачен подразбиране !;
$ Pagination-връзка-ток-фон. $ Основно-подразбиране цвят !;
$ Pagination-връзка-ток-шрифт цвят. $ White подразбиране !;
$ Pagination-връзка-ток-шрифт тегло. $ Шрифт тегло-смели подразбиране !;
$ Pagination-връзка-ток-курсор. подразбиране подразбиране !;
$ Pagination-връзка-ток-активна-бг. $ Основно-подразбиране цвят !;
Той описва подробно фондация компонентите zurb тази тема не е една статия. Мога да кажа, че има компоненти zurb основа за формуляри, бутони, приставки, можете да вземете само в мрежата, ако искате. Това е много удобно. Както написах по-горе, просто чрез свързване на CSS, те не получават този вид гъвкавост, е необходимо да отидете в кода и да се стреми да го замени. На SCSS-файлове на всички извършени в променливите, изглежда, не е необходимо нищо.
Като алтернатива можете да използвате библиотеките на техни подобни, за CSS3 представки. Аз poolzuyus библиотеки, като например Компас и бърбън.
Съветвам ви да изтеглите тези файлове SCSS-рамка-ите и просто да ги гледате. Проучване на тяхната структура, вие ще разберете много. С течение на времето, вие сами ще напиша Sass-компоненти, като това, което имате нужда. Вие трябва да започнете с плъгините, които използвате често. И трябва да кажа тук, за свързването на @import директива. Променливи и Mixin-ите трябва да бъдат декларирани, преди те да се наричат, или компилаторът ще генерира грешка, ако следвате това правило, а след това с течение на времето ще имате вашата SCSS-рамка, така че по никакъв начин имате нужда от него, променено, за да отговарят на вашите нужди.