Kóði

Leiðbeinandi Beginsins til Sass

Þú gætir hafa heyrt um CSS preprocessing og verið að spá í hvað allt suð er um. Þú hefur jafnvel heyrt um Sass eða LESS .

Í stuttu máli, með því að preprocessing CSS þín gerir þér kleift að skrifa nákvæmari stíll skjöl sem eru sniðin fallega og þurfa minna endurteknar aðferðir sem finnast almennt þegar þú skrifar CSS kóða. Niðurstaðan er öflugri stíl og mikið magn af tíma vistað þegar þú þróar vefsíður eða forrit.

Ef þú skrifar þegar CSS, þá getur þú auðveldlega lært að preprocess CSS þinn. Þegar þú hefur skilið umfang Sass, munt þú furða hvers vegna þú breyttir ekki fyrr.

Hvernig er Sass öðruvísi en CSS?

Sass lítur svipað á CSS en hefur augljós munur þegar þú kafa inn. Það eru tvær leiðir til að skrifa Sass og það er að lokum komið að þér sem þú vilt frekar. Ég nota stakkað og bracketed stíl (.scss) í verkefnum mínum vegna þess að ég er mjög ánægður með að sjá hvar blokkin lýkur og byrjar þegar mikið af kóða verður hreiður. Einu sinni unnin Sass númerið saman við hefðbundna CSS sjálfkrafa með forvinnsluvél.

Það eru mörg forrit í boði sem gera þér kleift að forðast Sass þinn til að vera óaðfinnanlegur og einfalt. Til að setja upp, getur þú notað stjórn lína svo lengi sem þú hefur Ruby uppsett á vélinni þinni. Ef þú ert ekki ánægð með stjórnalínuna eru aðrar valkostir (fleiri hér að neðan) og ef þetta er yfir höfuðið skaltu fara á Sass-lang.com til að læra hvernig á að gera þetta í auðveldum skref fyrir skref. Að lokum, með því að nota hvaða aðferð sem er það stjórn lína eða app, Sass uppsetningu mun horfa á breytingar þínar og sjálfkrafa saman niður í hefðbundna CSS fyrir þig.

Ég mæli mjög með því að nota forrit eins og Codekit , LiveReload , eða Blanda sem hjálpa þér að setja upp Sass verkefni á Mac frá grunni eða ef þú ert Windows notandi mæli ég með PrePros . Codekit, val mitt á forvinnsluvél, hjálpar mér með því að preprocessing Sass minn og staðfestingu og minnkun kóðans til að leyfa vefsíðunni þinni að keyra fljótt og örugglega. (Hæfni til að búa til Áttavita eða Bourbon byggðar verkefni innan Codekit er einnig frábært atriði en er utan umfang þessarar greinar.) Eftir að þú færð þig meira með Sass skaltu vera viss um að kíkja á hvernig á að nota Compass og Bourbon í verkefnum Sass.

Svo hvað er Sass?

Sass stendur fyrir sýnilega ógnvekjandi stíll og var búin til af Hampton Catlin . Sass kynnir nýjar hugmyndir eins og breytur, mixins og hreiður í CSS númerið sem þú þekkir og elskar. Þessar hugmyndir gera loks CSS þinn ógnvekjandi, auðveldara að skrifa og virkari. Allar þessar aðgerðir sameina, flýta vinnuflæði hvers konar hönnuður eða verktaki.

Það sem oft ruglar fólk er valin leið til að skrifa Sass. Þú munt sjá aðrar námskeið eða skýringar á Sass með .SCSS eða .Sass eftirnafninu fyrir Sass skrárnar. Þetta er augljóst vegna þess að það eru tvær leiðir til að skrifa kóðann sem framleiða sömu framleiðsluna. Algengasta sem ég hef séð, og aðferðin sem ég nota í dag, er bracketed útgáfa sem kallast .SCSS. Önnur aðferð er .Sass framlengingin sem byggir meira á innspýtingu frekar en stundvís atriði og er hvítt pláss háð. Með þessari setningafræði er engin þörf fyrir hálfkúlur eða sviga eins og þú sérð í CSS og .SCSS setningafræði.

Skoðaðu dæmið hér að neðan.

.CSS 

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS 

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Sass 

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Uppbygging

Allt í lagi svo nú ertu líklega að velta fyrir þér hvernig á að fá Sass skipulag fyrir eigin verkefni. Ferlið er frekar auðvelt, sérstaklega ef þú notar Codekit eða svipað forrit til að hjálpa þér á leiðinni.

