SASS基礎(chǔ)教程

本文簡單的介紹SASS預(yù)處理語言，更多的應(yīng)用請參考官方文檔

一、什么是SASS

二、為什么使用SASS

三、安裝SASS

四、初次嘗試SASS

數(shù)據(jù)類型

SASS中有著如下數(shù)據(jù)類型：

  • 數(shù)字：1 2 3 10px
  • 字符串："foo" 'far' baz （注意baz為“無引號字符串”）
  • 顏色：blue #04a3f9 rgba(255, 0, 0, 0.5)
  • 布爾值：true false
  • 空值：null
  • 列表——用空格或者逗號分隔的一組值：1.5em 1em 0 2em, Helvetica, Arial
  • map——用小括號擴起的一組鍵值對集合($key1: value1, $key2: value2, …)
  • arglist——參數(shù)列表，函數(shù)中的變長參數(shù)

變量

  1. 定義變量：$var_name : value;

    SASS中變量的定義是寬松的，如果拿高級寫的語言來考量的話會有時而是字符串時而是數(shù)字的疑惑，所以不要那么做，你不需要講過多的注意力類型這一概念上。

    $grayColor : darken(#FFFFFF, 20%);
$width : 42px;

  2. 使用變量：SASS中的變量先聲明后引用，（下文中引用到的變量$widht, #grayColor在上文中已經(jīng)聲明，本文以此縮短排版，這并不嚴謹有時有點濫用需要結(jié)合上下文）

    div {
  color: $grayColor;
  width: $width;
}

    上面是SCSS代碼，下面是對應(yīng)的CSS代碼，全文如不特殊說明一律采用這種方式

    div {
  color: #cccccc;
  width: 42px;
}

  3. 變量的!default關(guān)鍵字（前面的！不能?。?/p>

    !default關(guān)鍵字表示：為該變量設(shè)置默認值，如果該變量已經(jīng)聲明過，則不改變原來值。

    $var1: 12;
$var1: 24 !default   // var的值保持12不變

    $var2: 24 !default   // 直接聲明并定義一個變量$var2，初始化值為24

  4. 局部變量與全局變量

    類似于大多數(shù)語言一樣，SASS中擁有局部變量與全局變量的概念，這么做可以避免變量名重復(fù)，引用或更改到了不想更改的其它變量，造成系統(tǒng)的混亂。不包含在選擇器，函數(shù)等塊級結(jié)構(gòu)之內(nèi)，直接在文件中聲明的變量稱之為全局變量，反之則為局部變量。

    $color: red;     //全局變量
.blk {
  color: $color; //引用全局的$color，值為red
}
em {
  $color: orange;
  div {
    color: $color;   //引用局部的$color，值為orange
  }
}

    .blk {
  color: red;
}

em div {
  color: orange;
}

列表

CSS中存在有margin: 10px 15px 0 0這類屬性，為了便于處理這類情況SASS中存在有列表的數(shù)值類型，有點類似于大多數(shù)語言中的數(shù)組，列表需要將不同的類型的值用逗號或者空格分隔開，對于列表，SASS提供了一些函數(shù)進行處理：

$margins: 2px 4px 0 0;

.btn {
  margin-top: nth($margins, 1); //列表的下標從1開始計算
}

.btn {
  margin-top: 2px;
}

運算符

  1. +

    加法可以用于基本的數(shù)字相加，字符串連接

    $width: 1px + 2in;
$str: 'Hello ' + world;
$margins: 12 12 12 1;

.btn {
  width: $width + 4pt;
  font: $str;
  margin: margins + 2;
}

    .btn {
  width: 198.33333px;    //不同的單位之間可以相加，但是不兼容的類型是不可以的，比如1px + 2em
  font: "Hello world";   //加法可以用于字符串的連接
  margin: margins2;
}

    TIPS: +用于字符串連接時結(jié)果是否有引號跟加號左邊的值保持一致，結(jié)果中的引號都會是雙引號（如果想去掉可以加一層#{}，或者使用unquote($string)函數(shù)），而數(shù)字，列表等類型跟字符串連接之前會被轉(zhuǎn)換成有引號字符串。結(jié)果是否有引號的規(guī)則還是按照前面所述。

  2. -

    減號自然不必多說，用于數(shù)值之間的減法，也需要操作數(shù)相互兼容，與+不同，-不支持字符串操作。

  3. *

    乘號需要左右兩個操作數(shù)至少有一個不帶單位，不然會產(chǎn)生錯誤

    .box {
  width: 10px * 2;
  height: 4 * 5pt;
  //height: 4pt * 5pt, 這么寫會報錯
}

    .box {
  width: 20px;
  height: 20pt;
}

  4. /

    除法有些特殊，因為在CSS中/已經(jīng)挪作他用，所以在下列幾種情況中才會有正常的表現(xiàn)，不然會作為CSS直接編譯。

    • 被()擴起來：(100px / 2)
    • 在表達式中：1px + 100px / 2 $width / 4 
    // xxx.scss
.btn {
 width: 100px /2;
}

    // xxx.css
.btn {
    width: 100px /2; //這里的除法被原封不動的保存了
}

  5. == != > < >= <=

    基本的布爾運算返回值為false或true

  6. if($condition, $if-true, $if-false)

    其實if不是一個運算符而是一個函數(shù)，類似于c語言中的條件運算符，if函數(shù)當$condition為真返回$if-true，否則返回$if-false，注意這里的if不同于控制流中的@if

注釋

注釋有以下兩種風(fēng)格

//這一段注釋并不會顯示在生成的CSS文件中
/*這一段注釋會顯示在生成的CSS文件中*/

嵌套

  1. 選擇器嵌套，這里的選擇器是CSS選擇器

    選擇器嵌套針對的是標簽的父子（包含）關(guān)系，如果B標簽在A標簽的內(nèi)部，那么使用選擇器嵌套語法再好不過，需要注意的是嵌套對可讀性的影響，避免濫用選擇器的嵌套。

    現(xiàn)在有一段HTML：

    <body>
 <div>
     <a href="##">Item1<a>
     <a href="##">Item2<a>
     <a href="##">Item3<a>
 </div>
</body>

    // xxx.scss
div {
  a {
    color: red;
    body & { //這里的&表示當前塊"div a"
                 //body在&的前面，需要提出到全局去解析，不然是沒有意義的
                 //也就是說這里是"body div a"，而不是"div a body div a"
      color: green;
    }
  }
}

    // xxx.css
div a {
  color: red;
}
body div a {
  color: green;
}

  2. 屬性嵌套

    屬性嵌套針對border-top這類使用-分割的屬性，可以使用嵌套凸顯層次性。

    .banner {
  border: {  //注意border后面的":"
    top: 1px solid red;
    bottom: 2px solid green;
  }
}

    .banner {
  border-top: 1px solid red;
  border-bottom: 2px solid green;
}

  3. 偽類嵌套

    偽類嵌套很類似于選擇器嵌套，需要借助&

    .banner {
  &:before, &:after {
    content: "";
    display: block;
  }
}

    .banner:before, .banner:after {
  content: "";
  display: block;
}

Mixin宏

可以使用“混入宏”打到樣式的復(fù)用的目的

  1. 定義混入宏

    • 不帶參數(shù)

      @mixin foo_bar {   //foo_bar為宏的名字
  -webkit-border-radius: 1px;
  -border-radius: 1px;
}

    • 帶參數(shù)

      @mixin foo_bar_with_arg($radius: 1px) { //參數(shù)$radius默認值1px
  -webkit-border-radius: $radius;
  -border-radius: $radius;
}

  2. 使用混入宏

    div {
  @include foo_bar_with_arg(2px);
}

    div {
  -webkit-border-radius: 2px;
  -border-radius: 2px;
}

繼承

SASS通過@extend關(guān)鍵字使用繼承，繼承可以復(fù)用已存在的樣式塊。

.button {
  border: 1px;
  font-size: 1.5em;
}
.btn {
  background-color: red;
  @extend .button;
}

.button, .btn { //相對于@Mixin直接的文本替換，@extend繼承顯得更加智能，生成的CSS更簡潔
  border: 1px;
  font-size: 1.5em;
}
.btn {
  background-color: red;
}

占位符%placeholder

如果我需要繼承一些CSS但是這些CSS不單獨存在某些標簽里該怎么辦？

%baz {  //不使用@extend調(diào)用的話%placeholder并不產(chǎn)生任何CSS代碼
  margin-top: 5px;
}
.btn {
  @extend %baz;
  margin-bottom: 10px;
}

#context a%foo {    //這種詭異的形式也不會直接產(chǎn)生代碼，需經(jīng)過@extend
  color: red;
  width: 42;
}

