Sass kezdés

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A Sass a Syntactically Awesome Stylesheets rövidítése, ami egy stíluskészítő script nyelv és fordító, vagy másként mondva CSS előfeldolgozó.

A CSS előfeldolgozó CSS kódot fordít saját nyelvből.

Nagy méretű, vagy közepes webes projektekhez hasznos lehet.

A Sass webhelye:

• https://sass-lang.com/

Egyéb CSS előfeldolgozó:

• LESS
• Stylus

A Sass két szintaxissal dolgozik:

• behúzott szintaxis
• SCSS (Sassy CSS) szintaxis

A behúzott szintaxis esetén a tagolást behúzásokkal végezzük. Az SCSS használata esetén {} kapcsos-zárójeleket használunk ; pontosvesszős sorzárással.

npm install -g sass

Ellenőrzés:

sass --version

Kiterjesztés: .scss

app.scss

$primary-color: #333;
$background: skyblue;
 
body {
    color: $primary-color;
    background-color: $primary-color;
}

Fordítás:

sass app.scss app.css

sass --watch app.scss app.css

Az app.scss fájl mentésekor automatikusan megtörténik a fordítás.

sass --watch app/sass:public/stylesheets

Bővítmény:

• Live Sass Compiler

• Készítsünk egy dobozt, amiben egy „Valami” szó szerepel.
• Használjunk változókat a megadott értékekhez.
  • A doboz háttérszíne legyen királykék.
  • A szöveg színe a dobozban legyen fehér.
  • A dobozon belül legyen 15px-s belső margó.
  • A dobozban legyen a fontcsalád „sans-serif”.

style.scss

$bgcolor: navy;
$textcolor: white;
$textpadding: 15px;
$fontstack: sans-serif;
 
.doboz {
    background-color: $bgcolor;
    color: $textcolor;
    padding: $textpadding;
    font-family: $fontstack;
}