Kas yra Sassas? Sužinokite, kaip naudoti šią CSS plėtinio kalbą

Sintaksiškai nuostabūs stilių lapai (Sass) yra populiari CSS plėtinių kalba. Kalba gyvuoja maždaug 15 metų. Jis gerai veikia su kiekviena CSS versija, todėl yra suderinamas su kiekviena CSS biblioteka ir sistema, nuo Bootstrap iki Foundation.

Kalba leidžia parašyti Sass kodą ir tada jį kompiliuoti į CSS. „Sass“ naudojimo vietoje paprasto CSS vertė yra ta, kad jame yra papildomų funkcijų, kurios šiuo metu nepatenka į CSS taikymo sritį.

Šiame vadove sužinosite, kaip naudoti Sass ir svarbiausias jo funkcijas.

„Sass“ diegimas

Yra keletas būdų, kaip naudoti „Sass“ savo įrenginyje. Tai apima programos (pvz., „LiveReload“ arba „Scout-App“) paleidimą, atsisiuntimą Sass iš GitHub, arba ją įdiegti naudojant npm.

„Sass With npm“ diegimas

Norėdami įdiegti „Sass“ naudodami npm, turėsite įdiekite NodeJS ir npm savo įrenginyje. Tada turėsite sukurti a package.json failą (tai yra gera praktika diegiant bet kokį npm paketą savo projektuose). Galite sukurti pagrindinį package.json failą savo projekto kataloge naudodami šią terminalo komandą:

npm init -y

Vykdant šią komandą bus sukurtas paketas.json failas su tokiu turiniu:

{
 "name": "my_app",
 "versija": "1.0.0",
 "apibūdinimas": "",
 "main": "index.js",
 "skriptai": {
 "testas": "echo \"Klaida: nenurodytas testas\" && išeiti 1"
 },
 "raktiniai žodžiai": [],
 "autorius": "",
 "licencija": "ISC"
}

The package.json failas yra svarbus, nes jis naudojamas kaip jūsų projekto konfigūracija. Kiekvieną kartą, kai įdiegiate naują npm paketą package.json failas tai atspindės.

Dabar galite įdiegti „Sass“ į savo terminalą įterpdami šią komandą:

npm įdiegti sass

Ši komanda atnaujins package.json failą sukurdami naują priklausomybės laukas, kuriame bus naujasis Sass paketas. Tai taip pat sukurs naują package-lock.json failą ir įdiekite sass (ir priklausomybės) į a mazgų_moduliai katalogas.

Įvairūs Sass failų tipai

Sass failas gali turėti vieną iš dviejų plėtinių, .sass arba .scss. Pagrindinis skirtumas tarp jų yra tas .scss faile naudojami riestiniai skliaustai ir kabliataškiai (panašiai kaip CSS), o .sass failų struktūros CSS naudojant įtrauką (panašiai kaip Python). Kai kurie kūrėjai nori naudoti .scss failą, nes jo struktūra yra artimesnė CSS.

.scss failo pavyzdys

$pagrindinė spalva: mėlyna;
kūnas {
 spalva: $pirminė spalva;
 p {
 spalva: raudona;
 }
}

.sass failo pavyzdys

$pagrindinė spalva: mėlyna
kūnas
 spalva: $pagrindinė spalva
 p
 spalva: raudona

Sass failo kompiliavimas į CSS

Galite sudaryti atskirą Sass failą naudodami sass komandinės eilutės programa:

sass failas.scss > failas.css

Taip pat galite paleisti sass visuose failuose konkrečiame kataloge:

sass scss: dist/css/

Ši komanda sukompiliuoja visus Sass failus scss kataloge ir išsaugo gautus failus dist/css.

Jei naudojate npm, galite nustatyti patogų sass kompiliavimo spartųjį klavišą naudodami scenarijus lauke tavo package.json failas:

"skriptai": {
 "testas": "echo \"Klaida: nenurodytas testas\" && išeiti iš 1",
 "sass": "sass - žiūrėti scss: dist/css/"
 },

Ši konfigūracija naudoja -- žiūrėti variantas. Jis nuolat veikia ir užtikrina, kad tie failai būtų iš naujo sukompiliuoti, kai tik jie pasikeičia. Kiekvienam failui sass generuos a .css ir a .css.map failą.

Norėdami vykdyti aukščiau pateiktą Sass scenarijų, savo terminale turėsite vykdyti šią komandą:

npm paleisti sass

Vykdant šią komandą bus sukurta panaši išvestis:

> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app
> sass -- žiūrėti scss: dist/css/
Sukompiliuotas scss\main.scss į dist\css\main.css.
Sassas laukia pokyčių. Norėdami sustabdyti, paspauskite Ctrl-C.

Sass kintamieji

Šiandien galite kurti kintamuosius CSS, tačiau prieš 15 metų CSS kintamieji neegzistavo, todėl Sass palaikymas jiems buvo vertingas. Sass kintamieji veikia taip pat, kaip ir CSS kintamieji. Juose saugomos reikšmės (pvz., spalvos), kurias ketinate naudoti visame CSS faile. Vienas iš pagrindinių kintamųjų pranašumų yra tai, kad jie leidžia atnaujinti daugybę reikšmės atvejų pakeičiant ją vienoje vietoje.

