Első lépések a Sass telepítéssel és az alapokkal

Ebben a bejegyzésben megvitatjuk a CSS Preprocessort, a Sass-ot vagy Szintaktikusan félelmetes stíluslapok.

Ha Ön a LESS korábbi hozzászólásait követte, biztosak vagyunk benne, hogy ismeri azokat CSS előfeldolgozó. A Sass és a LESS egyaránt olyan CSS előfeldolgozók, amelyek elsősorban az egyszerű statikus-CSS-nek dinamikusabb módon történő szerkesztését teszik lehetővé a programozási nyelvek, mint a Variables, Mixins és Functions használatával.

A Sass telepítése

Mielőtt össze tudnánk írni Sass-t, telepítenünk kell. Sass Rubyra épül. Ha egy Mac számítógépen dolgozik, valószínű, hogy már telepítve van a Ruby. Ha a Ruby-t Windows-ba telepítheti, használja ezt a Ruby Installer-t.

Miután a telepítés befejeződött, akkor a Terminálra (a Mac-en) vagy a Parancssorban (a Windows-ban) mehet a következő parancssorba:

Mac-en;

 sudo gem install sass

Windows rendszeren;

 gem install sass

Ha a telepítés sikeres, akkor a következő értesítést kapja a Terminál / Parancssorban.

Ezután ki kell választanunk, hogy melyik könyvtárat nézze meg a Sass számára az alábbi parancs segítségével;

 sass -watch útvonal / sass-könyvtár

A fenti parancssor mindenre néz .SCSS/.sass fájlokat path / könyvtárban és ha a könyvtár egyik fájlja megváltozik, a Sass frissíti a megfelelő fájlokat, vagy létrehozza azt, ha nincs ilyen.

Ha szükségünk van Sass-ra egy adott könyvtárban lévő fájlok generálására, akkor ezt megtehetjük;

 sass -watch útvonal / sass-könyvtár: path / css-könyvtár

Ezzel a parancssorral a könyvtár helyett egy adott fájlt is megnézhetünk;

 sass - watch path / sass-directory / styles.css

Ha az óra parancs sikerül, akkor az alábbi értesítés jelenik meg a Terminál / Parancssorban.

További irodalom: Sass fájlok automatikus összeállítása Sass 3-mal

Sass alkalmazások

Azonban, ha utálod a Terminál vagy a Parancssor használatát, használhatsz néhány alkalmazást a Sass számára. Az ingyenes lehetőség a Scout; az Adobe Airre épül, így minden operációs rendszeren (Windows, OSX és Linux) futtatható.

Azonban nagyon lassan fut, ahogyan néhányan korábban jelentették.

Tehát, ha nincs türelmed, van néhány fizetett lehetőség is. Az ár minden alkalmazás esetében változik, a Compass.app $ 10, a Fire.app, a $ 14 és a Codekit 25 dollárra vonatkozik.

Kód kiemelése

Bár a Sass elsősorban CSS kiterjesztés, a jelenlegi szerkesztő nem feltétlenül kiemeli a szintaxist. Szerencsére már létezik néhány csomag a szinte minden kódszerkesztő számára az engedélyezéshez .sass vagy .SCSS kód kiemelése.

Ha a Sublime Text 2-vel dolgozik, mint én, használhatja ezeket a csomagokat; Szöveg nélküli HAML és Sass és Sublime szöveges 2 Sass csomag, és könnyebb módon telepíthet egy ilyen csomagot a Csomagvezérlés segítségével.

Más kódszerkesztők számára lásd alább, vagy próbálja ki a Google-t.

Ez egy nagyszerű screencast bemutató a Sass-on dolgozni a Dreamweaverrel
Sass mód a Coda számára. Úgy tűnik azonban, hogy ez a mód a 2. verzióban integrálva lett a Coda-hoz
TextMate hivatalos SCSS csomag
Espresso Cukor a Sass számára
InType-csomagok

Sass nyelv

Sass és LESS ténylegesen megosztanak néhány közös nyelvet, az alábbiakban néhány közülük.

változók

 $ color-base: # 000; $ szélesség: 100px;

Az egyetlen különbség a LESS változóktól az, hogy a Sass változóját a $ jel.

Fészkelési szabályok

 fejléc szélesség: 980px; magasság: 80px; nav ul list-style: nincs; párnázás: nincs; margin: nincs;  li kijelző: inline; a text-decoration: nincs;

Keverékek és funkciók

 @mixin határ-sugár ($ radius) -moz-border-radius: $ sugarú; -webkit-border-radius: $ sugár; -ms-border-sugar: $ sugár; határ-sugár: $ sugarú;

Művelet

 li szélesség: $ szélesség / 5 - 10px;

Feltételes nyilatkozat

 @if könnyű ($ color-base)> = 51% háttérszín: # 333333;  @else háttérszín: #ffffff;

A LESS-ben hasonló dolgot tehetünk a Guard kifejezésen keresztül, amelyet a jelen bemutatóban ismertettünk.

Végső gondolat

És ez az. A következő bejegyzésben a Sass nyelveket és társát, Compass-ot fogjuk felfedezni. Maradjon velünk.