A sass, sass orosz dokumentáció @import irányelve
A @import irányelv szintén sima CSS-ben szerepel, egy stíluslapot (vagy többet) importál a másikba. A SASS nyelv kiterjeszti ezt az irányelvet, bár a SASS-kompilátor kompetensabban bővíti ezt az irányelvet.
Mivel a SASS egy előfeldolgozó nyelv, az @import irányelvhez új funkciókkal bővültek. Mivel a fordító összeállítja a CSS-fájlt az SCSS-fájlból, képes lesz arra, hogy közvetlenül az SCIF-fájlok stílusait közvetlenül az @import @ directive porton keresztül csatolja. Ha megfelelően konfigurálja a fordítót. akkor kaphat egy CSS fájlt a kimeneten. Így az SCSS fájlok strukturálódnak, "header.scss", "basket.scss" stb. Leszünk, és a kimeneten egy CSS fájlt kapunk. Néhány fejlesztő ezt a folyamatot töredezettségnek, vagy blokkolásnak nevezi. Mivel az SCSS fájlok továbbra is engedélyezve vannak, a @import direktíva nem csak a fájl elején köthető össze, bárhová csatlakoztatható. Kezdjük tehát:
A fájl például main.scss
A fordítás után megjelenik a "main.css" fájl a "header.scss" fájlból. SCSS fájl csatlakoztatásához nem feltétlenül jelzi a kiterjesztését. Például:
A fordítás után a "main.css" fájlt a legutoljára a "header.scss" fájl stílusaival kapjuk meg. Mivel a fordítót használjuk, eltávolíthatjuk a szabványos CSS-szabályokat, és a fájlokat az alábbiak szerint csatlakoztathatjuk:
@ importálás "fejléc", "kosár", "katalógus";
A fordítás után a main.css fájlt a "header.scss", a "basket.scss", a "catalog.scss" fájl stílusaiból állítjuk be.
Az @ import irányelven keresztül az SCSS fájl nem kerül bejegyzésre (a @ importálás a CSS szabályok szerint történik), ha:
árrés. 30px 10px;
Amint a fenti példából látható, a stílusok a "example.scss" fájlban szerepeltek a "main.scss" fájlban. Ugyanakkor a felvétel nem csak a fájlban történt, hanem az oldalsáv osztályban. mert összekapcsoltuk a @import irányelvet az oldalsáv osztályra. Alkalmazott szabályokat alkalmaztunk.
Szóval, hogy csatlakozni kell a @ import irányelvvel. Mindez a projekt méretétől függ. Minél nagyobb a projekt, annál több blokkot érdemes lebontani. Ha a projekt kicsi (névjegykártyák site egyszerű blog), akkor nem kell különösen törődni összeomlanak külön blokkokat, de ebben az esetben van szükség, hogy végezzen külön blokkot pluginek (fancyBox, ColorBox, jcarousel stb.) Már vizsgáltuk a változókat. így különváltozókban képesek lesznek azokat a dolgokat, amelyeket leggyakrabban stilizálnak ezeken a plugineken. Például a fancybox tervezői stilizálják: bezárás gomb, görgető nyilak, fényképek háttérképe. Képek ezen elemek és a méretek nagyon is lehetséges, hogy a változók, így nem kell keresni. Így növeli a munkája sebességét. Az online áruházak számára külön kosarakat készítettem a kosárhoz, katalógusba. Csak csatlakoztatom a kódot a @import irányelven keresztül. Módosítom a változókat, és minden készen áll, még akkor sem kell semmit tenni. Ha csinálsz tipikus dolgokat, és a tervezők ritkán valami új jön, ne legyen lusta, hogy azok a változók, a második alkalommal már őket lefektetett gyorsabban, és valószínűleg meg őket, és előírni a nem csak csatlakozni, módosítsa változó, és ez elég.
A @import és a css-framework-irányelvek
Az @ importról szóló irányelvről nem lehet beszélni a CSS-framework-ah-ról. A SASS: zurb alapítvány a következő keretet tartalmazza. Gumby. bourbon. és ez nem egy teljes lista. Kevesen ismerik, de letöltheti a keretrendszerek SCSS adatfájljait. Ha nem tudja letölteni az SCSS fájlokat a hivatalos webhelyekről, mindig megtalálhatja azokat a github-ban. Ezek a keretek saját komponenseikkel, mixinekkel, vezérlő struktúrákkal, konfigurációs fájlokkal rendelkeznek. A SASS használatával rugalmasabban konfigurálhatja az adatkeretet - és. Az adatkeret egyszerű összekapcsolása - és a megszokott CSS-en keresztül - nem kap ilyen rugalmasságot.
Hadd mutassam be konkrét példával. Tegyük fel, hogy kapcsolódni szeretnél a projekthez egy lapozáshoz, például zurb alapon. Mindössze annyit kell tennie, így az, hogy letölt egy változata a SASS-zurb alapot (ez lehet tölteni a hivatalos oldalon), és csatlakoztassa keresztül @import irányelv file „_pagination.scss” (5 zurb alapja rejlik alapítvány / komponensek mappa). Legtetején „_pagination.scss” fájl 20 változót, a változó őket szabhatja lapszámozás úgy, ahogy szeretné.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
$ include-pagination-classes. $ include-html-classes! default;
$ pagination-height. rem-calc (24)! alapértelmezett;
$ pagination margin. rem-calc (-5)! alapértelmezett;
$ pagination-li-float. $ default-float! alapértelmezett;
$ pagination-li-height. rem-calc (24)! alapértelmezett;
$ pagination-li-font-color. $ jet! alapértelmezett;
$ pagination-li-font-size. rem-calc (14)! alapértelmezett;
$ pagination-li-margin. rem-calc (5)! alapértelmezett;
$ pagination-link-pad. rem-calc (1 10 1)! alapértelmezett;
$ pagination-link-font-color. $ aluminum! alapértelmezett;
$ pagination-link-active-bg. skála szín ($ white, $ lightness: -10%)! default;
$ pagination-link-unavailable-cursor. alapértelmezett! default;
$ pagination-link-unavailable-font-color. $ aluminum! alapértelmezett;
$ pagination-link-unavailable-bg-active. átlátszó! alapértelmezett;
$ pagination-link-current-background. $ primary-color; alapértelmezett;
$ pagination-link-current-font-color. $ white! default;
$ pagination-link-current-font-weight. $ font-weight-bold! alapértelmezett;
$ pagination-link-current-cursor. alapértelmezett! default;
$ pagination-link-current-active-bg. $ primary-color; alapértelmezett;
A zurb alapítvány összetevőinek részletes leírása nem egy cikk témája. Meg tudom mondani, hogy a zurb alapítványban léteznek komponensek az űrlapok, gombok, pluginok, akkor csak akkor, ha egy grid, ha akarod. Nagyon kényelmes. Ahogy fent írtam, csak a CSS összekapcsolásával nem kapsz ilyen rugalmasságot, be kell másznod a kódba, és meg kell keresned, hogy mit cserélj ki. Az SCSS-fájlokban minden változóba kerül, nem kell semmit keresni.
A myxin könyvtárakat CSS3 előtagokra is használhatja. Olyan könyvtárakat használok, mint a compas és a burbon.
Azt javaslom, hogy töltsd le a keretrendszer SCSS adatfájljait, és nézd meg őket. A struktúrák tanulmányozásával sok mindent meg fogsz érteni. Idővel a SASS komponenseket saját maga írja le, amire szükség van. Kezdje a gyakran használt bővítményekkel. Itt pedig meg kell tudni mondani a @import irányelv kapcsolódását. Változók és mixin-s be kell jelenteni, mielőtt hívják őket, vagy a fordító hibát generál, ha követi ezt a szabályt, akkor idővel lesz a SCSS-keret, így semmilyen módon szükség van rá, kihegyezett, hogy megfeleljen az Ön igényeinek.