**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; 
}

```

Փոփոխականներ CSS-ում
--------------------

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-ը թուլ է տալիս փոփոխականներից բացի օգտագործել նաև ``@for``, ``@each`` և ``@while`` ցիկլեր։

```
$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 ինտեգրում
-------------

| IDE | Ծրագիր | Կայք |
| --- | --- | --- |
| Adobe Dreamweaver CC 2017 |  | Արխիվացված 2016-11-14 Wayback Machine |
| Eclipse |  |  |
| Emacs | SCSS Mode |  |
| JetBrains IntelliJ IDEA (Ultimate Edition) |  |  |
| JetBrains PhpStorm |  |  |
| JetBrains RubyMine |  |  |
| Microsoft Visual Studio | Mindscape |  |
| Microsoft Visual Studio | SassyStudio |  |
| Microsoft WebMatrix |  |  |
| NetBeans |  | Արխիվացված 2015-10-08 Wayback Machine |
| Vim | haml.zip |  |
| Visual Studio Code |  |  |

Տես նաև
-------

* LESS
* PostCSS
* CSS

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

1. ↑
2. ↑  «Sass: Syntactically Awesome Style Sheets». *sass-lang.com*. Արխիվացված է օրիգինալից 2013 թ․ սեպտեմբերի 1-ին. Վերցված է 2017 թ․ փետրվարի 25-ին.
3. ↑  «Natalie Weizenbaum's blog». Արխիվացված է օրիգինալից 2013 թ․ հունվարի 16-ին. Վերցված է 2017 թ․ փետրվարի 25-ին.
4. ↑  CSS with superpowers

Արտաքին հղումներ
----------------

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