sass scss 語法、用法小總結


一、sass語法

1.1 聲明變量-普通變量-默認變量-特殊變量-全局變量

定義變量的語法:

普通變量
定義之后可以在全局范圍內使用。
$fontSize: 12px;
body{
    font-size:$fontSize;
}
默認變量
sass 的默認變量僅需要在值后面加上 !default 即可。
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight;
}
sass 的默認變量一般是用來設置默認值,然后根據需求來覆蓋的,覆蓋的方式也很簡單,只需要重新聲明下變量即可。
全局變量——在變量的后面加上[!global]即可聲明全局變量。sass 規划是 3.4 以后的版本中就會增加這個功能。

 

特殊變量:一般情況下,我們定義的變量都是屬性值,可以直接使用,但是如果變量作
為屬性或者其他的特殊情況下,必須使用#{$variable}的形式進行調用。
  #{$variable}     就是取值的一種特殊形式,符合特殊用法。

 2.2 sass嵌套-選擇器嵌套

    SASS 中的嵌套主要說的是選擇器嵌套和屬性嵌套兩種方式,正常項目中通常使用的都是選
擇器嵌套方案
【注】在嵌套的過程中,如果需要用到父元素,在 SASS 中通過&符號引用父屬性

 2.3 sass嵌套-屬性嵌套

嵌套屬性——不常用
所謂屬性嵌套,是指某些屬性擁有同樣的單詞開頭,如:wborder-color
都是以 border 開頭的,所以就出現了屬性嵌套語法

 2.4 sass混合-Mixin

sass 中可以通過@mixin 聲明混合,可以傳遞參數,參數名稱以$開始,多個參數之間使用
逗號分隔,@mixin 的混合代碼塊由@include 來調用

 

 2.5 sass繼承拓展-@extend

在 SASS 中,通過繼承/擴展來減少重復代碼,可以讓一個選擇器去繼承另一個選擇中所有
的樣式。
繼承某個樣式的同時,也會繼承樣式的擴展。

 

 2.6 Partitials和@import

Partials 是用來定義公共樣式或者組件的樣式的,專門用於被其他的 scss 文件 import
進行使用的
在 SCSS 文件中引入指令@import 在引入 Partials 文件時,不需要添加下划線。詳細參
考案例代碼。

聲明公共樣式,公共樣式文件要以 _

 

 2.7 sass注釋

SASS 中提供了三種注釋
多行注釋  在編譯輸出的 css 文件中會保留,壓縮輸出格式中不會保留 --style compressed
/*
* 多行注釋
*/

單行注釋    在輸出 css 文件時不保留
      // 單行注釋

強制注釋  在多行注釋的開頭,添加感嘆號!表示強制保留
/*!
* 強制注釋
*/

2.8 sass數據類型

