Darba sākšana ar Sass instalāciju un pamatiem

Šajā amatā mēs apspriedīsim CSS Preprocessor, ko sauc par Sass vai Syntactically Awesome Stylesheets.

Ja esat sekojis mūsu iepriekšējām ziņām par LESS, mēs esam pārliecināti, ka esat iepazinies ar CSS priekšprocesors. Gan Sass, gan LESS ir CSS priekšprocesori, kas galvenokārt paplašina veidu, kā mēs veidojam vienkāršus statiskos-CSS dinamiskāk, izmantojot programmēšanas valodas, piemēram, mainīgos, miksus un funkcijas.

Sass instalēšana

Pirms mēs varam sacerēt Sass, mums tas ir jāinstalē. Sass ir uzcelts uz Ruby. Ja strādājat ar Mac, iespējams, ir instalēta Ruby. Ja jūs varat instalēt Ruby sistēmā Windows, izmantojiet šo Ruby Installer.

Kad instalēšana ir pabeigta, varat doties uz Terminālu (Mac datorā) vai komandu uzvednē (sistēmā Windows), tad ievadiet tajā šādu komandrindu:

Mac datorā;

 sudo gem instalēt sass 

Operētājsistēmā Windows;

 gem instalēt sass 

Ja instalācija izdodas, jūsu terminālā / komandu uzvednē būs šāds paziņojums.

Tālāk mums jāizvēlas, kurš katalogs Sass skatīties, izmantojot šādu komandu;

 sass -watch ceļš / sass-directory 

Iepriekš redzamā komandrinda skatīsies katru reizi .scss/.sass failus ceļš / katalogs un kad tiek mainīts kāds no šajā direktorijā esošajiem failiem, Sass atjauninās atbilstošos failus vai izveidos tos, ja tādi nav.

Ja mums ir nepieciešams Sass, lai radītu failus konkrētā direktorijā, mēs to varam darīt šādā veidā;

 sass -watch ceļš / sass-directory: path / css-directory 

Ar šo komandrindu varam skatīt arī konkrētu failu, nevis direktoriju;

 sass - pulksteņa ceļš / sass-directory / styles.css 

Ja pulksteņa komanda izdodas, jūsu terminālā / komandu uzvednē parādīsies kaut kas šāds paziņojums.

Turpmāka lasīšana: Sass failu automātiskā sastādīšana ar Sass 3

Sass lietojumprogrammas

Tomēr, ja jūs ienīstat darbu, izmantojot terminālu vai komandu uzvedni, varat izmantot dažas Sass programmas. Bezmaksas opcija ir Scout; tā ir veidota, izmantojot Adobe Air, lai to varētu darbināt visās OS (Windows, OSX un Linux).

Tomēr tas notiek ļoti lēni, kā daži no tiem jau ir ziņojuši.

Tātad, ja jums nav pacietības, ir arī dažas apmaksātas iespējas. Cena mainās katrai lietotnei, Compass.app iet par 10 ASV dolāriem, Fire.app, $ 14 un Codekit par 25 ASV dolāriem.

Kodu iezīmēšana

Lai gan Sass galvenokārt ir CSS paplašinājums, jūsu pašreizējais redaktors var nepareizi norādīt sintaksi. Par laimi, jau ir dažas paketes gandrīz jebkuram koda redaktoram, lai to iespējotu .sass vai .scss koda izcelšana.

Ja strādājat ar Sublime Text 2, piemēram, man, jūs varat izmantot šīs paketes; Sublime teksta HAML & Sass un Sublime Text 2 Sass pakotne un vieglāk, jūs varat instalēt vienu no šiem iepakojumiem, izmantojot pakotnes vadību.

Attiecībā uz citiem koda redaktoriem skatiet tālāk, vai arī mēģiniet to lietot vietnē Google.

• Šī ir lieliska apmācība par darbu ar Sass ar Dreamweaver
• Sodas režīms Coda. Bet, šķiet, šis režīms ir integrēts ar Coda kā 2. versiju
• TextMate oficiālā SCSS pakete
• Espresso cukurs Sass
• InType paketes

Sass valoda

Sass un LESS tiešām koplieto dažas kopīgas valodas, zemāk ir dažas no tām.

Mainīgie

 $ color-base: # 000; $ platums: 100px; 

Vienīgā atšķirība no LESS mainīgajiem ir tas, ka Sass mainīgais ir definēts ar a $ zīme.

Ligzdošanas noteikumi

 galvene platums: 980px; augstums: 80px; nav ul list-style: nav; polsterējums: nav; starpība: nav;  li displejs: inline; a text-decoration: nav;  

Mixins un funkcijas

 @mixin border-radius ($ rādiuss) -moz-border-radius: $ rādiuss; -webkit-border-rādiuss: $ rādiuss; -ms-border-rādiuss: $ rādiuss; robežu rādiuss: $ rādiuss;  

Darbības

 li platums: $ width / 5 - 10px;  

Nosacījuma paziņojums

 @if vieglums ($ color-base)> = 51% fona krāsa: # 333333;  @else fona krāsa: #ffffff;  

LESS jūs varat darīt līdzīgu lietu, izmantojot Guard izteiksmi, ko mēs esam aplūkojuši šajā apmācībā.

Galīgā doma

Un tas viss. Nākamajā amatā mēs sāksim pētīt Sass valodas un tā pavadoņa kompasu. Sekojiet līdzi.