SASS用法詳解

時間  2019-12-07
標籤 sass 用法 詳解 简体版
原文   原文鏈接

SASS 是 CSS 預處理器的簡稱。本文太長，工做中用的最多的就是嵌套混合和集成，能夠搜索來跳轉！css

SASS 編譯環境 (SASS 最終須要編譯爲 CSS 才能運行)

  • koala (一款擁有圖片界面的編譯工具，已中止更新)

  • 命令行的方式編譯（推薦）：es6

    • 先安裝Ruby環境 https://rubyinstaller.org/sass

      • 安裝路徑中不能有中文，和特殊符號
      • ruby 必定要添加到環境變量
    • gem install sass Ruby環境安裝後，執行此命令安裝 sass 預處理器

SASS 文件後綴是.scss

sass中的註釋

//這樣的註釋不會被編譯

/* 
* 這樣的註釋會被編譯到輸出文件中
*/

SASS 基本 .scss 文件的編譯命令

sass style.scss style_out.css

SASS --watch 監聽指定單文件或文件夾

監聽單個文件

sass --watch style.scss:style_out.css

監聽文件夾

sass --watch somefolder:somefolder_out

其中somefolder爲執行命令目錄下的文件夾，輸出文件夾somefolder_out名稱自定義，沒有的話會自動建立ruby

　SASS 四種輸出模式

  1. 嵌套輸出方式 nested
  2. 展開輸出方式 expanded
  3. 緊湊輸出方式 compact
  4. 壓縮輸出方式 compressed

以 style.scss 文件爲例koa

@charset "utf-8";
#box{
    width:400px;
    height:400px;
    border:1px solid gray;
    h1{
        font-size:22px;
        color:red;
    }
    p{
        font-size:18px;
        color:green;
    }
}
  1. 嵌套輸出方式，命令爲 sass style.scss:style.css --style nested 
#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray; }
  #box h1 {
    font-size: 22px;
    color: red; }
  #box p {
    font-size: 18px;
    color: green; }/*代碼有縮進*/
  1. 展開輸出方式經常使用，命令爲 sass style.scss:style.css --style expanded 
#box {
  width: 400px;
  height: 400px;
  border: 1px solid gray;
}
#box h1 {
  font-size: 22px;
  color: red;
}
#box p {
  font-size: 18px;
  color: green;
}/*代碼沒有縮進，和咱們日常編寫的css格式同樣*/
  1. 緊湊輸出方式，命令爲 sass style.scss:style.css --style compact 
#box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }/*一條規則佔一行*/
  1. 壓縮輸出方式，命令爲 sass style.scss:style.css --style compressed 
#box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}
/*一條規則佔一行*/

SASS變量和做用域

e.g.仍是在style.scss中函數

@charset "utf-8";
$width:300px;
$height:200px;
$bgc: red;//變量多值如何調用？ 
//$bgc: red, pink; background-color:nth($bgc, 1);取第一個變量red
//$bgc: red, pink; background-color:nth($bgc, 2);取第二個變量pink
$color: #666;
$yahei: '"Microsoft YaHei", "微軟雅黑"';
$bor:10px solid red;//sass容許多值變量

變量做用域工具

$color:red;
body {
$color:blue;
//選擇器內部的$color變量會把外部的$color覆蓋，和js差很少
//同時，選擇器內部的變量，外部沒法調用
}

SASS 嵌套語法

  • 選擇器嵌套
  • 屬性嵌套(瞭解便可，用途不大)
  • 跳出嵌套，@at-root 既然要跳出，直接寫成全局樣式也能夠的，因此這應該是特殊狀況下使用的！

嵌套是SASS裏面最好用的東西，咱們能夠按照DOM結構的層級關係來寫css樣式字體

//選擇器嵌套
body {
 p {
   font-size: 16px;
 }
}
//屬性嵌套加 在屬性前綴加冒號 如font: 
//相似像font-size:16px;font-color:#ccc;font-style:normal;font-weight:bold;能夠寫成
.box {
  font: {
    size: 16px;
    color: #ccc;
    style: normal;
    weight: bold;
  }
}
//單個選擇器跳出
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//多個選擇器跳出
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

//其實@at-root是有一個默認值@at-root(without:rule)
//除此以外，它還有四個值
//一、all（表示全部）
//二、rule（表示常規css）
//三、media（表示media）
//四、support（表示support，由於@support目前還沒法普遍使用，因此在此不表示）。

@at-root (without: …)和@at-root (with: …)

/*跳出父級元素嵌套*/
@media print {
    .parent1{
        color:#f00;
        @at-root .child1 {
            width:200px;
        }
    }
}

/*跳出media嵌套，父級有效*/
@media print {
    .parent2{
        color:#f00;
        @at-root (without: media) {
            .child2 {
                width:200px;
            }
        }
    }
}

/*跳出media和父級*/
@media print {
    .parent3{
        color:#f00;
        @at-root (without: all) {
            .child3 {
                width:200px;
            }
        }
    }
}

css結果是url

@charset "UTF-8";
/*跳出父級元素嵌套*/
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}

/*跳出media嵌套，父級有效*/
@media print {
  .parent2 {
    color: #f00;
  }
}

.child2 {
  width: 200px;
}

/*跳出media和父級*/
@media print {
  .parent3 {
    color: #f00;
  }
}

.child3 {
  width: 200px;
}

@at-root與 & 配合使用

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

css輸出spa

.parent .child {
  color: #f00;
}

@mixin 聲明混合，可理解爲js中的函數。

