SASS初體驗

標籤（空格分隔）： sass scss csscss

1. 編譯環境 須要安裝Ruby,以後須要打開Start Command Prompt with Ruby運行html

gem install sass

2. 命令行編譯web

sass <要編譯的sass文件路徑>/style.scss:<要輸出css文件路徑>/style.css

多文件編譯 (必須用--watch?反正我不加watch就會報錯)api

sass --watch sass/:css/

開啓watch數組

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

輸出方式 --style [nested(末尾花括號不換行)|expanded(徹底展開)|compact(單行)|compressed(壓縮)]sass

sass --watch sass/:css/ --style compressed

3. 基本語法ruby

(1). 嵌套app

和less差很少。less

nav {
    color: blue;

    li {
        color: yellow;

        a {
            color: red;

            header & {
                color: green;
            }
        }
    }
}

編譯後ide

nav {
  color: blue;
}
nav li {
  color: yellow;
}
nav li a {
  color: red;
}
header nav li a {
  color: green;
}

屬性嵌套(相同屬性前綴), 並且前綴冒號後能夠加屬性

.box {
    font: 12px/24px {
        size: 12px;
        weight: bold;
    }
}

編譯後

.box { font: 12px/24px; font-size: 12px; font-weight: bold; }

僞類嵌套，和less一毛同樣

.clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
        overflow: hidden;
    }
}

編譯後

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

父選擇器&能夠做爲選擇器的第一個字符，好比

.btn {
    padding: 4px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    color: #333;

    &-primary {
        border-color: #ff5f00;
        background: #ff5f00;
        color: #fff;
    }
}

編譯後

.btn, .btn-primary { padding: 4px 12px; font-size: 16px; border: 1px solid #ddd; color: #333; }
.btn-primary { border-color: #ff5f00; background: #ff5f00; color: #fff; }

(2). 註釋

/**/會出如今編譯後文件中 amazing! //不會

// 方向
/*方向*/
$d: "right";
.box {
    @extend %border-#{$d};
}

/*位置*/

編譯後

.box {
  border-right: 2px solid #ddd;
}

/*方向*/
/*位置*/

(3). 變量

$[變量名]: [值] 塊級做用域 !global聲明能夠將局部轉變爲全局變量默認變量；普通變量會覆蓋默認變量

$size: 16px;
$size: 14px !default;
p.p-1 {
    font-size: $size;
}

編譯後 p.p-1{font-size:16px}

(4). 運算

+, -, *, /, % <, >, <=, >= 也可用於數字運算 ==, != 可用於全部數據類型不一樣單位不能做運算能夠進行字符串拼接；且有無引號根據左邊的決定除法須要在數學表達式中，兩個普通屬性須要用括號括起來，好比

.box {
    width: (100px / 2);
}

編譯後

.box {
  width: 50px;
}

插值語句包裹的變量不作除法運算

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

編譯後

p { font: 12px/30px; }

顏色計算分段(按照紅綠藍分別) 顏色函數其中fade-in($color, $amount)等方法, color參數只能爲rgba()顏色，不一樣於less

(5). 混合

用於定義可重複使用的樣式注意語法不帶點，參數默認值也同less同樣 @mixin [mixin-name]([$param1, $param2: default-value]) { ... } 使用: @include [mixin-name](value1, value2);
對於不定參數，使用 ..., 好比

@mixin box-shadow($shadows...) { 
    -moz-box-shadow: $shadows; 
    -webkit-box-shadow: $shadows; 
    box-shadow: $shadows; 
}

(6). 繼承

@extend .[class]
還能夠繼承任何定義給單個元素的選擇器，好比@extend a:hover;

.btn {
    border: 1px solid #999;
    padding: 4px 12px;
    font-size: 14px;
    background: #ddd;
    color: #333;
}

.btn-primary {
    background: #ff5f00;
    color: #fff;

    @extend .btn;
}

編譯後

.btn, .btn-primary {
  border: 1px solid #999;
  padding: 4px 12px;
  font-size: 14px;
  background: #ddd;
  color: #333;
}

.btn-primary {
  background: #ff5f00;
  color: #fff;
}

佔位符% 用佔位符聲明的代碼，不被@extend調用就不會被編譯相一樣式的會經過,合在一塊兒，減小代碼量

%box-padding {
    padding: 4px 12px;
}

.box {
    font-size: 14px;

    @extend %box-padding;
}

.box-2 {
    font-size: 18px;

    @extend %box-padding;
}

編譯後

.box, .box-2 {
  padding: 4px 12px;
}

.box {
  font-size: 14px;
}

.box-2 {
  font-size: 18px;
}

(7). 插值

經過 #{} 插值語句能夠在選擇器或屬性名中使用變量 #{$[param]}用法，能夠用在@each，@extend，多行註釋

$border-properties: (border);
@mixin set-border($direction, $val) {
    @each $prop in $border-properties {
        #{$prop}-#{$direction}: $val;
    }
}

.box {
    @include set-border(left, 1px solid #ddd);
}

編譯後

.box {
  border-left: 1px solid #ddd;
}

%border-right {
    border-right: 2px solid #ddd;
}

$d: "right";
.box {
    @extend %border-#{$d};
}

編譯後

.box {
  border-right: 2px solid #ddd;
}

(8). 導入

@import能夠導入多個文件，好比@import "rounded-corners", "text-shadow";
導入文件能夠經過url()的方式使用插值語句#{}，好比@import url("http://fonts.googleapis.com/css?family=\#{$family}");
若是想使一個sass文件只做爲導入文件，不進行編譯，在文件名前加_便可，好比文件命名爲_colors.scss，使用@import "colors";導入，注意文件夾下不能再有colors.scss文件。
能夠用在嵌套中，做用域就只在當前嵌套中了，很贊；可是不能夠在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

(9). 媒體查詢 @media

用法同css
能夠寫在嵌套中，編譯後將會編譯在最外層，且裏面的選擇器會是嵌套時候的選擇器好比

.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
        width: 500px;
    }
}

.sidebar { width: 300px; }
@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

media的查詢條件可使用插值語句
media的查詢條件能夠嵌套

(10). @at-root

將嵌套的選擇器提高到當前文檔最頂層，好比

.parent {
    font-size: 14px;

    @at-root .child-a {
        font-size: 16px;

        @at-root .child-c {
            font-size: 18px;
        }
    }

    .child-b {
        font-size: 12px;
    }
}

.parent { font-size: 14px; }
.child-a { font-size: 16px; }
.child-c { font-size: 18px; }
.parent .child-b { font-size: 12px; }

@at-root (without: [directive1 directive2 ...])能夠排除前面的指令
括號後面不能有選擇器，沒有括號必須有選擇器

@media .print {
    .page {
        width: 8in;
        @at-root (without: media) {
            color: red;
        }
    }
}
// 沒有without
@media print {
    .page {
        width: 8in;
        @at-root .p {
            color: red;
        }
    }
}

@media .print { .page { width: 8in; } }
.page { color: red; }

@media print { .page { width: 8in; }
  .p { color: red; } }

(11). 控制指令

主要與混合指令 (mixin) 配合使用, 這是less中所沒有的，less經過其它方式能夠實現相似的效果，好比循環，less能夠經過遞歸配合when關鍵字來實現：.loop(@counter) when (@counter > 0) { .loop((@counter - 1)); }
@if 表達式返回值不是 false 或者 null 時，執行 {} 內的樣式，一樣還有@else if和@else
@for 語法：@for $var from <start> through <end> 或者 @for $var from <start> to <end> <start> 和 <end> 必須爲整數 through 包含 <start> 和 <end> 的值，而 to 只包含 <start>
@each 語法： $var in <list> <list> 值爲列表好比

$arr: a, b, c, d, e;
@each $img in $arr {
    .box-#{$img} {
        background: url('/img/#{$img}.png') no-repeat;
    }
}

