Sass

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

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

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

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

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

SCSS-ի ոճը․


```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-ի ոճը․


```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
```


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

```css
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

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


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


```css
#header
  background: #FFFFFF

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


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


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


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


```css
$linkColor: #00F

a
  color: $linkColor
```


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


```css
a {
   color: #00F; 
}
```

Միքսինների օգտագործման օրինակ․

```sass
@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-ում կվերափոխվի․


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


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


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


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


```css
#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)-ի ընթացիկ կոդի շտեմարան