CSS外掛：Sass 之規則(Rules)和指令(Directives)

honhon 發布于2019-08-30 12:55 / 2929人閱讀

摘要：根據文件名引入。這和指令非常相似，只要后面的條件為就會執行。被編譯為循環指令的形式，是個變量名，是一個表達式，他將返回一個列表值。被編譯為學完了回過頭來整理也真是麻煩，算是總結吧。

前戲：下面這些玩意還是比較實用的，好像是進階Sass必備的，以后寫起 CSS 要溜得飛起啊！

規則(Rules) 1. @import

Sass 擴展了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。 另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。

@import 根據文件名引入。默認情況下，它會尋找 Sass 文件并直接引入，但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則：

如果文件的擴展名是 .css。

如果文件名以 http:// 開頭。

如果文件名是 url()。

@import 包含了任何媒體查詢（media queries）

1.1 @import 幾種用法

@import "icon.scss"; //帶.scss,.sass擴展名

@import "icon"; //不帶擴展名，Sass會自動尋找帶有 .scss或 .sass 擴展名的同名文件并將其引入。

如果你有個 scss 文件需要引入，但你又不希望它被編譯成 CSS 文件，這時，你就可以在文件名前面加個_下劃線，就能避免被編譯。這將告訴 Sass 不要把它編譯成 CSS 文件。然后，你就可以像往常一樣引入這個文件了，而且還可以省略掉文件名前面的下劃線進行引用。

@import "_icons", "mixin"; //引入多個文件；

要注意的一點： 在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。例如， _icons.scss 不能與 icons.scss 并存。

2. @media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。

SCSS：

.box{
    font-size: 18px;
    @media screen and (max-width: 768px) and (min-width: 320px){
        width: 300px;
    }
    @media screen and (max-width:1024px) and (min-width: 768px){
        width: 600px;
    }
}

編譯為：

.box {
  font-size: 18px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
  .box {
    width: 300px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .box {
    width: 600px;
  }
}

3. @extend

SCSS：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

編譯為：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

4. @at-root

主要解決編譯出來的 css 選擇器嵌套過于嚴重問題；

SCSS：

.view{
    %public{ //使用了%placeholder，只有使用了@extend調用，才會生成代碼；
        content: "";
        display: block;
    }
    background-color: #e0e0e0;
    .view-head{
        &:after{
            @extend %public;
            border-bottom: 1px solid #e0e0e0;
        }
        @at-root .view-head-before{ //.view-head-before會被多帶帶提到一行;
            float: left;
        }
        @at-root .view-head-after{ //.view-head-after會被多帶帶提到一行;
            float: right;
        }
    }
    .view-footer{
        &:before{
            @extend %public;
        }
        color: #f00;
    }
}

編譯為：

.view { background-color: #e0e0e0; }
.view .view-head:after,
.view .view-footer:before { content: ""; display: block; }
.view .view-head:after { border-bottom: 1px solid #e0e0e0; }
.view-head-before { float: left; }
.view-head-after { float: right; }
.view .view-footer { color: #f00; }

5. @debug, @warn, @error

@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug；

@warn and @debug功能類似，在這不舉栗子了，浪費高度。

SCSS：

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block {
  @include blockOrHidden; //默認是true；
}
.hidden{
  @include blockOrHidden(false);
}

命令行輸出：

3 DEBUG: $boolean is true.
7 DEBUG: $boolean is false.

指令(Directives) 1. @if @else

@if 指令是一個 SassScript，它可以根據條件來處理樣式塊，如果條件為 true 返回一個樣式塊，反之 false 返回另一個樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。下面直接看栗子：

1.1 控制偽元素的content值

SCSS：

@mixin elseif($selector, $value){
    #{$selector}{
        $text: $value;        
        @if $text == google {
            content: "#{$text}";
            @debug "$text is #{$text}"; //在命令行會顯示：DEBUG: $text is google.
        }@else if $text == facebook{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }@else if $text == wechat{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }@else if $text == twitter{
            content: "#{$text}";
            @debug "$text is #{$text}";
        }
    }
}
@include elseif("div:before","google");
//（別嫌SCSS寫得這么多，而最后輸出就一行代碼）
// 在實際項目中玩起來是很愉快的！

編譯輸出：

.box:before { content: "google"; }

1.2 控制元素顯示隱藏的栗子

SCSS：

@mixin showOrhide($Boolean: true){
    @if $Boolean{
        display: block;
    }@else{
        display: none;
    }
}
.db{ @include showOrhide(); } //默認true;
.dn{ @include showOrhide(false); }

編譯輸出：

.db { display: block; }
.dn { display: none; }

2. @for 兩種用法

$i => 變量，s => 起始值，e => 結束值；

2.1 @for $i from [s] through [e]

SCSS：

@for $i from 1 through 2{ //through循環出來的值包括end值
    .box-#{$i}{
        width: 20px * $i;
    }
}

編譯為：

.box-1 { width: 20px; }
.box-2 { width: 40px; }

2.2 @for $i from [s] to [e]

SCSS：

@for $i from 1 to 2{ //to循環出來的值不包括end值
    .icon-#{$i}{
        font-size: 16px * $i;
    }
}

編譯為：

.icon-1 { font-size: 16px; }

2.3 和Interpolation#{}一起玩

SCSS：

$bgc: blue, green, red, yellow;
@for $i from 1 to length($bgc){
    .bgc-#{nth($bgc, $i)}{
        background-color: #{nth($bgc, $i)};
    }
}
//上面說過to循環不包括end值，所以編譯后只有3個class;

