Stíluslap fejlesztés Sass, még akkor is, amikor használja a legtöbb alapvető funkciók, mint fészkelő tulajdonságok vagy változók, értékes időt takarít meg, valamint megkönnyíti a front-end fejlesztő. Nem meglepő, hogy a CSS előprocesszorokat széles körben elfogadták, mint a webhelyek és alkalmazások stílusainak de facto létrehozásának módját;egyszerűen nem tudunk élni nélkülük.,
Amikor a díszítésnek; ez, változik a megjelenés a honlapon, miközben a szöveg elrendezését, Sass’ funkciók—mint mixins vagy funkciók—érzem magam, mint repülővel séta helyett! Ebben az SCSS bemutató, fogunk létrehozni egy minimális témát, majd használja SCSS, hogy a CSS programozás néhány szuperhatalmak.
A Basic Mixin Approach
tegyük fel, hogy a következő elrendezéssel rendelkezünk:
Több téma létrehozására kértük., A témának meg kell változtatnia az összes konténer színét (beleértve a fő tartályt is) és a gombot, és a témát a test egy osztálya határozza meg, vagy lehet egy “külső” tartály is:
<body class="theme-1">építsünk egy “themable” nevű mixint, amely paraméterként tartalmazza a színsémánkat.,
ezután használja a témák generálásához:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49);@include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);Ezen a ponton már sok időt mentettünk, de vannak problémák ezzel a megközelítéssel:
témák általában sok különböző tulajdonságokkal mellett színek. Például, ha módosítani akarjuk a Bootstrap témát, az előző “recept” után egy mixin írása nehéz lenne fenntartani, a kódot pedig nehéz olvasni. Ráadásul nem igazán követjük a Sass legjobb gyakorlatait—például a hex színkódok beírása közvetlenül a mixinbe.,
Tervezési Stílusok Rendszer Sass Térképek
a segítségével térképek, amelyek főként, mint kulcs indexelt tömbök tudjuk építeni több szemantikai, értelmes beállított stílusok a téma, ami lesz könnyebb fenntartani megérteni kollégánk a fejlesztők. Használhatnánk listákat is, de személy szerint a térképeket alkalmasabbnak találom erre a célra. A listáknak nincs kulcsuk, míg a kulcsok önmagukban magyarázhatók.,
A térkép az új megközelítés egy beágyazott térkép:
Ha akarta, hogy a hozzáférést minden szakaszban, a rendszer theme-1 meg az al-térképet, használjuk a @each irányelv ismétlésére őket:
@each $section, $map in $theme-1$section vissza fog térni a gombot az aktuális szakasz, valamint $map vissza fog térni a beágyazott térkép, amely megfelel az a kulcs.,
Akkor tudjuk elérni, hogy a tulajdonságok minden térkép, mondjuk, a háttérben (bg) tulajdonság segítségével a map-get beosztása:
map-get($map, bg)Végre, amely egyesíti az új keverednek alapján a térkép szerkezete, tudjuk létre, mint sok témák, mint mi:
Megjegyezzük, hogy mi is használjuk a @if irányelv különbséget tenni tulajdonságait szakaszok, amelyek nem a gombokat.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }így egyes szakaszokhoz különböző tulajdonságokat adhatunk konkrét Tulajdonságok vagy akár szabályok létrehozásához, vagy megkülönböztethetünk egy kulcsot egyetlen értékkel a másiktól egy beágyazott térképpel.
témánk számos olyan térképből is állhat, amelyeket több Mixin használt, stíluslapunk különböző részein alkalmazva. Minden attól függ, hogy a komplexitás a bázis elrendezés, természetesen a személyes megközelítés.,
további optimalizálás
a Sass hasznos beépített funkciókat kínál, hogy még több munkát takarítson meg nekünk; például a HSL olyan funkciók, mint a lighten vagy darken például egy gomb színének kiszámításához, amikor lebeg rajta.
módosíthatjuk a gombkódot, hogy megvilágítsuk annak hátterét, amikor lebeg, függetlenül az eredeti háttérszíntől. Így nem kell újabb színt hozzáadnunk ehhez az állapothoz.,
@if ($section != button) { height: map-get($map, height); width: map-get($map, width);} @else { &:hover { background-color: lighten(map-get($map, bg), 20%); }}továbbá a Sass modulok használatával kódunk még olvashatóbb és skálázható; minden tématérkép egy modulban található, majd importálható a fő stíluslapunkba.
@import 'theme-1';@import 'theme-2';@import 'theme-3';… … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container {… … ehhez a modulokat a következő módon kell elhelyezni a projektben:
/├── _theme-1.scss├── _theme-2.scss└── _theme-2.scss
Ha többet szeretne megtudni a Sass használatáról a CSS szárításához, Justin Brazeau és Sass rajongó kollégája ezt a ragyogó cikkében tárgyalja Sass Mixins: tartsa meg stíluslapjait száraz.