Stílus egy webhelyet SASS használatával

Sokat tehetsz a CSS-vel - talán több, mint gondolnád - de a tiszteletreméltó stíluslap nyelvének korlátozása van. Egy modern webes projektben, az NPM modulokkal, a JavaScript keretrendszerekkel, az ES6-nak és így tovább, némileg anachronisztikusnak érzi magát, hogy visszahúzódjon a Vanilla CSS írásához.

Szerencsére vannak olyan lehetőségek, amelyek lehetővé teszik, hogy más nyelveket használják, amelyek a CSS-hez fordíthatók. Az "előfeldolgozóknak" nevezik, ezek az eszközök integrálódnak a webépítési folyamatba, és felhasználható stíluslapokat generálnak a kiválasztott kiterjesztési nyelvtől.

SASS (szintaktikailag félelmetes stílusú lapok) az egyik legnépszerűbb ezek a lehetőségek - Olvass tovább az útmutatóval Mi a sass? A SASS számos értékes új nyelvi funkciót ad hozzá, amelyek nem érhetők el (jelenleg) a CSS-ben, hogy segítsenek a webhelyek és alkalmazások számára. Ezek közé tartoznak olyan dolgok, mint a mixins és a kontroll irányelvek, amelyek hangulnak, de valójában nagyon egyszerűek, és megnézzük ezeket a bemutatót. Ha még egyszerűbbet akarsz tartani a dolgokat, akkor a felhasználó a weboldal építője .

• Cool CSS animációk újra létrehozásához

Valójában két különböző szintaxis van a SASS számára, amely egy .scss fájl kiterjesztést használ, és az egyiket használja .sass. Az előbbi úgy néz ki, mint a CSS (valójában az összes .css fájl érvényes .scss fájlok), míg az utóbbi kiküszöböli a CSS-konzolokat és a pontosvesszőket a bemélyedések és az újságok javára. A .scss-re összpontosítunk, de a választás egyszerűen a személyes preferenciára. A webhely frissítése? Győződjön meg róla, hogy web hosting szolgáltatás az, amit szüksége van rá, és megkapja felhő tároló Rendben is.

Töltse le a fájlokat erre a bemutatóra (282 probléma)

01. Állítsa be a fordítót

A SASS használata lényegében egy fordítót igényel. Ennek legegyszerűbb módja a parancssorban lenne. Ezt a Homebrew használatával teheti meg. A Sass fordítót több nyelven hajtják végre, és a Homebrew telepíti a DART verziót, amely gyors.

brew install sass/sass/sass

02. Hozzon létre egy SASS fájlt

Próbáljuk meg létrehozni egy egyszerű SASS fájlt, hogy a fordítót cselekedjen. A SASS egyik legegyszerűbb fogalma változó, amelyet egyszer lehet megadni a $ előtag, majd az egész kód alatt. Létrehozunk Sass-input.scsss .

 $ szövegszín: #ccccccc;
test {
    Szín: $ szövegszín;
} 

03. Parancssor összeállítása

Most futtathatjuk a Sass fordítót a parancssorban, hogy átalakítsuk .sss fájlunk CSS kimenetre. A kimeneti fájlban észreveszi, hogy a változók eltűnnek, és csak a szabványos CSS szintaxissal maradunk, amely a böngésző által használható.

 SASS SASS-INPUT.SCSS CSS-output.css 

04. Automatizálja az építését

Ez nagyszerű, de nem szeretné kézzel futtatni a Sass fordítót minden alkalommal, amikor módosítja. Az egyik lehetőség az, hogy meghallgassa a könyvtárban lévő fájlok módosítását, és automatikusan újrafordul a kimenetet egy másik könyvtárba (megőrzési fájlnevek). Ez hatékonyan lehetővé teszi, hogy elkülönítse a forrás .scs fájlokat az épített CSS-ről.

 MKDIR SRC
mkdir src / sass
mkdir nyilvánosság
Mkdir Public / CSS
SASS -Watch SRC / SASS /: Nyilvános / CSS /

