Sass基礎的入門語法筆記

變量

sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就須要使用冒號(:)分隔開（就像CSS屬性設置同樣），若是值後面加上!default則表示默認值。

//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

特殊變量

通常咱們定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值變量

多值變量分爲list類型和map類型，簡單來講list類型有點像js中的數組，而map類型有點像js中的對象。

list
list數據可經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關於list數據操做還有不少其餘函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

----------定義----------------
//一維數據
$px: 5px 10px 20px 30px;

//二維數據，至關於js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
------------使用---------------
//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一個值爲默認值，第二個鼠標滑過值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map
map數據以key和value成對出現，其中value又能夠是list。格式爲：$map: (key1: value1, key2: value2, key3: value3);。可經過map-get($map,$key)取值。關於map數據還有不少其餘函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

--------------定義----------------------
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
--------------使用----------------------
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

嵌套(Nesting)

sass的嵌套包括兩種：一種是選擇器的嵌套；另外一種是屬性的嵌套。咱們通常提及或用到的都是選擇器的嵌套。

選擇器嵌套
所謂選擇器嵌套指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性。
在選擇器嵌套中，能夠使用&表示父元素選擇器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

屬性嵌套

所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

@at-root

sass3.3.0中新增的功能，用來跳出選擇器嵌套的。默認全部的嵌套，繼承全部上級選擇器，但有了這個就能夠跳出全部上級選擇器。

//sass style
//-------------------------------
//沒有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}

//單個選擇器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多個選擇器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}

.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}

.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root與&配合使用

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

@mixin混合

sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。

無參數mixin

//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有參數mixin

//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //參數使用默認值
}
.opacity-80{
  @include opacity(80); //傳遞參數
}

@extend繼承

sass中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

佔位選擇器%

從sass 3.2.0之後就能夠定義佔位選擇器%。這種選擇器的優點在於：若是不調用則不會有任何多餘的css文件，避免了之前在一些基礎的文件中預約義了不少基礎的樣式，而後實際應用中無論是否使用了@extend去繼承相應的樣式，都會解析出來全部的樣式。佔位選擇器以%標識定義，經過@extend調用。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

if三目判斷

語法爲：if($condition, $if_true, $if_false) 。三個參數分別表示：條件，條件爲真的值，條件爲假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@import導入

sass的導入(@import)規則和CSS的有所不一樣，編譯時會將@import的scss文件合併進來只生成一個CSS文件。可是若是你在sass文件中導入css文件如@import 'reset.css'，那效果跟普通CSS導入樣式文件同樣，導入的css文件不會合併到編譯後的文件中，而是以@import方式存在。

//a.scss
//-------------------
body {
  background: #eee;
}
---------------------
@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 
=====================
css
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

for循環

for循環有兩種形式，分別爲：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@each循環

語法爲：@each $var in <list or map>。其中$var表示變量，而list和map表示list類型數據和map類型數據。sass 3.3.0新加入了多字段循環和map數據循環。

單個字段list數據循環

//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

多個字段list數據循環

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

多個字段map數據循環

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}