Directiva @import este, de asemenea, în CSS simplu, este folosit pentru a importa o foaie de stil (sau mai multe) într-o altă foaie de stil. Limba SASS extinde această directivă, deși compilatorul SASS extinde mai competent această directivă.
Deoarece SASS este un limbaj preprocesor, noi caracteristici au fost adăugate la directiva @import. Deoarece compilatorul compilează fișierul CSS din fișierul SCSS, acesta va putea să includă direct stilurile fișierelor noastre SCSS prin intermediul directivei @import. Dacă configurați corect compilatorul. atunci puteți obține un fișier CSS la ieșire. Astfel, fișierele SCSS vor fi structurate, vom avea "header.scss", "basket.scss" și așa mai departe, iar la ieșire obținem un fișier CSS. Unii dezvoltatori numesc acest proces de fragmentare sau blocare. Deoarece fișierele SCSS sunt încă activate, directiva @import nu trebuie să fie conectată la începutul fișierului, ci poate fi conectată oriunde. Deci, să începem:
Fișier, de exemplu, main.scss
După compilare, primim fișierul "main.css" cu stilurile din fișierul "header.scss". Pentru a conecta un fișier SCSS, nu indica neapărat extensia acestuia. De exemplu:
După compilare, vom primi fișierul "main.css" cu stilurile din fișierul "header.scss" ultima dată. Deoarece folosim compilatorul, putem să ne îndepărtăm de regulile standard CSS și să conectăm fișierele după cum urmează:
@import "header", "coș", "catalog";
După compilare, primim fișierul principal.css cu stilurile din fișierul "header.scss", "basket.scss", "catalog.scss".
Includerea fișierului SCSS prin intermediul directivei @import nu va avea loc (@import va fi redat în conformitate cu regulile CSS) dacă:
marjă. 30px 10px;
După cum putem vedea din exemplul de mai sus, stilurile au fost incluse din fișierul "example.scss" din "main.scss". În același timp, includerea nu sa întâmplat doar în fișier, ci în clasa bara laterală. deoarece am conectat directiva @import pentru clasa barei laterale. Am aplicat reguli imbricate.
Deci, este necesar să vă conectați prin intermediul directivei @import. Totul depinde de dimensiunea proiectului. Cu cat proiectul este mai mare, cu atat mai multe blocuri merita sa-l rupi. În cazul în care proiectul este mic (site-ul carte de vizită, simplu blog), nu ar trebui să deranjeze în special cu privire la rupere în jos în blocuri separate, dar în acest caz, este necesar să se efectueze în plugin-uri separate pentru blocuri (fancyBox, colorbox, jcarousel etc.). Am studiat deja variabilele. astfel încât veți putea să faceți în variabile separate acele lucruri pe care cele mai multe ori le stilizați în aceste pluginuri. De exemplu, în designerul fancybox stilizați: buton de închidere, săgeți de defilare, fundal pentru fotografii. Imaginile acestor elemente și dimensiunile lor pot fi eliminate complet în variabile, astfel încât să nu poată fi căutate mai târziu. Deci creșteți viteza muncii voastre. Pentru magazinele online am făcut blocuri separate pentru coș, catalog. Tocmai am conectat codul prin directiva @import. Voi schimba variabilele și totul este gata, chiar dacă nu trebuie să faceți nimic. Dacă faci lucruri tipice, și designeri rareori ceva nou vine, nu fi leneș pentru a le aduce în variabilele, a doua oară când le-au expus mai repede, și cel mai probabil le aveți și să impună nu se va conecta doar, schimba variabile, iar acest lucru este destul de mult.
Cadrele @import și css-și directivele
Vorbind despre directiva @import nu este posibil să nu spunem despre CSS-framework-ah. Următorul cadru este scris pe fundația SASS: zurb. Gumby. bourbon. și aceasta nu este o listă completă. Puțini oameni știu, dar puteți descărca fișiere de date SCSS de cadre. Dacă nu puteți descărca fișiere SCSS de pe site-urile oficiale, puteți oricând să le găsiți pe github. Acest cadru are propriile componente, mix-uri, structuri de control, fișiere de configurare. Folosind SASS, puteți configura mai flexibil cadrul de date-și. Pur și simplu conectați cadrul de date - și prin CSS obișnuit, nu obțineți o astfel de flexibilitate.
Permiteți-mi să vă explic cu un exemplu concret. Să presupunem că doriți să vă conectați la proiectul dvs. printr-o paginare, cum ar fi pe o fundație zurb. Tot ceea ce trebuie să facă acest lucru este de a descărca o versiune a fundației SASS-zurb (poate fi descărcat de pe site-ul oficial) și conectați prin intermediul @import directivă fișier „_pagination.scss“ (5 fundație zurb acesta se află în dosarul fundație / componente). În partea de sus a fișierului "_pagination.scss" există 20 de variabile, schimbându-le puteți configura paginarea după cum doriți.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
$ include-clase de paginare. $ include-html-classes!
$ pagination-height. rem-calc (24)! implicit;
$ paginare-margine. rem-calc (-5)! implicit;
$ pagination-li-float. $ default-float! implicit;
$ pagination-li-height. rem-calc (24)! implicit;
$ pagination-li-font-color. $ jet! default;
$ pagination-li-font-size. rem-calc (14)! implicit;
$ pagination-li-margine. rem-calc (5)! implicit;
$ pagination-link-pad. rem-calc (1 10 1)! implicit;
$ pagination-link-font-color. $ aluminiu implicit;
$ pagination-link-active-bg. scalare-culoare ($ alb, $ luminozitate: -10%)! implicit;
$ pagination-link-unavailable-cursor. implicit!
$ pagination-link-unavailable-font-color. $ aluminiu implicit;
$ pagination-link-indisponibil-bg-activ. transparent implicit;
$ pagination-link-current-background. $ primar-culoare!
$ pagination-link-current-font-color. $ white! implicit;
$ pagination-link-current-font-weight. $ font-weight-bold! implicit;
$ pagination-link-current-cursor. implicit!
$ pagination-link-current-active-bg. $ primar-culoare!
Descrierea detaliată a componentelor fundației zurb nu este un subiect pentru un articol. Pot spune că în fundația zurbă există componente pentru forme, butoane, pluginuri, poți lua doar o rețea dacă vrei. Este foarte convenabil. După cum am scris mai sus, doar prin conectarea CSS nu obțineți o astfel de flexibilitate, va trebui să urcați în cod și să căutați ce să înlocuiți. În fișierele SCSS totul este pus în variabile, nu trebuie să căutați nimic.
De asemenea, puteți utiliza bibliotecile myxin pentru prefixele CSS3. Folosesc biblioteci cum ar fi compas și bourbon.
Vă sfătuiesc să descărcați fișierele de date SCSS ale cadrelor și să le urmăriți. Studiind structurile lor, veți înțelege foarte mult. În timp, veți scrie personal componentele SASS, de care aveți nevoie. Ar trebui să începeți cu pluginurile pe care le utilizați frecvent. Și aici este necesar să spunem despre conectarea directivei @import. Variabilele și mixurile trebuie să fie declarate înainte de a fi chemați, altfel compilatorul va provoca o eroare, dacă urmați această regulă, atunci în timp ce veți avea propriul cadru SCSS, exact ceea ce aveți nevoie, limitat la nevoile dvs.
Trimiteți-le prietenilor: