sass的學習記錄

caoweiju發表於2018-01-25

sass簡介

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言！

相容CSS:
Sass完全相容所有版本的CSS。我們對此嚴格把控，所以你可以無縫地使用任何可用的CSS庫。
特性豐富:
Sass擁有比其他任何CSS擴充套件語言更多的功能和特性。Sass核心團隊不懈努力，一直使其保持領先地位。

語法

sass和scss兩種方法：

Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行擴充，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支援大多數 CSS hacks 寫法以及瀏覽器字首寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為擴充名。

另一種也是最早的 Sass 語法格式，被稱為縮排格式 (Indented Sass) 通常簡稱 “Sass”，是一種簡化格式。它使用 “縮排” 代替 “花括號” 表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮排格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方採取了不同的表達方式，具體請檢視 the indented syntax reference。這種格式以 .sass 作為擴充名。

使用

  1. 完全相容 CSS3
  2. 在 CSS 基礎上增加變數、巢狀 (nesting)、混合 (mixins) 等功能
  3. 通過函式進行顏色值與屬性值的運算
  4. 提供控制指令 (control directives)等高階功能
  5. 自定義輸出格式

巢狀規則

簡單的巢狀如下：

body{
    font-size: 12px;
    footer{
        color: red;
    }
}

會被編譯成如下css：

body{
    font-size: 12px;
}
body footer{
    color: red;
}

其中每一級都可以使用正常的css樣式選擇器，包括基本型別選擇器、結合選擇器、偽類選擇器、偽元素選擇器。

&自身選擇器

body{
    &.app{
        font-size: 12px;
    }
}

編譯成 自身選擇器：

body.app{
        font-size: 12px;
    }

:屬性巢狀

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

編譯為

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

%佔位符

從sass 3.2.0以後就可以定義佔位選擇器%。這種選擇器的優勢在於：如果不呼叫則不會有任何多餘的css檔案，避免了以前在一些基礎的檔案中預定義了很多基礎的樣式，然後實際應用中不管是否使用了@extend去繼承相應的樣式，都會解析出來所有的樣式。佔位選擇器以%標識定義，通過@extend呼叫。

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
    clear: both;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

編譯後的結果：

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

如上程式碼，定義了兩個佔位選擇器%ir和%clearfix，其中%clearfix這個沒有呼叫，所以解析出來的css樣式也就沒有clearfix部分。佔位選擇器的出現，使css檔案更加簡練可控，沒有多餘。所以可以用其定義一些基礎的樣式檔案，然後根據需要呼叫產生相應的css。
ps：在@media中暫時不能@extend @media外的程式碼片段，以後將會可以。

註釋

  • 多行註釋 /* */
  • 單行註釋 //

匯入@import

sass的匯入(@import)規則和CSS的有所不同，編譯時會將@import的scss檔案合併進來只生成一個CSS檔案。但是如果你在sass檔案中匯入css檔案如@import `reset.css`，那效果跟普通CSS匯入樣式檔案一樣，匯入的css檔案不會合併到編譯後的檔案中，而是以@import方式存在。
所有的sass匯入檔案都可以忽略字尾名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss。這種檔案在匯入的時候可以不寫下劃線，可寫成@import “mixin”。

//被匯入sass檔案a.scss：
//a.scss
//-------------------------------
body {
  background: #eee;
}

//需要匯入樣式的sass檔案b.scss：
@import "reset.css";
@import "a";
p{
  background: #0982c1;
}

轉譯出來的b.css樣式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

根據上面的程式碼可以看出，b.scss編譯後，reset.css繼續保持import的方式，而a.scss則被整合進來了。

指令碼SassScript

在 CSS 屬性的基礎上 Sass 提供了一些名為 SassScript 的新功能。 SassScript 可作用於任何屬性，允許屬性使用變數、算數運算等額外功能。
通過 interpolation，SassScript 甚至可以生成選擇器或屬性名，這一點對編寫 mixin 有很大幫助。

變數

變數以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣：

$width: 5em;
//直接使用即呼叫變數：
#main {
  width: $width;
}

變數支援塊級作用域，巢狀規則內定義的變數只能在巢狀規則內使用（區域性變數），不在巢狀規則內定義的變數則可在任何地方使用（全域性變數）。將區域性變數轉換為全域性變數可以新增 !global 宣告：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
//編譯為
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

預設變數

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

$baseLineHeight: 2;
$baseLineHeight:  1.5 !default;

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

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

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

資料型別 (Data Types)

