< Sass

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 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.

Szintaxis	Kiterjesztés
behúzott szintaxis	.sass
SCSS (Sassy CSS) szintaxis	.scss

Telepítés

npm install -g sass

Ellenőrzés:

sass --version

Első Sass fájl

Kiterjesztés: .scss

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

Fordítás

Fordítás:

sass app.scss app.css

Figyelés

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

Gyakorlat

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”.

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