sass變量

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


?

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=i2b12j&title=sass變量

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/371121.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/371121.shtml
英文地址,請注明出處:http://en.pswp.cn/news/371121.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

西安4年java多少時間_西安學習java一般要多久

線程小n行的任務/任務執的數單個量為間隔執行池大所需時間時間,西安學習的配置,西安學習行定行池務的務執c配在執注置任方法時任上標,下解行調問題務的方度任有以異步決辦采用法:上述式執。比如、般要多本名(套接套接5套t地地節點…

js 遞歸函數的使用及常用函數

1.遞歸函數的使用: 公園里有一堆桃子,猴子每天吃掉一半,挑出一個壞的扔掉,第6天的時候發現還剩1個桃子,問原來有多少個桃子 var peache;function peaches(n) { if (n 6) { peache 1; } else { …

redis分布式鎖-SETNX實現

轉自:https://my.oschina.net/u/1995545/blog/366381 Redis有一系列的命令,特點是以NX結尾,NX是Not eXists的縮寫,如SETNX命令就應該理解為:SET if Not eXists。這系列的命令非常有用,這里講使用SETNX來實現…

sql java驅動程序_Microsoft SQL Server JDBC 驅動程序支持矩陣

本頁包含 Microsoft SQL Server JDBC 驅動程序的支持矩陣和支持生命周期策略。Microsoft JDBC 驅動程序支持生命周期矩陣和策略Microsoft 支持生命周期 (MSL) 策略提供了與 Microsoft 產品的支持生命周期有關的可預測透明信息。 自驅動程序發布之日起,JDBC 驅動程序…

使用直接內存時可以更快

總覽 使用直接內存不能保證提高性能。 考慮到它增加了復雜性,除非有充分的理由使用它,否則應避免使用它。 塞爾吉奧奧利維拉(Sergio Oliveira Jr)的這篇出色文章表明,這不僅僅是使用直接內存來提高性能的問題&#x…

POJ 3977 折半枚舉

鏈接: http://poj.org/problem?id3977 題意: 給你n個數,n最大35,讓你從中選幾個數,不能選0個,使它們和的絕對值最小 如果有一樣的,取個數最小的 題解: np難題,但是因為…

java踩坑記

1.String 相等 稍微有點經驗的程序員都會用equals比較而不是用 ,但用equals就真的安全了嗎,看下面的代碼 user.getName().equals("xiaoming"); 有經驗的老司機很快就能看到問題,如果user.getName()為null,就會拋出空指針異常&#…

java taken_java-是否有正確的方法在slf4j中傳遞參數?

第三變種是最好的。實際上,第一種情況是通過StringBuilder進行的字符串連接。第二和第三種情況相同。他們需要將整數值裝箱到Integer(或其他Object),然后創建一個數組來打包它們。在我的機器上進行的簡單測試表明,如果不執行日志記錄&#xf…

html常用小知識

請求重定向&#xff1a;加載頁面之后&#xff0c;除了用js做重定向之外&#xff0c;我們還可以直接用<meta>標簽做重定向。 1 <meta http-equiv"refresh" content"5;urlhttp://www.baidu.com" /> 5秒后跳轉 超鏈接&#xff1a;在當前的iframe…

MyEclipse快捷鍵大全【轉】

-------------------------------------MyEclipse 快捷鍵1(CTRL)-------------------------------------Ctrl1 快速修復CtrlD: 刪除當前行 CtrlQ 定位到最后編輯的地方 CtrlL 定位在某行 CtrlO 快速顯示 OutLine CtrlT 快速顯示當前類的繼承結構 CtrlW 關閉當前Editer Ct…

根據您的命令-命令設計模式

命令設計模式是一種廣為人知的設計模式&#xff0c;它屬于行為設計模式&#xff08;“四人幫”的一部分&#xff09;。 顧名思義&#xff0c;它與應用程序中的動作和事件有關。 問題陳述&#xff1a; 假設有一個網頁將在其中包含多個菜單的情況。 編寫此代碼的一種方法是使條件…

用js和jQuery做輪播圖

Javascript或jQuery做輪播圖 css樣式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:relative; }.images{position:relative;width: 100%;height: 400px; } .images img{position:absolute;left: 0;top: 0;width: 100%;height: 400px;opacity: 0;fi…

w3school前端教程合集

有關前端開發的w3c教程合集。 http://caibaojian.com/w3school/ 地圖ajax教程Canvas教程CSS教程CSS3教程CSS3選擇器CSS參考手冊DHTML教程HTML教程HTML5教程HTML5音頻教程HTML DOM教程JavaScript教程jQuery教程jQuery Ajax教程jQuery事件jQuery操作jQuery選擇器jQuery遍歷json教…

【開發調試】谷歌瀏覽器中調試移動網頁和測試網速下頁面效果

、 今天有幸給大家分享一下谷歌瀏覽器針對移動網頁測試的技巧&#xff0c;主要是最近做個微信公共號網站。所以就要對頁面測試拉。移動網頁我們最長測得就是各種手機大小的頁面效果和出現網絡問題的效果展示。 今天就簡單分享下在谷歌瀏覽器測試頁面的適配和網速限制展示。…

拼多多分享好友砍價Java實現_拼多多砍價怎么分享到朋友圈 砍價發到微信朋友圈方法...

拼多多是一款電商社交的共享式購物平臺&#xff0c;現在還推出了砍價的活動&#xff0c;只要邀請好友砍價&#xff0c;你就以最低的價格購買商品&#xff0c;還可以可能是免費拿到&#xff0c;那么今天小編就給大家講講如何將自己的砍價信息分享到微信朋友圈。首先下載手機拼多…

通過6個簡單的步驟在Windows上運行Apache Hive

注意 &#xff1a;您需要安裝cygwin才能運行本教程&#xff0c;因為Hadoop&#xff08;Hive需要&#xff09;需要cygwin才能在Windows上運行。 至少&#xff0c;系統中必須存在Basic&#xff0c;Net&#xff08;OpenSSH&#xff0c;tcp_wrapper軟件包&#xff09;和與安全相關的…

vim編輯器初級(八)

:abbreviate  后面接一個縮寫&#xff0c;再接這個縮寫的全寫&#xff0c;這樣在輸入這個縮寫后&#xff0c;vim會自動將其展開為它的全寫 :abbreviate  列出目前你所設置的所有縮寫 :map  后面接一個字符串&#xff0c;再接這個字符串所映射的一串命令&#xff0c;這樣在…

java多文件post請求_如何使用Java發出多部分/表單數據POST請求?

我們使用HttpClient 4.x創建多部分文件post。更新&#xff1a;截至HttpClient 4.3&#xff0c;一些類已被棄用。下面是新API的代碼&#xff1a;CloseableHttpClient httpClient HttpClients.createDefault();HttpPost uploadFile new HttpPost("...");MultipartEnt…

vue 環境的搭建及初始化項目

其實超級簡單&#xff0c;雖然網上很多&#xff0c;但是我順便記錄下相當于做筆記吧 1nodejs 的安裝&#xff0c; 在node官網下載&#xff0c;點擊安裝&#xff0c;安裝的時候最好選擇路徑在d盤 2設置環境變量 我的電腦-->屬性-->系統環境變量- 系統變量新增一個NODE…

Java堆轉儲:您可以完成任務嗎?

如果您像我一樣對Java性能充滿熱情&#xff0c;那么堆轉儲分析對您來說應該不是一個謎。 如果是這樣&#xff0c;那么好消息是您將有機會提高您的Java故障診斷技能和JVM知識。 JVM現已發展到今天&#xff0c;與舊的JDK 1.0 – JDK 1.4天相比&#xff0c;今天生成和分析JVM堆轉…