Dæmigerð skrá uppbygging Sass verkefni lítur út eins og útlínan hér að neðan. Þetta kann að líta skelfilegt en ég lofa því að vinnuframboð þitt muni batna þegar þú vafrar höfuðið um hvernig hlutirnir virka saman. Að lokum mun allt Sass þinn safna saman í eina CSS skrá sem verður skráin sem þú tekur inn í vinnuskilaboðin þínar, ef það er HTML, PHP, etc ... 

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

Hvernig þú setur uppbyggingu þína að lokum fer eftir þér. Byrjaðu með grunnuppbyggingu og fínstilla eigin þarfir þínar og vinnuflæði.

@Flytja inn

Sass nær CSS @import regluna til að leyfa því að flytja inn Sass og SCSS skrár. Allar innfluttar skrár eru sameinuð í eina útgefin CSS skrá. Að auki flytja allar breytur eða blandar sem eru skilgreindar í innfluttum skrám yfir í aðalskrána sem þýðir að þú getur nánast blandað saman og passa við hvaða skrá og vertu viss um að allar stíll þín muni vera á heimsvísu.

@import tekur skráarnafn til að flytja inn. Sem síðasta úrræði verða Sass eða SCSS skrár fluttar inn í gegnum heiti skráarinnar sem þú velur. Ef það er engin viðbót mun Sass reyna að finna skrá með því nafni og .scss eða .Sass eftirnafninu og flytja það inn.

Ef þú ert með dæmigerð Sass verkefni skipulag þú munt taka eftir einhverjum @import reglum innan grunnskrá. Þetta leyfir þér einfaldlega að hafa margar skrár sem samstilla á áhrifaríkan hátt þegar þeir eru saman, til dæmis: 

@import "main.scss";

eða: 

@import "main";@Partials

Ef þú ert með SCSS eða Sass skrá sem þú vilt flytja inn en ekki safna saman í CSS, getur þú bætt við undirstrikun í upphafi skráarnafnanna, sem annars er þekkt sem Partial. Eins og kóðinn samanstendur af, mun Sass hunsa hluta þegar hann vinnur til CSS. Til dæmis gætirðu _buttons.scss, engin _buttons.css skrá væri búin til og þú getur þá @import "hnappa";

Best æfing er að búa til hluta skrá og setja alla hluta Sass skrárnar þínar inni í henni. Gera þessa tryggingu þú munt ekki hafa neinar afrit skráarheiti sem Sass leyfir ekki, til dæmis, hluta _buttons.scss og skráahnappa.scss getur ekki verið til í sama möppu. Að nota hluta er frábær leið til að vera skipulögð á heimsvísu. Svo lengi sem þú getur sent inn skrána, þá er Sass þú skrifar nothæf í öllu verkefninu. Venjulega innan hluta ég búið til mixins eða breytur til að nota í gegnum verkefnið mitt. Ég nefni þau á grundvelli innihalds þeirra og þá þætti sem þeir eru að stilla.

Variables

Variables í CSS eru bylting í nútíma vefur þróun. Með Sass getur þú búið til breytur fyrir hluti eins og leturgerðir, liti, stærðir, framlegð, padding, osfrv. Listinn er endalaus. Ef þú skrifar JavaScript eða PHP er hugtakið nokkuð svipað með því að skilgreina breytur og samninga.

Svo hvers vegna nota breytur? Auðvelt, breytur leyfa þér að nota þáttur meira en einu sinni, líkur til bekkjar í HTML eða breytu í JavaScript. Til dæmis segðu að þú skilgreinir margar deildir með ákveðinni bakgrunnslit. Þú getur notað breytu sem er auðveldara að muna í stað hefðbundinna hexakóða eða RGB útreikninga. Að búa til breytu með auðvelt að muna nafn leyfir minni afrita og líma og fleiri afkastamikill vinnsluflæði. Sama hugtak gildir hvenær breytu er hægt að innleiða og með Sass sem er nánast hvar sem er, til dæmis þetta .scss: 

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

mun leiða til þessa .css skrá: 

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Starfsemi og aðgerðir

The kaldur hluti um breytur er að þeir eru mjög svipaðar þeim sem notuð eru í forskriftarþarfir. Variables inni Sass er hægt að nota innan bæði aðgerða og aðgerða. Stöðluð stærðfræðileg aðgerð (+, -, *, / og%) er studd fyrir tölur. Fyrir liti eru aðgerðir sem eru byggðar inn í Sass sem miða á léttleika, lit, mettun og fleira.