05. Játssz Sass Styling-szel

Nézzünk egy egyszerű indító webhelyre, amelyet használhatunk a Sass Styling segítségével. Elkezdhetünk egy unstyled példa helyét klónozni. A legfontosabb dolog, hogy megjegyezzük, hogy a HTML oldalunk semmit sem ismer a SASS-ről. Egyetlen CSS fájlbeviteli ponttal rendelkezik, amelyet a következő létrehozunk.

 CD nyilvános
curl -o index.html https: // Raw.
githubusercontent.com/simon-a-j/sas-
TUTORIAL /
Master / Public / Index.html 

06. A fő stíluslap

A Styles.Css-t használjuk a fő CSS belépési pontunknak, amely később más modulok importálására használjuk. Ez azt jelenti, hogy meg kell mondanunk a SASS-t, hogy létrehozzuk ezt a fájlt, ezért meg kell hoznunk egy stílusokat.Scss fájlt az SRC / SASS mappában. Ha futsz sassawatch Mint korábban, ez automatikusan összeállítja a CSS-t a Nyilvános / CSS Mappa, és a webhely frissítése megmutatja a változásokat. Próbáljon meg néhány módosítást, és frissítse a HTML oldalt a böngészőben, ahogy megy.

 // styles.scsss
test {
  Font-Család: Sans-Serif;
  Text-Align: Center;
}

07. A színséma kezelése

