Þar sem CSS hefur ekki föll og flóknari aðgerðir er búið að útbúa ýmis tól sem hjálpa okkur við að skrifa skipulegra CSS með leiðum til að draga úr endurtekningum, t.d.:
- Breytur, getum skilgreint fyrir liti, stærðir o.fl. Þessar breytur eru öðruvísi en CSS breytur þar sem þær eru ekki dýnamískar og nýta ekki cascade.
- mixins, leiðir til að endurýta reglublokkir, virka svipað og föll.
- nesting, skrifum reglublokkir innan reglublokka og nýtum selector að ofan.
Dæmi um mál sem útfæra þetta eru:
- LESS, It's CSS, with just a little more.
- Stylus, Expressive, dynamic, robust css.
- Sass, Syntactically Awesome Style Sheets.
Flest af þessum tólum virka sem superset af CSS, sem þýðir að „venjulegt“ CSS virkar en ef við bætum við það virkni úr málinu bæta þau við virkni. Við þurfum að sækja okkur þýðanda fyrir málið sem þá þýðir fyrir okkur úr því í „venjulegt“ CSS.
23.1 Sass
Sass er töluvert mikið notað og hefur þýðendur í mörgum umhverfum.
Eldri útgáfa af málinu notaði .sass endingu á skjölum
en nýrri („sassy CSS“) notar .scss.
Sass útfærir breytur með $ fyrir framan eigindi og
leyfir okkur að nota á öðrum stöðum með virkjum
og hjálparföllum:
@use "sass:math";
|
|
// svona komment virka
|
|
$blue: #3bbfce;
|
|
$margin: 16px;
|
|
.box {
|
|
margin: math.div($margin / 2);
|
|
background-color: $blue * 2; // líka fyrir liti!
|
|
} |
sem er þýtt yfir í:
.box {
|
|
margin: 8px;
|
|
background-color: #76ffff;
|
|
} |
Við getum líka notað mixin og hreiðraðar reglur sem geta nýst okkur t.d. ef við erum að skrifa BEM:
@mixin rounded($color: transparent) {
|
|
border: 1px solid $color;
|
|
border-radius: 5px;
|
|
} |
|
.box {
|
|
&__header { |
|
@include rounded;
|
|
} |
|
&__content { |
|
@include rounded(#000);
|
|
} |
|
} |
sem er þýtt yfir í:
.box__header {
|
|
border: 1px solid transparent;
|
|
border-radius: 5px;
|
|
} |
|
.box__content {
|
|
border: 1px solid #000;
|
|
border-radius: 5px;
|
|
} |
Media queries geta verið settar undir selector sem getur hjálpað töluvert við að hópa saman hvernig hlutur hegðar sér í mismunandi upplausnum:
.box {
|
|
width: 100%;
|
|
@media (min-width: 800px) {
|
|
width: 50%;
|
|
} |
|
} |
Við getum nýtt okkur mixins og hreiðrun til að einfalda grid virkni og gera læsilegri:
$gutter: 20px;
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -($gutter / 2);
|
|
margin-left: -($gutter / 2);
|
|
} |
|
// mixin sem reiknar nákvæmar prósentur útfrá dálkum
|
|
@mixin columns($col: 1) {
|
|
// margföldum með "1%" til að breyta gildi í prósentu gildi
|
|
width: ($col / 12 * 100) * 1%;
|
|
} |
|
.col {
|
|
padding-right: $gutter / 2;
|
|
padding-left: $gutter / 2;
|
|
&-12 {
|
|
@include columns(12);
|
|
} |
|
&-sm { |
|
// viljum að col-sm-* sé notað alveg upp að 800px, ekki í 800px samt
|
|
@media (max-width: 799px) {
|
|
&-12 {
|
|
@include columns(12);
|
|
} |
|
} |
|
} |
|
// o.s.fr...
|
|
} |
|
// eða...
|
|
.my-box {
|
|
@include columns(12);
|
|
@media (min-width: 800px) {
|
|
.my-box {
|
|
@include columns(4);
|
|
} |
|
} |
Með Sass og @import at-regluna til þess að skipuleggja
skránar okkar betur, í grunn skránni okkar (t.d.
styles.scss) setjum við almennar skilgreiningar og
sækjum síðar aðrar skrár. Þannig getum við ennfrekar skipulagt CSS
virknina okkar og komið í veg fyrir stórar, flóknar skrár:
// Almennar breytur
|
|
$max-width: 1200px;
|
|
$gutter: 20px;
|
|
main {
|
|
max-width: $max-width;
|
|
margin: 0 auto;
|
|
} |
|
// Sækjum skjöl sem skilgreina almenna virkni, t.d. grid
|
|
@import "scss/grid";
|
|
// ...
|
|
// Sækjum skjöl fyrir hvern „hlut“
|
|
@import "scss/header";
|
|
@import "scss/button";
|
|
@import "scss/nav";
|
|
// ...
|
Að skipta skjölum upp á þennan máta, samnýta almenna virkni gegnum mixin, velja eða skilgreina viðmiðunarreglur og nota öguð vinnubrögð hjálpar mikið í stærri CSS verkefnum.
Hægt er lesa nánar um virkni sem Sass bíður upp á í skjölun og prófa sig áfram með Sassmeister sem þýðir Sass í vafra.
Þá er næsta spurning, hvernig getum við notað svona tól í okkar verkefnum?