Með þessari virkni gerir kóðinn þinn virkari en nokkru sinni fyrr. Til dæmis, ef þú vildir breyta heildarlínulitnum á vefsvæðinu þínu gætir þú einfaldlega breytt breytu, sett saman saman og vefsvæðið þitt mun uppfæra virkilega um allt. Skoðaðu annað dæmi hér að neðan fyrir endanlega flakkalista, þetta .scss: 

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }}

mun leiða til þessa .css: 

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

Nesting

Nesting er gríðarstór ástæða fyrir því að ég elska Sass. Þú skrifar færri línur af kóða í lokin og öll kóðinn þinn er auðvelt að lesa vegna nested formatting. (Sama hugtak um hreiður er einnig að finna í LESS.)

Það eru tvær tegundir af hreiður:

Seljandi hreiður

Selector nesting í Sass er svipað og hvernig þú hreiður HTML: 

Main Content
Sidebar Content

The Sass útgáfa af hreiður: 

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

myndi leiða til eftirfarandi CSS: 

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Fasteignir

Annar tegund búfjár er eignir. Þú getur hreiður eignir með sama forskeyti til betri miða sem leiðir til minna lína af kóða, til dæmis þetta: 

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

myndi leiða til þessa CSS: 

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

Af öllum Sass lögununum Mixins verða að vera öflugasta. Mixín eru svipuð breytu en á sterum. Þú getur skilgreint heill stíl frumefni og nýtt þá stíll í gegnum verkefnið þitt.

Mixins eru skilgreind með @mixin tilskipuninni, sem tekur blokk af stílum sem þú bjóst til áður og beitir því við valið sem þú velur með því að nota @include tilskipunina. Hér að neðan er algengt CSS mynstur sem notaður er til að búa til lárétta flakkavalmynd. Í stað þess að skrifa sömu kóða fyrir hverja leiðsöguþætti skaltu bara nota mixin og innihalda síðar þar sem það er nauðsynlegt. Þetta hugtak er hægt að gera fyrir allt sem þú notar aftur og aftur eins og hnappa, leturfræði, stigsetningar osfrv. ... 

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Og hér erum við með mixin með eina línu af kóða: 

ul.navbar {@include navigate;}

sem leiðir til þessa samantektar CSS: 

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Þú getur jafnvel farið eins langt og að búa til sérhannaðar mixins sem nota rök til að uppfæra virkilega. Að auki má blanda saman í öðrum mixins eða búa til aðgerðir með því að nota mixins og fleira. Aflið á bak við þetta er algerlega mikið.

Það eru nokkrar vinsælar fyrirfram skilgreindar mixin söfn sem ég nefndi áður kallað Compass og Bourbon. Með einföldum @import í verkefninu er hægt að hafa aðgang að nú þegar mynda mixins sem eru almennt notaðar á vefnum. Það eru svo margir möguleikar að það er erfitt að ná allt sem er í boði en það er örugglega gaman að gera tilraunir og fá hendurnar óhreinir að þróa sérsniðnar hreyfimyndir eða umbreytingar með nokkrum línum kóða frekar en skjáfyllt. Mixins gera krossflettitæki gola ef þú finnur ekki eins og að slá inn flettitæki sem skilgreindar eru fyrirfram og aftur inni í CSS þínum.

Til dæmis, hér búa við blanda með rökum sem gerir það kleift að sérsníða. 

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

sem gefur okkur þetta CSS þegar það er tekið saman: 

p {border-color: blue;border-width: lin;border-style: dashed;}

Yfirlit

Þó að Sass hafi kennsluferil, trúi ég sannarlega að þegar þú skilur aðferðirnar og setningafræði, muntu aldrei vilja fara aftur til að skrifa venjulegt CSS aftur.

Sass er afar öflugur og ég hef aðeins fjallað um grunnatriði hér. Með hefðbundnum CSS, höfum við öll lent í afrita og líma eða finna og skipta um verkefni sem eyða svo miklum tíma í þróunarstigi verkefnisins. Gefðu Sass a reyna og uppgötva hvernig á að byggja upp árangursríka vinnuflæði í framtíðarverkefnum þínum.

Notar þú Sass eða greiðir aðra CSS forvinnsluaðila? Hefurðu uppáhalds mixin? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, notar núll til hetja myndar um Shutterstock.

minna sass css preprocessing css prepocessor Leiðbeiningar um sass hvernig á að nota sass frábær css