A Sass a szokásos programozási funkciókat hozza a CSS-be

A CSS fejlesztésével a fájlok és az elemek kezelhetősége problémát jelent. Például hoz létre egy nagy stíluslapot, vagy bontja azt kisebb fájlokba, amely kérdéseket vet fel a könyvtárstruktúráról és így tovább? Szintaktikailag félelmetes stíluslapok (Sass) sok minden másnal egyszerűsíti a fájl (erőforrás?) Kezelését.

Sass ismerősnek tűnik

A Sass-ot Hampton Catlin készítette, aki szintén hozott nekünk Hamlt HTML fejlesztéshez. A Ruby fejlesztői jól ismerik a Sass-ot, mivel ez a Ruby on Rails általános szolgáltatása. A Sass ugyanazt a feltételezést használja, mint a TypeScript, a LESS és még a CoffeeScript a JavaScript fejlesztők számára.

A Sass használatakor a CSS-t Sass-formátumú fájlként fejleszti ki. A Sass előfeldolgozó vagy fordító elfogadja a Sass formázott kódot, és létrehozza a szabványos CSS-t.

Amit Sass hoz az asztalra

A Sass-nak túl sok szolgáltatása van ahhoz, hogy felsorolja ezt a cikket, ezért vessünk egy pillantást a lenyűgözőbb funkciókra, amelyeket a CSS fejlesztése hoz.

fészekrakó

A CSS egyik unalmas eleme az, hogy ugyanazt a szelektort használja újra és újra, amikor a gyermekválasztókkal dolgozik. A Sass lehetővé teszi a gyermekválasztók beágyazását a megosztott szülőn. A következő kódrészlet ezt a funkciót szemlélteti, ha a rendezetlen listán belüli listaelemekhez választóelemeket határoz meg, mindegyiket egy választókon belül.

 #navbar ul {margin-left: 20px; jobb margó: 20 képpont; szín: #FFF; .li {háttér szín: #CCC; }} 

változók

