Sass

Sass (Syntactically Awesome Stylesheets), կասկադային ոճային լեզու, որն սկզբնապես մշակել է Համփթոն Քեյթլինը, իսկ զարգացման աշխատանքները կատարել է Նատալի Վեյզենբաումը։ Sass-ը մետալեզու է, որը հիմնված է CSS-ի վրա և նախատեսված է CSS կոդի վերացարկման մակարդակը բարձրացնելու համար։

Sass լեզուն ունի երկու շարահյուսություն․
 sass, տարբերվում է ձևավոր փակագծերի բացակայությամբ։ Նրանում ներկառուցված տարրերը իրագործվում են բացատների միջոցով։
 SCSS (Sassy CSS), օգտագործվում են ձևավոր փակագծեր, ինչպես հենց CSS-ում։

Փոփոխականներ 
Sass-ը հնարավորություն է տալիս սահմանելու փոփոխականներ։ Փոփոխականները սկսվում են դոլարի նշանով ($) և ավարտվում լատինական միջակետի նշանով (Colon, :)։

SassScript-ն աջակցում է չորս տեսակի տվյալներ․

 Թվեր (այդ թվում միավորներ)
 Տողեր (քաղվածքներով կամ առանց)
 Գույներ (անուն կամ անուններ)
 Բուլյան (տրամաբանական տիպ)

SCSS-ի ոճը․

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

SASS-ի ոճը․

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

Կկոմպիլացնի հետևյալ կոդը․
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Ներքին սկզբունքներ 
Sass-ի առանցքային առանձնահատկություններից մեկը, որը թույլ է տալիս արագացնել ներքին սելեկտորների ստեղծումը և փոփոխումը․

#header
  background: #FFFFFF

  .error
    color: #FF0000
  
  a
    text-decoration: none
    &:hover
      text-decoration: underline

CSS-ում կվերափոխվի․

#header {
   background: #FFFFFF; 
}
#header .error {
   color: #FF0000; 
}
#header a {
   text-decoration: none; 
}
#header a:hover {
   text-decoration: underline; 
}

Փոփոխականներ 
Sass-ը CSS-ին ավելացնում է հաստատուններ և միքսիններ։ Այն մեծ ոճային հավաքածու ունեցող ֆայլում ապահովում է տվյալների ամբողջականությունը։ Հաստատունները թույլ են տալիս սահմանել արժեքներ և այն կիրառել ոճային ֆայլում։ Միքսինների միջոցով նույնպես կարող ենք սահմանել հաստատուններ։

$linkColor: #00F

a
  color: $linkColor

CSS-ում կվերափոխվի․

a {
   color: #00F; 
}
Միքսինների օգտագործման օրինակ․
@mixin border-radius($radius,$border,$color) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
    border:$border solid $color
}
.box { @include border-radius(10px,1px,red); }
CSS-ում կվերափոխվի․

.box {
   -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
       -ms-border-radius: 10px; 
           border-radius: 10px; 
   border: 1px solid red; 
}

Ցիկլեր 
Sass-ը թուլ է տալիս փոփոխականներից բացի օգտագործել նաև ,  և  ցիկլեր։

$squareCount: 3
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

Այն կկոմպիլացնի հետևյալ կոդը․

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

IDE ինտեգրում

Տես նաև 
 LESS
 PostCSS
 CSS

Արտաքին հղումներ 
 Ռուսերեն գրականություն
 Sass-ի պաշտոնական կայք
 Haml/Sass (Git)-ի ընթացիկ կոդի շտեմարան

Ծանոթագրություններ