Sass

Վիքիպեդիայից՝ ազատ հանրագիտարանից
Jump to navigation Jump to search
Sass
Sass Logo Color.svg
Տեսակոճային լեզու, Պրեպրոցեսոր, ծրագրավորման լեզու և off-side rule language?
Լույս տեսավ՝նոյեմբերի 28, 2006
Վերջին կայուն տարբերակ3.4.8 (նոյեմբերի 14, 2014)[1]
ԱրտոնագիրMIT արտոնագիր
Կայքsass-lang.com

Sass (Syntactically Awesome Stylesheets), կասկադային ոճային լեզու, որն սկզբնապես մշակել է Համփթոն Քեյթլինը, իսկ զարգացման աշխատանքները կատարել է Նատալի Վեյզենբաումը[2][3]։ 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; 
}

Միքսինների օգտագործման օրինակ[4]

@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/
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
Vim haml.zip http://www.vim.org/scripts/script.php?script_id=1433
Visual Studio Code https://code.visualstudio.com/Docs/languages/css

Տես նաև[խմբագրել | խմբագրել կոդը]

Արտաքին հղումներ[խմբագրել | խմբագրել կոդը]

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]