Ez a szolgáltatás egy szabványos programozási funkciót hoz a CSS-hez - lehetővé teszi olyan értékek meghatározását, amelyeket újra lehet használni a stíluslapon. A változót ugyanúgy deklarálja, mint egy tulajdonságot, kivéve a dollárjelet ($) a változónevekhez. A matematikai műveletek a változókra is alkalmazhatók. Ezenkívül a változókat a tulajdonságnevekben és a választókban is használhatjuk a következő, {{$ változó neve} formátum használatával (Sass ezt az interpolációt hívja). A Sass hat alapvető adattípust támogat: számok, szöveges karakterek, színek, logikai, null és listák (szóközökkel vagy vesszővel elválasztott értékek).

 $ standardColor: # C0C0C0; .h1 {háttér szín: $ standardColor; } 

mixinek

Ez a szolgáltatás megkönnyíti a stílusok vagy a választók újbóli használatát - javított változónak tekintheti azt. Alapvetően meghatároz egy CSS-t, és nevet rendel hozzá a @mixin irányelvhez. A mixin az egész kódban újra felhasználható a @include irányelv segítségével. A keverékek ereje itt nem áll meg, mivel lehetővé teszi a paraméterek használatát is; ezek lehetővé teszik a változók (paraméterek) felhasználását a mixin által definiált blokkon belül.

Ragaszkodtam az agyamhoz, hogy jöjjön ki egy példa, de úgy döntöttem, hogy a Sass webhely nagyszerű példáját használok, amely néhány keveréket határoz meg, amelyeket az adatválasztóhoz használnak.

 @mixin asztali alap {th {text-align: center; betűsúly: félkövér; } td, th {padding: 2px}} @mixin balra ($ dist) {float: balra; margin-left: $ dist; } # adatok {@ beletartozik balra (10 képpont); @ beletartozik az asztali alap; } 

import

Ez egy másik szabványos programozási szolgáltatás, amelyet a Sass hoz a CSS-hez. Az importálás lehetővé teszi, hogy a nagy stíluslapokat kisebb, könnyebben kezelhető fájlokra bontja. A @import irányelv más Sass fájlok hivatkozására vagy importálására szolgál. Míg az importálási nyilatkozatok általában egy Sass-fájl tetején vannak, a fájl bármely pontján elhelyezheti azokat. Itt van az alapszintaxis.

 @import "fájlnév kiterjesztés nélkül"; 

Kiterjeszt

Használhatja az egyik választót a másik alapjául. Alapvetően a második választó meghosszabbítja az elsőt, tehát az első választó minden tulajdonságával rendelkezik, plusz a saját elemében meghatározottakkal.
 .baseSelector {szín: # 000; szegély: 1 képpont; } .extendSelector {@extend .baseSelector; @ háttér szín: #fff; } 

kommentálva

A Sass támogatja a többvonalas és egysoros megjegyzéseket, amelyeket a szokásos CSS szintaxissal (/ * comment * /), valamint a Sass-specifikus egysoros megjegyzéstel (// comment) lehet létrehozni.

A Sass használata parancssori eszközként

A Sass parancssori eszközként, Ruby modulként vagy plug-inként érhető el a Rack-kompatibilis keretrendszer számára (gondolom, hogy a Ruby on Rails). A cikk parancssori lehetőségére összpontosítom.

A Sass gem: gem install sass telepítésével kezdődik (a Windows felhasználóknak először a Rubint kell telepíteniük). Az A ábra bemutatja a telepítést a MacBook Pro-ra.

A ábra

A Sass telepítése az OS X rendszerbe

A telepítés után a parancssorból lefordíthatja a Sass-kódot a CSS megfelelőjére. Ez a sass parancs futtatásával érhető el, amelyet a bemeneti fájlnév és a kimeneti fájlnév követ, így:

 sass inputFile.scss outputFile.css 

Az scss fájlkiterjesztés a Sass szabványos. Az egyik nagyszerű tulajdonsága az, hogy a Sass figyeli az scss-fájl változásait. Ha változások történnek, akkor automatikusan frissíti a megfelelő CSS-t. Ezt a watch parancssori paraméterrel lehet elérni (két kötőjel, amelyet az watch kulcsszó követ).

 sass --watch inputFile.scss: outputFile.css 

A B ábra a parancs működését mutatja. Figyelem: az első alkalommal hibásan gépeltem be a parancsot (hiányzott a kettőspont). A Sass parancssori kapcsolók teljes listáját a –help kapcsolóval (sass –help) kaphatja meg.

B. ábra

Scss fájl összeállítása és nézése

Melyik eszköz jobb?

Az első, valójában Ruby-ot használó projekt bemutatta Sass-nak. Látom, miért szeretik a fejlesztők a Sass-ot; számos fejlesztési funkciót hoz a CSS vad világába. A Sass azonban csak egy újabb lehetőség az olyan eszközök keverékében, mint a CoffeeScript, a LESS és a TypeScript, tehát melyiket érdemes használni?

Kicsit használtam egy Bootstrap-alapú alkalmazásban és a többi eszközben tesztmeghajtóként, és úgy tűnik, hogy mindegyikük rendelkezik hasznos funkciókkal és kissé átfedésben van. Azt hiszem, hogy milyen szerszámot használ, ha van ilyen, az alkalmazott eszközöktől függ; Például a Microsoft fejlesztői valószínűleg a TypeScriptet használják, a Ruby fejlesztői a Sass-ot választják, és így tovább. Valószínűleg kevésbé fogok maradni, mert nagyszerű Bootstrap-támogató vagyok.

Tetszik olyan eszközök, amelyek bizonyos következetességet biztosítanak a CSS-ben? Ha igen, melyik eszközt részesíti előnyben? Tudassa velünk a vitában.


© Copyright 2020 | mobilegn.com