Kiekvienas Sass kintamasis prasideda dolerio ženklu, po kurio eina bet koks simbolių derinys. Stenkitės, kad kintamieji būtų aprašomieji, pvz., $pagrindinė spalva pavyzdys aukščiau. Svarbu pažymėti, kad Sass kintamasis nėra kompiliuojamas į CSS kintamuosius. Pavyzdžiui, šis .scss failas:

$pagrindinė spalva: mėlyna;
kūnas {
 spalva: $pirminė spalva;
}

Bus kompiliuojamas į šį CSS:

kūnas {
 spalva: mėlyna;
}

Kaip matote iš aukščiau esančio failo, CSS kintamųjų nėra. Kintamųjų pranašumas yra tas, kad bet koks Sass failo pakeitimas atnaujins atitinkamą CSS failą.

Sass Mixins

Jei turite vieną nuosavybę, kurią norite naudoti kelis kartus per savo projektą, kintamasis yra puikus. Bet jei turite savybių grupę, kurią norite naudoti kaip vienetą, „mixin“ padės.

Kiekvienas maišymas prasideda nuo @mixin raktinį žodį, po kurio nurodomas pavadinimas, kurį norite priskirti mišiniui. Jūs turite galimybę perduoti kintamuosius mixin kaip parametrus ir naudoti tuos kintamuosius mixin turinyje, panašiai kaip funkciją.

Naudojant Mixin

@mixin light-theme ($pagrindinė spalva: balta, $antrinė spalva: #2c2c2c) {
 šriftų šeima: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 fono spalva: $pagrindinė spalva;
 spalva: $antrinė spalva;
}
#namai {
 @įtraukti šviesią temą (mėlyna);
}

Pirmas dalykas, kurį galite pastebėti aukščiau esančiame kode, yra tai, kad mixin priima du argumentus. Galite priskirti numatytąsias reikšmes argumentams ir nepaisyti jų įtraukę.

Sukūrę mišinį, galėsite jį naudoti bet kurioje savo svetainės skiltyje naudodami @įtraukti raktinis žodis, po kurio nurodomas mišinio pavadinimas.

Sudarius aukščiau pateiktą Sass kodą, paskirties faile bus sugeneruotas šis CSS kodas:

#namai {
 šriftų šeima: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 fono spalva: mėlyna;
 spalva: #2c2c2c;
}

Sass funkcijos

Be skirtingų raktinių žodžių, pagrindinis funkcijos ir mišinio skirtumas yra tas, kad funkcija turi kažką grąžinti. Naudodami Sass funkcijas galite apskaičiuoti reikšmes arba atlikti operacijas.

@function add-numbers($num-one, $num-two){
 $ suma: 0;
 $suma: $num-one + $num-du;
 @return $ suma 
}

Ši aukščiau pateikta funkcija priima du skaičius ir grąžina jų sumą. „Sass“ funkcijose netgi gali būti if teiginių, kilpų ir kitų valdymo srauto teiginių.

Sass moduliai

Jei į tą patį failą turėtumėte įtraukti visus kintamuosius, derinius ir funkcijas, kurdami dideles programas turėtumėte didžiulį Sass failą. Moduliai suteikia galimybę padalyti didelius failus į mažesnius, kurie kompiliavimo metu sujungiami. Pavyzdžiui, galite turėti funkcinį modulį ir maišymo modulį, viskas, ką jums reikia atsiminti, yra @naudoti raktažodį.

Štai pavyzdys, rodantis, kaip galite atskirti ankstesnį maišymą į atskirą failą:

Failas mixins.scss

@mixin light-theme ($pagrindinė spalva: balta, $antrinė spalva: #2c2c2c) {
 šriftų šeima: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 fono spalva: $pagrindinė spalva;
 spalva: $antrinė spalva;
}

Pagrindinis.scss failas

@naudokite „mišinius“;
#namai{
 @include mixins.light-theme;
}

Norėdami importuoti ir naudoti išorinį failą kaip modulį, turėsite naudoti @naudoti raktinį žodį, kad jį importuotumėte. Tada, norėdami naudoti konkretų mišinį iš importuoto failo, prieš konkretų rinkinio pavadinimą sudėkite failo pavadinimą ir tašką. Kompiliuojant aukščiau pateiktus failus, bus sugeneruotas šis CSS kodas:

#namai {
 šriftų šeima: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 fono spalva: balta;
 spalva: #2c2c2c;
}

Naudokite Sass, kad išplėstumėte ir tvarkytumėte savo CSS

Sass yra CSS sintaksės plėtinys. Tai leidžia supaprastinti stiliaus lapus ir efektyviau juos valdyti. Tačiau norėdami sukurti efektyvų dizainą, vis tiek turėsite išmanyti CSS ir interneto dizaino principus.

Šiame straipsnyje mokoma, kaip įdiegti ir naudoti „Sass“. Sužinojote, kaip kurti Sass kintamuosius, derinius, funkcijas ir modulius. Dabar jums belieka sukurti HTML dokumentą ir stebėti, kaip jūsų Sass kodas atgyja.

8 pagrindiniai CSS patarimai ir gudrybės, kuriuos turėtų žinoti kiekvienas kūrėjas

Skaitykite toliau

Apie autorių