sass變量

AlexTuan 發布于2019-04-23 13:23 / 1975人閱讀

摘要：普通變量的普通變量定義之后可以在全局范圍內使用。目前的變量范圍飽受詬病，所以才有了這個全局變量。目前變量機制在選擇器中聲明的變量會覆蓋外面全局聲明的變量。

sass變量用法

1、sass變量必須以$符開頭，后面緊跟著變量名

2、變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣）

3、如果值后面加上!default則表示默認值

?默認變量

sass的默認變量：僅需要在值后面加上!default即可。

scss.style

css.style

默認變量解說：

sass的默認變量：

一般是用來設置默認值，然后根據需求來覆蓋的

覆蓋方式：

只需要在默認變量之前重新聲明下變量即可

編譯后的line-height為2，而不是我們默認的1.5。

?普通變量

sass的普通變量：定義之后可以在全局范圍內使用。

scss.style

css.style

特殊變量

定義的變量都為屬性值，可直接使用，但是如果變量作為屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

scss.style

css.style

?多值變量

多值變量分為list類型和map類型:

list類型有點像js中的數組

map類型有點像js中的對象

list

list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關于list數據操作還有很多其他函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具體可參考sass Functions（搜索List Functions即可）

定義

scss.style

css.style

map

map數據以key和value成對出現，其中value又可以是list。

格式為：$map: (key1: value1, key2: value2, key3: value3);。

可通過map-get($map,$key)取值。

關于map數據還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具體可參考sass Functions（搜索Map Functions即可）

定義

scss.style

css.style

?全局變量

在變量值后面加上!global即為全局變量。

這個目前還用不上，不過將會在sass 3.4后的版本中正式應用。目前的sass變量范圍飽受詬病，所以才有了這個全局變量。

目前變量機制

在選擇器中聲明的變量會覆蓋外面全局聲明的變量。(這也就人們常說的sass沒有局部變量)

scss.style

css.style

啟用global之后的機制

請注意，這個目前還無法使用，所以樣式不是真實解析出來的。

scss.style

css.style

GPU云服務器云服務器 sass 多云管理 sass sass 混合云部署 iaas paas sass

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

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

Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。 ? SASS的本...

StonePanda 2019-08-30 14:04 評論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。 ? SASS的本...

pcChao 2019-08-22 15:01 評論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規范是以下劃線開頭的，這樣的文件不會被編譯成文件。這個特性現在正被眾多開發者濫用。就是取值的一種特殊形式，符合特殊用法。函數名稱參數列表數據處理繼承允許一個選擇器，繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單且可維護。 ? SASS的本...

alexnevsky 2019-08-01 18:40 評論0 收藏0
細談sass和less中的變量及其作用域

摘要：如果存在一個同名的全局變量，這個全局變量也不會被重寫，除非同名的局部變量被聲明時使用關鍵字。博客原文地址：Claiyre的個人博客 https://claiyre.github.io/博客園地址：http://www.cnblogs.com/nuannuan7362/如需轉載，請在文章開頭注明原文地址------------------------------------------...

wslongchen 2019-08-29 13:08 評論0 收藏0
vue入門文章

摘要：本來想自己寫一篇關于入門的文章。后面可能在這篇文章基礎上，有所內容的增加。預處理器定義了一種新的專門的編程語言，編譯后成正常的文件。本來想自己寫一篇關于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細了，實在有保存下來的必要。后面可能在這篇文章基礎上，有所內容的增加。 CSS預處理器定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

seanHai 2019-08-29 17:06 評論0 收藏0
[Sass]-Sass入門

摘要：未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數，參數名以符號開始，多個參數以逗號分開，也可以給參數設置默認值。初識Sass SASS簡介 sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，然后再編譯成正常的CSS文件。Sass是CSS3的擴展，它增加了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

godiscoder 2019-08-29 13:27 評論0 收藏0