關於SASS的學習總結

前言

SASS是一種CSS預處理器（css​​ preprocessor）。它的基本思想是，用一種專門的程式語言，進行網頁樣式設計，然後再編譯成正常的CSS檔。

SASS提供四個編譯風格的選項：

• nested：嵌套縮排的css程式碼，它是預設值。

• expanded：沒有縮排的、擴充的css程式碼。

• compact：簡潔格式的css程式碼。

• compressed：壓縮後的css程式碼。

匯入檔案

@import指令，用來匯入外部檔案。

　　@import "path/filename.scss";

如果導入的是.css文件，則等同於css的import指令。

註解

sass有兩種註解方式，一種是標準的css註解方式/* */，另一種則是//雙斜桿形式的單行註釋，不過這種單行註釋不會被轉譯出來。

1 變數

SASS允許使用變數，所有變數以$開頭

普通變數

定義之後可以在全域範圍內使用。

預設變數

sass的預設變數只需要在值後面加上!default即可。

sass的預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在預設變數之前重新宣告下變數即可

#預設變數的價值在進行組件化開發的時候會非常有用。

特殊變數

一般我們定義的變數都為屬性值，可直接使用，但是如果變數作為屬性或在某些特殊情況下等則必須以#{$variables}形式使用。

多值變數

多值變數分為list型別和map型，簡單來說list型別有點像js中的陣列，而map類型有點像js中的物件

全域變數

在變數值後面加上!global即為全域變數。這個目前還用不上，不過將會在sass 3.4後的版本中正式應用。目前的sass變數範圍飽受詬病，所以才有了這個全域變數。

2 巢狀(Nesting)

sass的巢狀包含兩種：一種是選擇器的巢狀；另一種是屬性的巢狀。我們一般說起或用到的都是選擇器的嵌套。

在選擇器嵌套中，可以使用&表示父元素選擇器

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

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

@at-root：sass3.3.0新增的功能，用來跳出選擇器嵌套的。

3 混合(mixin)

sass中使用@mixin 宣告混合，可以傳遞參數，參數名稱以$符號開始，多個參數以逗號分開，也可以給參數設定預設值。宣告的@mixin 透過@include 來呼叫

多個參數mixin

可以直接傳入值，如@include 傳入參數的數量小於@ mixin 定義參數的個數，則依照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入參數，使用參數名稱與值同時傳入。

多組值參數mixin

如果一個參數可以有多組值，如box-shadow、transition等，那麼參數則需要在變數後面加上三個點表示，如$variables ....。

@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

 //sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}

** @mixin 透過@include 呼叫後解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯合宣告的方式存在的，所以從3.2 .0版本以後，建議傳遞參數的用@mixin ，而不是傳遞參數類別的使用下面的繼承%。 **

4 繼承

sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合宣告。使用選擇器的繼承，要使用關鍵字 @extend ，後面緊跟著需要繼承的選擇器。

佔位選擇器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过 @extend 调用。

占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

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

在 @media 中暂时不能 @extend @media外的代码片段，以后将会可以。

5 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位

7 条件判断及循环

@if判断

@if可一个条件单独使用，也可以和 @else 结合多条件使用

三目判断

if($condition, $if_true, $if_false)

for循环

for循环有两种形式，分别为：@for $var from

@each循环

语法为：@each $var in

多个字段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; 
}

以上是關於SASS的學習總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！