.someots {
  @extend %foo;
}

.btn {
  margin-top: 5px;
}

.btn {
  margin-bottom: 10px;
}

#context a.someots {
  color: red;
  width: 42;
}

插值#{}

插值是另一種本地替換的方式，有些類似于C語言中的宏定義

$arr: (top, bottom);
.btn {
  @each $item in $arr { //暫未提及這里的@each in循環(huán)結(jié)構(gòu)
    margin-#{$item}: 42px;
  }
}

.btn {
  margin-top: 42px;
  margin-bottom: 42px;
}

TIPS: 插值中又一點需要特別注意的是，所有的 <u>有引號字符串</u> 經(jīng)過插值會轉(zhuǎn)化為 <u>無引號字符串</u>

流程控制

  1. @if

    .block {
  @if 2 >= 3 {
    width: 200px;
  }
  @elseif 2 > 1 {
    width: 100px;
  }
  @else {
    width: 300px;
  }
}

    .block {
  width: 100px;
}

  2. @for

    for循環(huán)有兩種格式，分別以through，to兩個關(guān)鍵字區(qū)分，for循環(huán)可以生成一個范圍區(qū)間，并綁定一個變量給用戶。

    for $i from <start> through <end>: $i從<start>到<end>（不包括<start>）

    for $i from <start> through <end>: $i從<start>到<end>（包括<end>）

    @for $i from 1 through 3 {
  .block-#{$i} {
    width: 100px * $i;
  }
}

    .block-1 {
  width: 100px;
}

