scss學習

cpupro 發布于2019-08-02 16:00 / 2314人閱讀

摘要：和的區別文件擴展名不同和是以嚴格縮進式語法規則來書寫的，不帶大括號和分號而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個感嘆號，表示這是重要注釋。重要聲明繼承允許一個選擇器，繼承另一個選擇器，使用命令。

1. SASS和SCSS的區別

文件擴展名不同：“.sass”和“.scss”；

SASS是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和CSS書寫語法類似。

2. 安裝

先安裝Ruby(http://rubyinstaller.org/down...

通過命令安裝sass: 打開命令終端，輸入：gem install sass

3. sass編譯

3.1 單文件編譯

sass <編譯的sass文件路徑>/xx.scss: <輸入的css路徑>/xx.css
sass input.scss:output.css

3.2 多文件編譯

sass src/sass/:dist/css/

上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些 CSS 文件都放在項目中“css”文件夾中。

3.3 SASS提供四個編譯風格的選項：

nested：嵌套縮進的css代碼，它是默認值。

expanded：沒有縮進的、擴展的css代碼。

compact：簡潔格式的css代碼。

compressed：壓縮后的css代碼。

在編譯的時候帶上參數" --style expanded":

在生產環境中，一般使用最后一個

sass --style compressed test.sass test.css

3.4 watch監控sass文件或目錄

  // watch a file
　sass --watch input.scss:output.css
　// watch a directory
　sass --watch app/sass:public/css

官方在線工具 https://www.sassmeister.com/

用法 1. 變量

sass允許使用變量，所有變量以$開頭。

普通變量聲明后在全局范圍內可使用
默認變量在值的后面加上!default即可

$side: left;

如果變量需要嵌套在字符串之中，就必須需要寫在#{}之中:

$side: left;
.rouned {
    border-#{$side}-radius: 3px;
}

2. 加減乘除

sass允許在代碼中使用算式：

body {

    margin:(14px/2);
    top: 50px + 100px;   // 變量或屬性均可以
    right: $var * 10%;
    left: 10px * 2px; // 報錯
    left: 10px * 2; // 正確
}

注意，sass除法較為特殊.如果除式中沒有變量或者不是在一個數學表達式中（有加法減法等），就要將除式運算用小括號括起來，否則“/”不會被當做除號運算。

p {
  font: 10px/8px; // 純CSS，不是除法運算
  width: $width/2;  // 使用了變量，是除法運算
  width: round(1.5)/2;  // 使用了函數，是除法運算
  height: (500px/2); // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

3. 嵌套

3.1 選擇器嵌套

div h1 {
    color: red;
}



// 可以寫成如下：
div {
    h1 {
        color: red;
    }
}

在嵌套的代碼塊中，可以使用&引用父元素

a {
    &:hover {  
        color: red;
    }
}

3.2 屬性嵌套

如border-color、font系列等

p {
    border: {
        color: red;
    }
    
    font: {
        size: 12px;
        weight: 700;
    }
}

注意，border必須加上冒號：

4. 注釋

SASS共有兩種注釋風格。

標準的CSS注釋:

/* comment */ ，會保留到編譯后的文件。

單行注釋:

// comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用于聲明版權信息。

/*!
    重要聲明
*/

5. 繼承 @extend

SASS允許一個選擇器，繼承另一個選擇器，使用@extend命令。比如，現有class1：

.class1 {
    border: 1px solid #ffffd;
}

.class2 {
　　@extend .class1;
　　font-size:120%;
　　}

注意：要繼承的不僅僅是類選擇器，可以是id選擇器也可以是標簽選擇器，也可以是某個狀態，任何選擇器都能繼承。

此外，可以用占位符%構建只用來繼承的選擇器。
用占位符%聲明的代碼，如果不被@extend調用就不會被編譯，也不會渲染到CSS的規則集中。

%br5 {
    border-radius: 5px;
}
// 使用@extend調用：
.btn {
    @extend %bt5;
}

// 編譯后
.btn {
    border-radius: 5px;
}

6. Mixin混合宏

Mixin有點像C語言的宏（macro），是可以重用的代碼塊。

首先，使用@mixin命令，定義一個代碼塊。

@mixin left {
　　float: left;
　　margin-left: 10px;
}

其次，使用@include調用

div {
　　@include left;
}

mixin的強大之處，在于可以指定參數和缺省值。

@mixin left($value: 10px) {
　　float: left;
　　margin-right: $value;
　　}

7. 插入/引入外部文件

@import命令，用來插入外部文件。

@import "path/filename.scss";

8. 條件語句

@if語句

@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

9. 循環

@for循環

@for $i from 1 to 10 {
　　.border-#{$i} {
　　    border: #{$i}px solid blue;
　　}
}

@while循環

$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

@each命令

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

10. 自定義函數

　　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

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

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

SCSS學習筆記（一）

摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發的層疊樣式表語言。年發行，年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。 SCSS的由來 SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起 SASS Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Ha...

simpleapples 2019-08-29 16:37 評論0 收藏0
sass的學習記錄

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

xuweijian 2019-08-29 14:21 評論0 收藏0
scss學習

摘要：和的區別文件擴展名不同和是以嚴格縮進式語法規則來書寫的，不帶大括號和分號而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個感嘆號，表示這是重要注釋。重要聲明繼承允許一個選擇器，繼承另一個選擇器，使用命令。 1. SASS和SCSS的區別文件擴展名不同：.sass和.scss； SASS是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和C...

wzyplus 2019-08-29 14:01 評論0 收藏0
Sass 與 SCSS 是什么關系？

摘要：下面是一個簡短的說明當我們說起，我們經常指的是兩種事物一種預處理器和一種語言。同時，預處理器有兩種不同的語法一種縮進語法一種語法歷史最開始，是的一部分，是一種預處理器，由開發者設計和開發。我最近寫了很多 Sass 代碼，但是最近發現并不是每一個人都知道 Sass 具體是什么。下面是一個簡短的說明：當我們說起 Sass ，我們經常指的是兩種事物：一種 css 預處理器和一種語言。我們...

funnyZhang 2019-08-30 13:07 評論0 收藏0