sass學習筆記 - xiaoxiao2014－IT工程師數位筆記本

文章出處

學習訪問鏈接：http://www.w3cplus.com/sassguide/syntax.html

sass在線編輯：http://sassmeister.com/

1,sass有默認的特殊字符，如下

$bgcolor:red !default;
body{
     background:$bgcolor;
}
//css style
//-------------------------------
body{
   background:red;
}

若需要修改的話，可以在默認的顏色之前添加一個變量，這樣就可以覆蓋這個顏色樣式

$bgcolor:yellow;
$bgcolor:red !default;
body{
     background:$bgcolor;
}
//css style
//-------------------------------
body{
 background:yellow;
}

2,多值變量

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

list類型：

list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值，其中list數據操作還有很多的其他函數如length($list),json(),append()等，具體看參考sass Functions（搜索List Functions即可）

定義：

//一維數據
$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)等，具體可參考sass Functions（搜索Map Functions即可）

定義

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

3.嵌套，包括選擇器嵌套和屬性嵌套，其中在選擇器嵌套中，可以使用&表示父元素選擇器。具體查看以下列表：

選擇器嵌套，一般會使用選擇器嵌套。

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

@at-root是用來跳出選擇器嵌套的。默認所有的嵌套，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。

普通跳出嵌套

//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 (without: ...)和@at-root (with: ...)

默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。這個語法的關鍵詞有四個：all（表示所有），rule（表示常規css），media（表示media），support（表示support，因為@support目前還無法廣泛使用，所以在此不表）。我們默認的@at-root其實就是@at-root (without:rule)。

@at-root與&配合使用（&表示父元素選擇器）

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

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