5.10 SCSS - SASS - szintaktikája

A SASS a 2000-es évek második felében elindult kezdeményezés, amelynek célja az volt, hogy az elburjánzó CSS bejegyzéseket átláthatóbban és újrafelhasználhatóan lehessen írni.

A SASS-ban írt kódot egy CSS előfeldolgozó (CSS preprocesszor) fordítja le szabványos CSS fájlokká, amelyek aztán használhatók a weboldalakon.

A SASS-nak két szintaktikája van,

  • Az első, a régebbi szintaktika elhagyta a CSS-ben megszokott {} jeleket és behúzásokkal operált. Az így készült fájlok csak a fordítás után használhatók és valójában nem kompatibilisek a CSS fájlokkal
  • A második szintaktika (SCSS) meghagyta a CSS szintaktikát, vagyis egy CSS fájl kiterjesztését átnevezve érvényes SCSS fájlt kapunk.

SCSS használatának előnyei

Változók használata

$designszin: #F06D06;

.main-header{
  color: $designszin;
}

.main-footer{
  background-color: $designszin;
}

​Segítségével az SCSS fájlban egy helyen - általában a stíluslapok elején - definiálunk néhány tipikus, sok helyen használandó értéket és utána, mint változót használjuk a weblapokon. Ennek segítségével szinte biztosan nem lesznek az azonos árnyalatú színe, formák, méretek egy kicsit különbözőek és a weblap kinézete egységesebbé tud válni..

Beágyazás - átláthatóbb kód

A beágyazási tulajdonság segítségével átláthatóbb kódot tudunk készíteni. Az alábbi scss kódrészlet a később bemutatott CSS kódot készíti elő.

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

CSS szintaktika szerint ezt kapjuk

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Mixinek használata

​A mixineket felfoghatjuk függvényekként is. A mixin egy névvel rendelkezik és paramétert vár az SCSS kódban. A kód több helyén is felhasználható és az eredmény CSS fájlba a hívási helyeken bekerül a kódnak megfelelő CSS tartalom.

Az alábbi SCSS mixinnek megfelel a később bemutatott CSS kód. A mixin segítségével a H1 és H2 tageket árnyékolva jeleníthetjük meg. A kódban használt darken() kifejezés is egy mixin, amivel az eredeti színhez képest megadott arányú sötétebb színt lehet előállítani.

@mixin threedeetext($color) {
  color: $color;
  text-shadow:
    0 2px 0 darken($color, 14%),
    0 4px 0 darken($color, 16%),
    0 6px 0 darken($color, 18%),
    0 8px 0 darken($color, 20%),
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}
h1 {
  font-size: 120px;
  @include threedeetext(#d4daa8);
}
h2 {
  font-size: 90px;
  @include threedeetext(lighten(#d4daa8, 10%));
}

Ez a CSS kód jön létre:

h1 {
  font-size: 120px;
  color: #d4daa8;
  text-shadow: 0 2px 0 #bbc576, 0 4px 0 #b8c26f, 0 6px 0 #b4bf68, 0 8px 0 #b1bc60, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}
h2 {
  font-size: 90px;
  color: #e6e9cc;
  text-shadow: 0 2px 0 #cdd49a, 0 4px 0 #c9d193, 0 6px 0 #c6ce8b, 0 8px 0 #c2cb84, 3px 8px 15px rgba(0, 0, 0, 0.1), 3px 8px 5px rgba(0, 0, 0, 0.3);
}

Néhány jól használható mixin színek keverésére

  • saturate($color, @amount) - szaturációt állít
  • desaturate($color, @amount) - A szaturációt csökkenti
  • lighten($color, @amount) - világosítja a színt darken($color, @amount) - sötétíti a színt
  • fadein($color, @amount) -
  • fadeout($colorr, @amount) -
  • fade(@color, @amount) - elhomályosít / kivilágosít
  • spin($color, @amount) -
  • mix($color, @color2, @weight) - Két színt keverünk össze
  • grayscale($color) - Szürke változatot állít elő
  • inverse($color) - A szín inverzét állítja elő
  • complement($color) - a szín komplementerét állítja elő
  • opacity($color, $amount) - A szín átlátszóságát állítja
  • contrast($color) - Növeli a szín kontrasztját

További Compass mixinek itt találhatók: http://compass-style.org/index/mixins/

Elágazások, ciklusok használata

Az alábbi SCSS kód attól függően, hogy a $textcolornak milyen a világossága a háttérszínnek változó értékeket állít be. A lightness() itt is egy mixin.

$textColor: silver;
p {
  color: $textColor;
  @if lightness($textColor) < 50% {
    background-color: white;
  } @else {
    background-color: black;
  }
}

Ez lesz a CSS megfelelője.

p {
  color: silver;
  background-color: black;
}

Jelölők használata

#{változó} - szintaktika arra szolgál, hogy a változó helyére behelyettesített érték vjelenjen meg a jelölő helyén a CSS fájban. A  következő példákban mutatok ilyen.

Ciklusok

A ciklusokat akkor tudjuk jól használni, ha a CSS kódban hasonló definíciókat kell többet létrehozni programozottan.

FOR ciklus

//SCSS kód
@for $i from 1 through 4 {
  .column-#{$i} { width: 10px * $i; }
}

//Legenerált CSS kód
.column-1 {
  width: 10px;
}
.column-2 {
  width: 20px;
}
.column-3 {
  width: 30px;
}
.column-4 {
  width: 40px;
}

EACH ciklus

 A más nyelveken ismert foreach ciklus megvalósítása. Segítségével listák elemein tudunk végigmenni. ebben a pldában különböző fotókhoz rendelhetünk háttérképeket.

$list: jack john peter;
.photos {
  @each $author in $list {
    .photo-#{$author} {
      background-image: image-url("avatars/#{$author}.png");
    }
  }
}

//A létrejött CSS kód
.photos .photo-jack {
  background-image: url('/images/avatars/jack.png');
}
.photos .photo-john {
  background-image: url('/images/avatars/john.png');
}
.photos .photo-peter {
  background-image: url('/images/avatars/peter.png');
}

While ciklus

A jól ismert és sokszor használt while ciklus. Ebben a példában kissé a FOR ciklushoz hasonló használatot mutatok be:

//SCSS kód
$column: 4;
@while $column > \0 {
  .cols-#{$column} {
    width: 10px * $column;
  }
  $column: $column - 1;
}

//CSS eredmény
.cols-4 {
  width: 40px;
}
.cols-3 {
  width: 30px;
}
.cols-2 {
  width: 20px;
}
.cols-1 {
  width: 10px;
}

Az SCSS nyelvről itt lehet olvasni bővebben: https://sass-lang.com/documentation