.box-a { background: url("/img/a.png") no-repeat; }

.box-b { background: url("/img/b.png") no-repeat; }

.box-c { background: url("/img/c.png") no-repeat; }

.box-d { background: url("/img/d.png") no-repeat; }

.box-e { background: url("/img/e.png") no-repeat; }

能夠循環多維數組，好比

$list: (aa, pen), (bb, apple), (cc, bag);
@each $var, $img in $list {
    .box-#{$var} {
        background: url('/img/#{$img}.png') no-repeat;
    }
}

.box-aa { background: url("/img/pen.png") no-repeat; }

.box-bb { background: url("/img/apple.png") no-repeat; }

.box-cc { background: url("/img/bag.png") no-repeat; }

使用map數組或許更爲明瞭：

$list-2: (aaa: yellow, bbb: blue, ccc: red);
@each $key, $color in $list-2 {
    .box-#{$key} {
        background: #{$color};
    }
}

.box-aaa { background: yellow; }

.box-bbb { background: blue; }

.box-ccc { background: red; }

@while 循環，語法：@while [conditions] { ... }

(12). 其它

@debug 能夠輸出信息到編譯器
@warn 將SassScript表達式的值打印到標準錯誤輸出流。
@error 拋出SassScript表達式的值做爲致命錯誤
@function 自定義函數

@function [function-name]([params]) {
    @return [value];
}

<small style="display: inline-block;background: #1cc333;color: #fff;padding-left: 5px;">The end... <i style="display: inline-block;background: #999;font-style: normal;padding-right: 5px;"> Last updated by: Jehorn, Mar 13, 2018, 12:10 PM</i></small>