.block-2 {
  width: 200px;
}

.block-3 {
  width: 300px;
}

    循環(huán)可以極大的縮短CSS的代碼量，有時CSS中的選擇器可以達到效果，但是更多場景下靈活的SCSS利用循環(huán)可以極大的提高效率。

  3. @while

    @while用一個布爾量來決策循環(huán)是否結(jié)束。

    $i: 1;
@while $i <= 3 {
  .block-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

    .block-1 {
  width: 100px;
}

.block-2 {
  width: 200px;
}

.block-3 {
  width: 300px;
}

  4. @each

    @each $var in <list>: 遍歷一個列表，綁定列表中的值到$var上。

    $nums: red yellow green;
@each $color in $nums {
  .#{$color}_div {
    color: $color;
  }
}

    .red_div {
  color: red;
}

.yellow_div {
  color: yellow;
}

.green_div {
  color: green;
}

常用函數(shù)

  1. unquote($string) quote($string)

    這兩個函數(shù)分別為字符串去除引號（只去除兩端），添加雙引號。

  2. to-upper-case($string) to-lower-case($string)

    將字符串全部轉(zhuǎn)換成大／小寫。

  3. 一些數(shù)值函數(shù)

    percentage($value): 將不帶單位的數(shù)轉(zhuǎn)換成百分數(shù)

    round($value): 將數(shù)值四舍五入

    ceil($value): 返回一個不小于$value的整數(shù)

    floor: 返回一個不大于$value的整數(shù)

    abs($value): 返回$value的絕對值

    min($numbers...): 返回列表中最小的值

    max($numbers...): 返回列表中最大的值

    random(): 獲取一個隨機數(shù)

  4. 一些列表函數(shù)

    length($list): 返回列表長度

    nth($list, $n): 返回列表的第n個值

    join($list1, $list2, $separator: auto|comma|space): 合并兩個列表

    append($list, $val, $peparator: auto|comma|space): 為列表追加值

    zip($lists...): 將多個列表壓縮成多維度列表

    index($list, $val): 找到第一個與$val相等的值在$list中的下標p

  5. 一些map函數(shù)

    map-get($map, $key): 取得$map中$key鍵對應(yīng)的值，沒有則返回null

    map-has-key($map, $key): 判斷$map中是否有鍵$key

    map-keys($map): 返回$map中鍵的列表

    map-values($map): 返回$map中值的列表

    map-merge($map1, $map2): 返回包含$map1與$map2中所有鍵值對的一個新map

    map-remove($map, $key): 返回從$map中移除了$key為鍵的鍵值對的map

    keywords($args...): 按照給定的參數(shù)動態(tài)創(chuàng)建mapkeywords(c1: #fff, c2: #000)

  6. 內(nèi)省函數(shù)

    type-of($value): 返回值的類型

    unit($number): 返回數(shù)值的單位

    unitless($number): 判斷值是否有單位

    comparable($number-1, $number-2): 判斷兩個值是否可以相互比較

  7. 顏色函數(shù)

    rgb($red, $green, $blue): 生成RGB顏色

    rbga($red, $green, $alpha): 生成RGBA顏色

    rgba($color, $alpha): 返回$color改變透明度為$alpha之后的顏色

    red($color): 獲取$color的紅色分量

    green($color): 獲取$color的綠色分量

    blue($color): 獲取$color的藍色分量

    mix($color-1, $color-2, $weight: 0.5): 混合兩種顏色

    invert($color): 返回$color的反向色，rgb反向，alpha不變

    hsl: 生成HSL顏色

    hsla: 生成HSLA顏色

    hue($color): 返回$color的色相

    saturation($color): 返回$color的飽和度

    lightness($color): 返回$color的亮度

    adjust-hue($color, $degrees): 調(diào)整色相adjust-hue(#234f33, 45deg)

    lighten($color, $amount): 變量顏色

    darken($color, $amount): 變暗顏色

    saturate($color, $amount): 增強飽和度

    desaturate($color, $amount): 降低飽和度

    grayscale($color): 返回$color對應(yīng)的灰色

    complement($color): 返回與$color色相相反的顏色

    alpha($color): 獲取透明度

    opacity($color): 獲取透明度

    opacify($color, $amount): 降低透明度

    fade-in($color, $amount): 降低透明度

    transparentize($color, $amount): 增加透明度

    fade-out($color, $amount): 增加透明度

自定義函數(shù)

使用@function關(guān)鍵字定義函數(shù)，可以問函數(shù)提供一個參數(shù)列表，在其中可以設(shè)置缺省參數(shù)，或者變長參數(shù)，如果函數(shù)有返回值需要使用@return關(guān)鍵字。

@function foo($arg1, $arg2: 42, $args...) { //$arg2有默認值42，$args為變長參數(shù)
  @debug 'foo get $arg1: ' + $arg1;
  @debug 'foo get $arg2: ' + $arg2;
  @debug 'foo get $args: ' + $args;
  @return 0;
}
.btn {
  width: foo(234, 43, 234, 2, 34, 234)
}
/*
控制臺輸出
DEBUG: foo get $arg1: 234
DEBUG: foo get $arg2: 43
DEBUG: foo get $args: 234, 2, 34, 234
*/

@規(guī)則

SASS支持所有的CSS的@規(guī)則，以及一些自己的擴展，也稱為指令（directives）

  1. @import

    SASS擴展了CSS的@import規(guī)則，可以導(dǎo)入其他的SCSS文件，尋找文件的路徑可以是當前目錄，或者通過:load_path, —load-path配置

    以下幾種情況@import命令編譯為CSS原生規(guī)則

    • 導(dǎo)入文件擴展名為.css
    • 導(dǎo)入文件名以http://開頭
    • 文件名為url()
    • 如果@import包含媒體查詢
    @import "foo.css";               //后綴為css會編譯為原生規(guī)則
@import "foo.scss";
@import "foo";                   //導(dǎo)入文件可以不寫后綴
@import "filea", "fileb";        //導(dǎo)入多個文件
@import "_fileignorecompile" //文件名之前加上_則只導(dǎo)入文件，不進行編譯

  2. @media

    SASS中的@media可以嵌套在CSS規(guī)則中

       .block {
     width: 100px;
     @media screen and (orientation: landscape) {    //@media會浮出到最外層
       width: 200px;
     }
   }

   //@media 是可以嵌套的
   $media: screen;
   @media #{$media} {    //在@media中使用插值
     .btn {
       @media (orientation: landscape) {
         width: 500px;
       }
     }
   }

       .block {
     width: 100px;
   }
   @media screen and (orientation: landscape) {
     .block {
       width: 200px;
     }
   }

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

  3. @at-root

    at-root可以讓選擇器跳出到嵌套中

    .foo {
  color: red;
  
  .bar {
    color: blue;
    
    @at-root .baz {
      color: white;
    }
  }
}

    .foo {
  color: red;
}
.foo .bar {
  color: blue;
}
.baz {   //跳出了嵌套，不在層級結(jié)構(gòu)中
  color: white;
}

  4. @debug @warn @error

    用于向控制臺輸出不同信息

    @debug 'Hello, World!';
@warn 42;
@error 'ops' + here is some error;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 基礎(chǔ) 聲明變量 普通變量 默認變量 變量覆蓋：只需要在默認變量之前重新聲明下變量即可 變量的調(diào)用 局部變量和全局變...
    Jill1231閱讀 1,381評論 0贊 1
  • 1、SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里...
    夜幕小草閱讀 1,807評論 2贊 10
  • 再談CSS 預(yù)處理器2016-09-09 Justineo JavaScript轉(zhuǎn)自：http://efe.bai...
    抓住時間的尾巴吧閱讀 1,756評論 0贊 2
  • CSS 預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了越來越多的 CSS 的預(yù)處理器框架。本文向你介紹使用最為普遍的三...
    Mx勇閱讀 1,447評論 0贊 7
  • 如果付出了真 被回饋的是傷的深 又何必假裝 假如愛不能滿分 又何必贈與傷痕 如果愛情的火焰熄滅 就不必再有余溫 因...
    會哭de石頭閱讀 246評論 0贊 1

友情鏈接更多精彩內(nèi)容