@mixin 和 @include是成對出現的，就像js中的定義函數和調用函數成對出現同樣。

//聲明混合
@mixin bgc() {
  opacity: #f00;
}

//在選擇器內可使用@include調用混合
.demo {
  @include bgc();
}

@mixin 混合傳參和默認參數

//聲明混合，不帶參數。正常使用，沒毛病

//聲明混合，帶參數，調用混合時不傳參數，編譯後的文件會報錯

//聲明混合，帶參數。正常使用，沒毛病！

//混合中參數有默認值，調用時候的參數是可選的！

//混合中，形參加三個點的運算符@mixin bgc($bgc...),調用時能夠傳遞多個參數。有點相似js中的展開運行符
//只不過SASS中是將三個點寫在後面，js中是寫在前面
//聲明混合
@mixin bgc($bgc) {
  opacity: $bgc;
}

.demo {
  @include bgc(#f00);
}

混合中默認參數的寫法

//聲明混合
@mixin bgc($bgc:#00f) {
  opacity: $bgc;
}

//傳參時，默認參數不生效，不傳參數的時候，默認值生效
.demo {
  @include bgc(#f00);
}

if else if 條件判斷

$type: audi;
p {
  @if $type == benz {
    color: red;
  } @else if $type == mahindra {
    color: blue;
  } @else if $type == audi {
    color: green;
  } @else {
    color: black;
  }
}

css中輸出爲

p {
  color: green; 
}

經過sass的@if,@else if語法,根據傳入參數,實現動態輸出css樣式

// 畫三角形@mixin聲明
@mixin sj($fx:top,$size:100px,$color:red){

  @if ($fx == top) {
    border-color: transparent transparent $color transparent;
    border-style: dashed dashed solid dashed;
  }
  @else if($fx == right){
    border-color: transparent transparent transparent $color;
    border-style: dashed dashed dashed solid;
  }
  @else if($fx == bottom){
    border-color: $color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  }
  @else if($fx == left){
    border-color: transparent $color transparent transparent;
    border-style: dashed solid dashed dashed;
  }

  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: $size;

}

//mixin的調用
.demo{
  @include sj(left);
}

編譯後的css

.demo {
  border-color: transparent red transparent transparent;
  border-style: dashed solid dashed dashed;
  width: 0px;
  height: 0px;
  overflow: hidden;
  border-width: 100px; }

SASS 繼承 中的 @extend

@extend讓你可以在多個選擇器中經過繼承的方式共享一段樣式:
有個問題就是, 若是你不可能用到.fl這個類,而它仍是會出如今輸出結果中！
佔位符選擇器% 能夠解決這個問題

.fl {
  float: left;
}

.box {
 @extend .fl
}
//輸出的css爲
.fl .box {
  float: left;
}

佔位符選擇器%

zoom:1是兼容IE6，7而設置的,後面的屬性 IE6 IE7能識別，IE8 IE9……都不能識別；"_"後面的屬性，只有IE6能識別，其餘版本（IE7 8 9 更高級別）都不能識別 
%clearfix {
  *zomm: 1;//由於ie6,ie7不能用after或者before僞類
  &:after,
  &:before {
    content: ".";
    clear: both;
    display: block;
    overflow: hidden;
    font-size: 0;
    height: 0; 
  }
}
//上面百分號定義的選擇器，能夠在其它選擇器中直接使用，
//而百分號選擇器是不會被編譯到最後的css中去的
.container {
    width; 100px;
    height: 100px;
    @extend %clearfix
     
}

字符串插值#{$XXX},這和es6的字符串模板插值${XXX}很是類似

{}插值符號的做用有兩個

  • 一個是字符串插值
  • 另外一個是避免運算
$img: '../images/';

.content {
  background: url(#{$img}10086.jpg) left top no-repeat;
}

SASS中屬性的值能夠進行運算，運算符的先後必需要有空格，不然報錯

$color: #f00;
//能夠寫成
$color: #f00 + 100;//rgb(255+100, 0+100, 0+100),這就是它的原理，255加任何值都爲255

{}避免運算的例子

$size1 = 12px;
$size2 = 24px;
p {
  color: red;
  font: 12px / 24px "Microsoft YaHei"
}
//這裏表示p元素會顯示爲12px，行高爲24像素 的微軟雅黑字體，
//可是當咱們用變量的時候
p {
  color: red;
  font: $size1 / $size2 "Microsoft YaHei"
}
//輸出結果是
p {
color: red;
font: 0.5 "Microsoft YaHei";
}
//這裏的0.5顯然不是咱們想要的，能夠用插值符號#{}避免運算
p {
  color: red;
  font: #{$size1} / #{$size2} "Microsoft YaHei"
}

for 、while、each循環

  • @for $i from 1 through 10
  • @for $i from 1 to 10 這兩個for之間惟一 的區別是through能夠取到10，而to的語句只能取到9
@for $i from  1 through 10 {
   .item#{$i}{
       width: 10px * $i
    }
}
//輸出爲
.item1 {width: 10px;}
.item2 {width: 20px;}
...

.item10 {width: 100px;}

while 循環

$a: 5;
@while($a<20) {
    .item#{$a} {
      width: 20px *　$a;
    }
    $a: $a+1;
}

@each

$icon_name: user, pass, checked,select;
@each $i in $icon_name {
  .icon_#{$i} {
  width: 10px;
  }
}
//輸出爲
.icon_user { width: 10px; }
.icon_pass { width: 10px; }
.icon_checked { width: 10px; }
.icon_select { width: 10px; }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程