Sass

Sass

Տեսակ	ոճային լեզու, Պրեպրոցեսոր, ծրագրավորման լեզու և off-side rule language?
ՕՀ	բազմապլատֆորմ
Լույս տեսավ՝	նոյեմբերի 28, 2006
Վերջին կայուն տարբերակ	3.4.8 (նոյեմբերի 14, 2014)
Արտոնագիր	MIT արտոնագիր
Կայք	sass-lang.com​(անգլ.)

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		https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ Արխիվացված 2016-11-14 Wayback Machine
Eclipse
Emacs	SCSS Mode	https://github.com/antonj/scss-mode/
JetBrains IntelliJ IDEA (Ultimate Edition)		https://www.jetbrains.com/idea/
JetBrains PhpStorm		http://www.jetbrains.com/phpstorm/
JetBrains RubyMine		http://www.jetbrains.com/ruby/
Microsoft Visual Studio	Mindscape	http://www.mindscapehq.com/products/web-workbench
Microsoft Visual Studio	SassyStudio	http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d
Microsoft WebMatrix		http://www.microsoft.com/web/
NetBeans		http://plugins.netbeans.org/plugin/34929/scss-support Արխիվացված 2015-10-08 Wayback Machine
Vim	haml.zip	http://www.vim.org/scripts/script.php?script_id=1433
Visual Studio Code		https://code.visualstudio.com/Docs/languages/css

Տես նաև

• LESS
• PostCSS
• CSS

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

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