編譯為：

.bgc-blue {
  background-color: blue;
}
.bgc-green {
  background-color: green;
}
.bgc-red {
  background-color: red;
}

2.4 @for生成個網格

SCSS：

$elem: div;
$grid-width: 60px;
$grid-clear: 20px;
%grid{
    float: left;
    margin:0 $grid-clear/2 0 $grid-clear/2;
    //margin:0 ($grid-clear/2) 0 ($grid-clear/2); //覺得看得有點亂也可以加上括號；
}
@for $i from 1 through 6{ //through
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

用to編譯出來的也是一樣的css，主要區別于[e]的取值不同；下面這段代碼的[e]值是7，而to方式的結束值是不包括最后一位的，所以to方式生成出來的css也是一樣。

@for $i from 1 to 7{ //to
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

編譯為：

.div-1, .div-2, .div-3, .div-4, .div-5, .div-6 { float: left;  margin: 0 10px 0 10px; }
.div-1 { width: 60px; }
.div-2 { width: 140px; }
.div-3 { width: 220px; }
.div-4 { width: 300px; }
.div-5 { width: 380px; }
.div-6 { width: 460px; }

3. @while

@while 指令也需要 SassScript 表達式，并會生成不同的樣式塊，直到表達式值為 false 時停止循環。這和 @for 指令非常相似，只要 @while 后面的條件為 true 就會執行。

SCSS：

$s: 12;
@while $s > 0{
    .fs-#{$s + 12}{
        font-size: $s + 12px;
    }
    $s: $s - 2;
}

被編譯為：

.fs-24 { font-size: 24px; }
.fs-22 { font-size: 22px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }

4. @each

@each 循環指令的形式 @each $var in ，$var 是個變量名， 是一個 SassScript 表達式，他將返回一個列表值。

SCSS：

$list: checked, user, login, note, down, more;
@mixin icon-list{
    @each $i in $list{
        .icon-#{$i}{
            background-image: url("../images/#{$i}.png");
        }
    }
}
.icon{
    background-repeat: no-repeat;
    @include icon-list;
}

被編譯為：

.icon { background-repeat: no-repeat; }
.icon .icon-checked { background-image: url("../images/checked.png"); }
.icon .icon-user { background-image: url("../images/user.png"); }
.icon .icon-login { background-image: url("../images/login.png"); }
.icon .icon-note { background-image: url("../images/note.png"); }
.icon .icon-down { background-image: url("../images/down.png"); }
.icon .icon-more { background-image: url("../images/more.png"); }

Reference API

SASS_REFERENCE — Sass Documentation #Directives

學完了回過頭來整理也真是麻煩，算是總結吧。

GPU云服務器云服務器 directives 串口指令和數據 sass Rules

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115169.html

CSS外掛：Sass 之混合宏(@mixin)、繼承(@extend)、占位符(%placehold

摘要：普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧混合宏如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。不足如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余。學習Sass無非就是想高效的、面向對象編寫CSS，Sass中的@-Rules也是重要的一部分。普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧！ 1. 混合宏@mixin 如果你的...

or0fun 2019-08-30 12:54 評論0 收藏0
sass的學習記錄

摘要：核心團隊不懈努力，一直使其保持領先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉換為全局變量可以添加聲明編譯為默認變量的默認變量僅需要在值后面加上即可。 sass簡介 SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。世界上最成熟、最穩定、最強大的專業級CSS擴展語言！兼容C...

xuweijian 2019-08-29 14:21 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
CSS外掛：Sass 之運算（加、減、乘、除）

摘要：例如被編譯為最后一個栗子字符運算運算符可以用來連接字符串被編譯為注意，如果有引號的字符串被添加了一個沒有引號的字符串也就是，帶引號的字符串在符號左側，結果會是一個有引號的字符串。學習Sass無非就是想高效的、面向對象編寫CSS，Sass中的Operations也是重要的一部分。現在的前端各種工程化、模塊化、面向工資編程，哦...不對，是面向對象編程。玩起來吧！ 1. 加減法加減法...

khs1994 2019-08-30 12:53 評論0 收藏0
Webpack入門——使用Webpack打包Angular項目的一個例子

摘要：一什么是是一個前端的模塊管理工具，以下是的官網，一進入官網可以看到下面這張大圖這張圖基本上解釋了是用來干嘛的，將一些相互依賴的模塊文件，打包成一個或多個文件，減少請求次數，提升性能。希望這篇文章可以幫助大家入門。 (一)什么是Webpack 　　Webpack是一個前端的模塊管理工具(module bundler)，以下是webpack的官網：http://webpack.github...

pakolagij 2019-08-19 17:29 評論0 收藏0