Nézzük meg, hogy a SASS segítsen nekünk kezelni a webhely színsémáját. Gyakran van egy öt vagy hat színű paletta egy weboldal számára. Ezeket be lehet adni _colours.sss . Az Underscore előtag azt mondja, hogy a SASS nem fordítja össze ezt egy új HTML fájlba (egy részleges "). De kissé eltérő módon használhatjuk.

 // _colours.sss
$ szín-primer: # 231651;
$ Color-Secondary: # 2374ab;
$ színfény: # D6FFF6;
$ szín-kiemelés1: # 4dccbd;
$ Color-Highlight2: # FF8484;

08. Használjon színváltozókat

Ha ezeket a színváltozókat használjuk, akkor csak felállítottuk, meg tudjuk mondani a SASS-t, hogy importálja a tartalmat _colours.sss a fő stíluslapunkba. Ezt egy @Import nyilatkozat. Miután ezt megtette, vegye figyelembe, hogy a változók hogyan oldódnak meg a Kimeneti CSS-fájlban.

 // styles.scsss
@import "_colours.sss";
test {
  Font-Család: Sans-Serif;
  Text-Align: Center;
  Háttér: lineáris gradiens (155deg,
$ szín-primer 70%, $ szín-másodlagos
70%);
  Szín: $ színfény;
  Min-Magasság: 100VH;
}
H1 {
    Szín: $ szín-kiemelés1;
}
H2 {
  Szín: $ szín-kiemelés2;
}

09. Nest Styles

A SASS másik hasznos funkciója a fészek fészekezésének képessége. Ez az, hogy megadhat egy olyan elemet, amely csak akkor alkalmazható, ha az elem egy szülőelemen belül történik. Használjuk ezt, hogy megkülönböztessük a linkek stílusát attól függően, hogy megjelennek-e a fejlécben vagy a testben.

 a {
  Szín: $ szín-másodlagos;
}
.Profile-header {
  A {
    Betűméret: 16px;
    margó-balra: 10px;
    Margó-jobb: 10px;
    Padding: 10px;
    Border-sugara: 5px;
    Szín: $ színfény;
    Háttérszín: $ szín-másodlagos;
  }
}

10. Készítsen érzékeny hálózatot

Most gondoskodjunk tartalmunkat egy érzékeny hálózati formátumba. A SASS-nak van néhány funkciója, hogy ezt jelentősen könnyebben kezelje. Valamint a változók használatát a töréspontok meghatározásához, fészkelhetünk @média Más stílusokon belüli lekérdezések, amelyek sokkal olvashatóbbá teszik a képernyő méretét.

 $ töréspont: 800px;
.Profile-test {
  Kijelző: FLEX;
  Align-Tételek: Stretch;
  Indokolás-tartalom: tér-körül;
  Margin-Top: 32PX;
  margó-balra: 10vw;
  Margó jobb: 10VW;
  @Media képernyő és (max-szélesség:
$ töréspont) {
      Flex irány: oszlop;
  }
}
.profile-szakasz {
  Háttérszín: $ szín-kiemelés1;
  Szín: $ szín-primer;
  Margó: 16px;
  Border-sugara: 10px;
  Szélesség: 340px;
  .Profile-tartalom {
    Padding: 20px;
  }
  @Media képernyő és (max-szélesség:
$ töréspont) {
    Szélesség: 100%;
  }
}

11. MIXINS bevezetése

Mixins egy másik erőteljes SASS funkció, amelyet az újrafelhasználható stíluslapfunkciók meghatározásának módjaként gondolhat. A mixint egyszer definiálják, paramétereket készíthetnek, és ezután bárhol a SASS-kódban lehet hivatkozni. Ehhez egy használati eset az eladó előtételének kezelése. Ha azt szeretnénk, hogy egy CSS átalakuljon a régebbi böngészők munkájához, akkor ez megköveteli a -Webkit Például a Chrome és a Safari előtagja. Határozzuk meg a mixint, amely gondoskodik róla.

12. Mixins és változók

Egy több paramétert is használhatunk, kombinálva néhány változóval, amelyet meghatározunk, az oldal különböző részeinek elegánsabban kezelhető kialakításához. Ha létrehozunk egy mixin, amely meghatározza az előtér és a háttér színe, ez lehetővé teszi számunkra, hogy kiválassza a látszat különböző részeihez egy véges listája stílus változó.

 $ style1: (előtér: $ színfény,
Háttér: $ szín-másodlagos);
$ style2: (előtér: $ szín-primer,
Háttér: $ szín-kiemelés1);
$ style3: (előtér: $ szín-primer,
Háttér: $ szín-kiemelés2);
@mixin tartalom-stílus ($ előtér,
$ háttér) {
  Szín: $ előtér;
  Háttérszín: $ háttér;
} 

13. Használja az új mixin-t

 .Profile-header {
  A {
    @lude Content-Style ($ style1 ...);
    // ...
  }
}
.profile-szakasz {
    @lude Content-Style ($ style2 ...);
  // ...
}

14. Értsd meg az örökséget

A SASS másik nagyon erős jellemzője örökség. Jelenleg két különböző stílusunk van az oldalunkon található linkekhez. Ha mindkettőt közös stílusokat szeretnénk használni, hanem a CSS másolása és beillesztése, miért nem használunk helyőrzőosztályt, amely "%" -al van jelölve, amely mindkettővel meghosszabbítható, lehetővé téve számukra, hogy örökölje stílusát?

% Link-megosztott {
  Betűméret: 16px;
  margó-balra: 10px;
  Margó-jobb: 10px;
  Padding: 10px;
  Border-sugara: 10px;
}

15. Az osztályok kiterjesztése

Most kiterjeszthetjük a Link-megosztott osztályt a Link stílusának meghatározásához a webhelyünk során. Ez eléggé elegánsnak tűnik. Meghatározzuk, hogy mi a kapcsolat általában csak egyszer néz ki, újra felhasználja az egészet, és adja meg a színeket a palettáról minden egyes linkre a mixin segítségével.

 .Profile-header {
  A {
    @exend% Link-megosztott;
    @lude Content-Style ($ style1 ...);
  }
}
A {
  @exend% Link-megosztott;
  @lude Content-Style ($ style3 ...);
}

16. Módosítsa a témát

Most vessünk egy pillantást arra, hogy mennyire könnyű a SASS a webhelyünk témájának módosítására. Lehet, hogy a jelenlegi színek nem tökéletesek. Nemcsak módosíthatjuk a színváltozókat, hanem bizonyos SASS funkciókat is használhatunk az eljárási szempontból olyan színek létrehozására, amelyek megfelelnek az elsődleges választásunknak.

 // _colours.sss
$ szín-primer: # 2E1F27;
$ Color-Secondary: Lighten ($ color-primer,
25%);
$ Color-Light: Lighten ($ Color-Primary,
75%);
$ Color-Highlight1:
könnyítés (kiegészítés ($ szín-primer), 50%);
$ Color-Highlight2:
könnyítés (kiegészítés ($ színek), 50%);

17. Válasszon ki egy új színeket

Most módosíthatjuk a webhely teljes színsémáját egyszerűen az új szín-elsődleges érték megadásával a _colours.sss fájl. Próbálja meg, hogy kísérletezzen alternatív színekkel. Sassza véletlenszerűen is meg tudtuk venni (de ne felejtsük el, hogy ez utal arra a pontra, amelyen a webhelyed épül, nem futásidejűleg). Megpróbálhatja beállítani a logikát, amelyet az elsődleges téma más színeit használunk.

 $ Red: Véletlen (255);
$ Green: Véletlen (255);
$ BLUE: Véletlen (255);
$ Color-Primary: RGB ($ Red, $ Green, $ Blue); 

18. Használja a könyvtárakat

A Sass modulrendszere is nagyon egyszerűvé teszi, hogy a harmadik féltől származó könyvtárakat minimális erőfeszítéssel használja, és a nagy futásidejű fájlok szállítás nélkül a végfelhasználók számára. Próbáljuk ki a szögletes élek könyvtárat, amelyet használhatunk a lejtős élek létrehozásához az oldalunkon lévő tárgyakhoz.

 git klón https://github.com/josephfusco//
szögletes élek.git src / sass / szögletes élek

19. A szögletes élek mixin

A szögletes éleket ugyanúgy importálhatjuk, ahogyan a színkézetünket részleges. Ezután használható a könyvtárral ellátott keverővel. Próbáljuk ki a profilrész osztályunkban.

 @Import "szögletes élek / _angled-élek.sss";
.profile-szakasz {
  @nclude szögletes él ("külső alsó",
"Jobb alsó", $ szín-kiemelés1);
  @lude szögletes él ("külső felső",
"Jobb felső", $ szín-kiemelés1);
  Margó: 120px 16px 120px 16px;
  // ...
}

20. Kimeneti formázás

Befejezzük a kimeneti SASS generálja. Ha megváltoztattad a CSS-fájljait, amikor módosítja, észre fogod venni, hogy meglehetősen olvashatóak maradnak. Azonban lehet, hogy Sass építsen kondenzált CSS-t, ami kevésbé emberi olvasható, de még mindig készen áll a szállításra. Ezt megteheti a --stílus parancsnoki zászló.

 SASS SARS / SASS /: Public / CSS / --Style
tömörített 

21. More Sass

Most már meglehetősen néhány funkciót vizsgáltunk, és webhelyünk nem néz túl rossznak. Remélhetőleg megkezdi látni, hogy a SASS segítsen nekünk több karbantartó stílusú lapok kialakításában. Nem fedeztük fel a nyelv minden jellemzőjét - sok hasznosabb funkció van rajta, és olyan fejlett funkciók, mint a vezérlési irányelvek (például @ha , @For és @míg ), amelyek gyakran összetett könyvtári funkciók létrehozására használják. Összességében emlékezzen arra, hogy a SASS teljesen stilisztikai preferencia. Mindent megteszhet, amit Tiszta CSS-vel láttunk, ha tetszik, de biztosan gondolkodnod kell az előfeldolgozásról, mivel a munkája összetettebbé válik.

Ezt a cikket eredetileg a 282 Web designer . megvesz 282 szám vagy Iratkozzon fel itt .

Olvass tovább:

• 10 Amazing New CSS technológiák
• 3 fényes új CSS tulajdonságok, amelyek megpróbálják ma
• Nagy parallaxis görgetési webhelyek