SassScript 支援 6 種主要的資料型別：

  • 數字，1, 2, 13, 10px
  • 字串，有引號字串與無引號字串，”foo”, `bar`, baz
  • 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布林型，true, false
  • 空值，null
  • 陣列 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相當於 JavaScript 的 object，(key1: value1, key2: value2)

運算

所有資料型別均支援相等運算 == 或 !=，此外，每種資料型別也有其各自支援的運算方式。

  • 其中數字運算可以使用，SassScript 支援數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。關係運算 <, >, <=, >= 也可用於數字運算，相等運算 ==, != 可用於所有資料型別。

  • / 在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的擴充當然也支援這個功能，同時也賦予了 / 除法運算的功能。也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯後的 CSS 檔案中也是同樣的作用。以下三種情況 / 將被視為除法運算子號：

    • 如果值，或值的一部分，是變數或者函式的返回值
    • 如果值被圓括號包裹
    • 如果值是算數表示式的一部分
  • 顏色值運算 (Color Operations):顏色值的運算是分段計算進行的，也就是分別計算紅色，綠色，以及藍色的值,計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09：
    p {
      color: #010203 + #040506; //#050709
    }

  • 字串運算 (String Operations):如果有引號字串（位於 + 左側）連線無引號字串，運算結果是有引號的，相反，無引號字串（位於 + 左側）連線有引號字串，運算結果則沒有引號。

    p:before {
    content: “Foo ” + Bar;
    font-family: sans- + “serif”;
    }
    //編譯為
    p:before {
    content: “Foo Bar”;
    font-family: sans-serif;
    }
    運算表示式與其他值連用時，用空格做連線符：
    margin: 3px + 4px auto; // margin: 7px auto;
    在有引號的文字字串中使用 #{} 插值語句可以新增動態的值：
    content: “I ate #{5 + 10} pies!”; //content: “I ate 15 pies!”;

  • 布林運算 (Boolean Operations): SassScript 支援布林型的 and or 以及 not 運算。

@-Rules 與指令 (@-Rules and Directives)

@import的使用

Sass 擴充了 @import 的功能，允許其匯入 SCSS 或 Sass 檔案。被匯入的檔案將合併編譯到同一個 CSS 檔案中，另外，被匯入的檔案中所包含的變數或者混合指令 (mixin) 都可以在匯入的檔案中使用。
通常，@import 尋找 Sass 檔案並將其匯入，但在以下情況下，@import 僅作為普通的 CSS 語句，不會匯入任何 Sass 檔案。

  1. 檔案擴充名是 .css；
  2. 檔名以 http:// 開頭；
  3. 檔名是 url()；
  4. @import 包含 media queries。

@extend

使用 @extend 可以告訴 Sass 將一個選擇器下的所有樣式繼承給另一個選擇器。可以多次繼承傳遞，
暫時不可以將選擇器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸給其他元素，但是，卻可以將其他元素延伸給選擇器列

有時會遇到複雜的情況，比如選擇器列中的某個元素需要延伸給另一個選擇器列，這種情況下，兩個選擇器列需要合併，

Sass 引入了“佔位符選擇器” (placeholder selectors)，看起來很像普通的 id 或 class 選擇器，只是 # 或 . 被替換成了 %。可以像 class 或者 id 選擇器那樣使用，當它們單獨使用時，不會被編譯到 CSS 檔案中。

控制指令

類似@each @if @if @for @else if @extend @include等指令完全把css的書寫變得很靈活，可以像正常的程式設計一樣的去處理樣式。

注意

一般的模式是一個index.scss入口檔案來不斷的引入@import其他的模組，建議的方式：

//index.scss
@charset `utf-8`;
@import `./core/veriables.scss`;
@import `./core/reset.scss`;
@import `./core/mixin.scss`;
@import `./core/extend.scss`;
@import `./core/base.scss`;
@import `./core/m-head.scss`;
@import `./core/m-body.scss`;
@import `./core/m-fot.scss`;

//reset.scss
瀏覽器初始化樣式
//veriables.scss
sass變數
//mixin.scss
mixin指令
//extend.scss
佔位符
//base.scss
基礎樣式
//m-head.scss
頁面頭部
//m-body.scss
頁面中間
//m-foot.scss
頁面底部

需要注意：

  • 所有的scss都會被引入到index.scss內，然後一起編譯；
  • 注意作用域，在一些全域性模組定義的變數、指令、佔位符可以被其他的頁面樣式模組引用；
  • 如果頁面樣式的頭部重新定義了mixin、變數將會發生覆蓋；

本文僅僅是一個學習筆記，比較的雜亂

所有的全域性方法

相關文章