Sass 支持7種主要的數據類型
> 數字(例如: 1.2, 13, 10px)
> 字符串(例如:"foo", 'bar', baz)
> 顏色(例如:blue, #04a3f9, rgba(255, 0, 0, 0.5))
> 布爾值(例如: true, false)
> 空值(例如: null)
> 列表(list),用空格或逗號分隔 (例如:c 1.5em 1em 0 2em, Helvetica, Arial,
sans-serif)
> 映射(例如: (key1: value1, key2: value2))  map映射  鍵->值

2.9 數字&數字函數

在 SASS 中可以對數字進行運算
同時 SASS 支持數字函數的運算

 2.10 sass字符串

SASS 支持字符串的操作
同時 SASS 對字符串的操作有一些封裝的函數的支持,方便快捷的處理字符串操作。
更多操作請參考官方文檔。 http://sass.bootcss.com/docs/sass-reference/

 2.11 sass顏色

顏色的表示有很多種
> 十六進制 Hex:#ff0000 等等
> RGB:rgb(255, 0, 0)等等
> 字符串:red, blue, green 等等
> 等等.. ..
【注】SASS 支持所有這些顏色的表示方式 相信大家對這些顏色的表示方式應該非常熟悉了
顏色函數——rgb & rgba
通過 rgb()的形式進行顏色的控制【紅、綠、藍】

2.12 sass列表-list

list 表示列表類型的值
在 CSS 中就是表示屬性的一串值
列表中的值可以使用空格或者逗號分隔,如
> border:#ccc solid 1px; 值就是列表
> font-family:Courier, “Lucida Console”, monospace; 值也是列表
列表中可以包含其他的列表,如:
> padding:10px 5px, 5px 5px; 值的列表中有兩個列表,用逗號分隔
> padding:(10px 5px) (5px 5px);可以用括號分開,編譯成 css 時會去掉這些括號

列表函數

SASS 中的列表相當於其他語言中的數組,SASS 也提供了一些函數方便列表的操作
length:獲取列表長度
nth:獲取指定位置的列表項
index:獲取某個元素在列表中的位置,如果沒有查詢到返回 null
append:給指定的第一個列表添加一個列表項
join:合並列表

 2.13 sass映射map

map 就是列表項目中帶名稱的列表
>  $map:(key1:value1, key2:value2, key3:value3)
>  $var(key1:value1, key2:value2..):聲明一個 Map
>  length($map):獲取 map 中的元素對個數
>  map-get($map, key):獲取$map 中名稱為 key 的值
>  map-keys($map):獲取指定$map 中所有的 key
>  map-values($map):獲取指定$map 中所有的 value
>  map-has-key($map, key):判斷在$map 中是否包含指定的 key
>  map-merge($map1, $map2):將$map1 和$map2 合並在一起
>  map-remove($map, key):將指定名稱的 key 從$map 中移除

2.14 sass布爾值

SASS 中的布爾值,跟其他語言一樣,都是用來表示真/假的邏輯判斷的。
取值:true/false,sass 中可以使用比較運算符,返回的就是布爾值
> 比較運算符
> >、 >=、 <、 <=、 !=、 ==
> 邏輯運算符
> and、or、not

2.15 控制指令-control Directives

SASS 中為了更加方便的處理一些帶有邏輯性的樣式,如滿足某些條件的時候使用指定的樣
式,或者根據指定列表中的項目循環輸出樣式等,提供了一些控制指令進行處理
> @if:條件控制指令
> @for:循環指令
> @each:循環指令
> @while:循環指令
@if 指令是 SASS 中的一個控制指令,用於在表達式滿足條件(true)的時候輸出指定的
樣式,在不滿足條件(false)或者表達式為 null 的情況下輸出其他的樣式
【注】同樣,也可以通過@else if 和@else 指令結合,進行多條件的判斷

 2.16 sass-@for

@for 指令在 SASS 中用於重復處理一組指令
有兩種表現形式
> @for $var from <開始值> l <結束值>
> @for $var from <start> to <end>
<1>  to 和 through 都是表示一個區間
<2>  唯一的區別就是停止循環的地方不一樣
<3>  $var 可以是任意一個變量名稱如$i
<5>  <start>和<end>是 SASS 表達式並且必須是整數

2.17 sass-@each

@each 在 Sass 中主要被用來進行列表或者映射數據的循環
主要表示形式:@each $var in <list>
$var 可以是任意變量名稱,<list>是 SASS 表達式並且必須是 List

 2.18 sass-@while

@while 指令在 SASS 中用於循環重復處理樣式,直到@while 表達式返回 false

 

 

 2.19 sass用戶自定義函數-function

函數的功能主要是數據的運算,SASS 中可以將一些值交給函數進行處理,具體的處理方式
由定義的函數具體的設計確定。
@function 函數名稱(參數列表){
 // 數據處理
}

 2.20 sass警告 VS 錯誤

在自己設計的函數或者 Mixin 中,可以包含一些警告或者錯誤提示信息,用戶在錯誤使用
函數或者 mixin 時,就會看到這樣的錯誤提示。
> @warn:警告信息——會出現在命令行窗口中,編譯提示
> @error:錯誤信息——會出現在編譯后的 css 文件中,錯誤提示
@warn message; 警告信息,警告信息一般會在執行 scss 程序生成 css 時觸發,所以
出現在命令行中。
@error message; 錯誤信息,錯誤信息直接顯示在編譯的 css 文件中。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM