Mi az a Sass? Ismerje meg a CSS-kiterjesztés nyelvének használatát

A szintaktikailag félelmetes stíluslapok (Sass) egy népszerű CSS-kiterjesztési nyelv. A nyelv körülbelül 15 éve létezik. Jól működik a CSS minden verziójával, így kompatibilis minden CSS-könyvtárral és keretrendszerrel, a Bootstraptől a Foundationig.

A nyelv lehetővé teszi, hogy Sass kódot írjon, majd fordítsa le a kódot CSS-be. A Sass használatának az egyszerű CSS helyett az az értéke, hogy további szolgáltatásokat biztosít, amelyek jelenleg kívül esnek a CSS hatókörén.

Ebből az oktatóanyagból megtudhatja, hogyan kell használni a Sass-t és annak legfontosabb funkcióit.

A Sass telepítése

Számos módja van a Sass használatának az eszközön. Ide tartozik egy alkalmazás futtatása (például a LiveReload vagy a Scout-App), a letöltés Sass a GitHubból, vagy telepítse npm használatával.

A Sass with npm telepítése

A Sass npm használatával történő telepítéséhez szüksége lesz telepítse a NodeJS-t és az npm-et a készülékén. Ezután létre kell hoznia a package.json fájlt (ami jó gyakorlat, ha bármely npm csomagot telepít a projektekben). Létrehozhat egy alaplapot

package.json fájlt a projekt könyvtárában a következő terminál paranccsal:

npm init -y

A parancs végrehajtása egy package.json fájlt generál a következő tartalommal:

{
 "name": "my_app",
 "verzió": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "teszt": "echo \"Hiba: nincs megadva teszt\" && kilépés 1"
 },
 "kulcsszavak": [],
 "szerző": "",
 "licenc": "ISC"
}

Az package.json fájl fontos, mert konfigurációként szolgál a projekthez. Minden alkalommal, amikor új npm csomagot telepít a package.json fájl ezt fogja tükrözni.

Most telepítheti a Sass-t a következő parancs beszúrásával a terminálba:

npm install sass

Ez a parancs frissíti a package.json fájl létrehozásával függőségi mező, amely az új Sass csomagot tartalmazza majd. Ez is generál egy újat package-lock.json fájlba, és telepítse a sass-t (plusz függőségek) a node_modules Könyvtár.

A Sass fájl különböző típusai

A Sass fájlnak két kiterjesztése lehet, .sass vagy .scss. A fő különbség köztük az, hogy a .scss fájl kapcsos zárójeleket és pontosvesszőket használ (hasonlóan a CSS-hez), míg a .sass behúzással szerkeszti a CSS-t (hasonlóan a Pythonhoz). Egyes fejlesztők szívesebben használják a .scss fájlt, mivel a szerkezete közelebb áll a CSS-hez.

Példa egy .scss fájlra

$elsődleges szín: kék;
body {
 szín: $elsődleges szín;
 p {
 piros szín;
 }
}

Példa egy .sass fájlra

$elsődleges szín: kék
test
 szín: $elsődleges szín
 p
 piros szín

Sass fájl fordítása CSS-be

Egyedi Sass-fájlt állíthat össze a sass parancssori program:

sass fájl.scss > fájl.css

A sass-t egy adott könyvtárban lévő összes fájlon is futtathatja:

sass scss: dist/css/

Ez a parancs lefordítja az összes Sass fájlt a scss könyvtárba, és eltárolja az eredményül kapott fájlokat dist/css.

Ha npm-et használ, beállíthat egy kényelmes parancsikont a sass fordításhoz a forgatókönyvek mezőben package.json fájl:

"scripts": {
 "test": "echo \"Hiba: nincs teszt megadva\" && kilépés 1",
 "sass": "sass --watch scss: dist/css/"
 },

Ez a konfiguráció a --néz választási lehetőség. Folyamatosan futja a sass-t, és biztosítja, hogy újrafordítsa ezeket a fájlokat, amikor megváltoznak. A sass minden egyes fájlhoz létrehoz egy .css és a .css.map fájlt.

A fenti Sass szkript végrehajtásához a következő parancsot kell végrehajtania a terminálon:

npm run sass

A parancs futtatása a következőhöz hasonló kimenetet generál:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Az scss\main.scss lefordítva a dist\css\main.css fájlba.
Sass figyeli a változásokat. Nyomja le a Ctrl-C billentyűket a leállításhoz.

Sass változók

Ma már lehet CSS-ben változókat létrehozni, de 15 évvel ezelőtt még nem léteztek CSS-változók, így a Sass támogatása értékes volt. A Sass-változók nagyjából ugyanúgy működnek, mint a CSS-változók. Olyan értékeket (például színeket) tárolnak, amelyeket a CSS-fájlban használni kíván. A változók egyik fő előnye, hogy lehetővé teszik egy érték számos előfordulásának frissítését egyetlen helyen történő módosítással.

Minden Sass változó a dollárjellel kezdődik, amelyet a karakterek tetszőleges kombinációja követ. Próbálja meg a változóit leíró jellegűvé tenni, például a $elsődleges szín példa fent. Fontos megjegyezni, hogy a Sass-változók nem fordulnak CSS-változókká. Például ez az .scss fájl:

$elsődleges szín: kék;
body {
 szín: $elsődleges szín;
}

A következő CSS-re lesz fordítva:

body {
 szín: kék;
}

Amint a fenti fájlból látható, nincsenek CSS-változók. A változók előnye, hogy a Sass fájlon végrehajtott bármilyen módosítás frissíti a megfelelő CSS fájlt.

Sass Mixins

Ha van egy tulajdonsága, amelyet többször szeretne használni a projekt során, akkor egy változó nagyszerű. De ha van egy csoport tulajdonsága, amelyet egységként szeretne használni, egy mixin megteszi a trükköt.

Minden keverés a @mixin kulcsszó, majd a mixinhez rendelni kívánt név. Lehetősége van arra, hogy paraméterként változókat adjon át a mixinnek, és ezeket a változókat a mixin törzsén belül használja, nagyjából ugyanúgy, mint függvényként.

Mixin használata

@mixin light-theme($elsődleges szín: fehér, $másodlagos szín: #2c2c2c) {
 font-család: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 háttérszín: $elsődleges szín;
 szín: $másodlagos szín;
}
#itthon {
 @include light-theme (kék);
}

Az első dolog, amit a fenti kódban észrevehet, az az, hogy a mixin két argumentumot fogad el. Alapértelmezett értékeket rendelhet az argumentumokhoz, és felülírhatja azokat, amikor felveszi őket.

Miután elkészítette a mixint, a webhelye bármely részében használhatja a @beleértve kulcsszó után a mixin neve.

A fenti Sass kód lefordítása a következő CSS-kódot generálja a célfájlban:

#itthon {
 font-család: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 háttérszín: kék;
 szín: #2c2c2c;
}

Sass Functions

A különböző kulcsszavakon kívül a fő különbség a függvény és a mixin között az, hogy a függvénynek vissza kell adnia valamit. A Sass függvények segítségével értékeket számíthat ki vagy műveleteket hajthat végre.

@function add-numbers($num-one, $num-two){
 $összeg: 0;
 $összeg: $szám-egy + $szám-kettő;
 @return $összeg 
}

Ez a fenti függvény két számot fogad el, és ezek összegét adja vissza. A Sass függvények akár if utasításokat, for ciklusokat és egyéb vezérlőfolyamat-utasításokat is tartalmazhatnak.

Sass modulok

Ha az összes változót, keverőt és függvényt ugyanabba a fájlba kellene belefoglalnia, akkor hatalmas Sass-fájlt kapna nagy alkalmazások létrehozásakor. A modulok lehetőséget biztosítanak a nagy fájlok kisebbekre való felosztására, amelyeket a fordítás során összevonnak. Például rendelkezhet egy funkciómodullal és egy mixin modullal, csak emlékezni kell a @használat kulcsszó.

Íme egy példa, amely bemutatja, hogyan választhatja szét az előző mixint saját fájlba:

A mixins.scss fájl

@mixin light-theme($elsődleges szín: fehér, $másodlagos szín: #2c2c2c) {
 font-család: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 háttérszín: $elsődleges szín;
 szín: $másodlagos szín;
}

A main.scss fájl

@use 'mixins';
#itthon{
 @include mixins.light-theme;
}

Külső fájl importálásához és modulként való használatához a @használat kulcsszót az importáláshoz. Ezután egy adott mixin használatához az importált fájlból írja be az adott mixin nevét a fájlnév elé, amelyet egy pont követ. A fenti fájlok összeállítása a következő CSS-kódot generálja:

#itthon {
 font-család: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 háttérszín: fehér;
 szín: #2c2c2c;
}

A Sass használatával bővítheti és rendszerezheti CSS-jét

A Sass a CSS szintaxisának kiterjesztése. Lehetővé teszi a stíluslapok egyszerűsítését és hatékonyabb kezelését. A hatékony tervek létrehozásához azonban továbbra is ismernie kell a CSS-t és a webdesign elveit.

Ez a cikk a Sass telepítését és használatát ismerteti. Megtanulta, hogyan hozhat létre Sass-változókat, mixineket, függvényeket és modulokat. Most már nem kell mást tennie, mint létrehozni egy HTML-dokumentumot, és figyelni, ahogy Sass-kódja életre kel.

8 alapvető CSS-tipp és trükk, amelyet minden fejlesztőnek tudnia kell

Olvassa el a következőt

A szerzőről