SASS簡介及使用方法

一、什么是Sass

Sass?(Syntactically Awesome StyleSheets)是css的一個擴展開發工具，它允許你使用變量、條件語句等，使開發更簡單可維護。這里是官方文檔。

二、基本語法

?1）變量

?sass的變量名必須是一個$符號開頭，后面緊跟變量名。

//sass 樣式
$red: #f00;
div {color: $red;   
}
// 編譯為css后
div {color:#f00;   
}

特殊變量：如果變量嵌套在字符串中，則需要寫在 #{} 符號里面，如：

$top: top;
div {margin-#{$top}: 10px;       /* margin-top: 10px; */
}

默認變量：僅需在值后面加入 !default即可， 默認變量一般用來設置默認值，當該變量出現另外一個值時，無論定義先后，都會使用另外一個值，覆蓋默認值

$color: red;
$color: blue !default;
div {color: $color;    /* color:red; */
}

多值變量：多值變量分為list類型和map類型，list有點像js對象中的數組，map類型像js中的對象

list :?可通過空格，逗號或小括號分割多個值，使用 nth($變量名, $索引)取值

//一維數據
$px: 5px 10px 20px 30px;//二維數據，相當于js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);// 例子
$px: 10px 20px;
div {margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map:?數據以key和value組成，格式：$map: (key1: value1, key2: value2); 通過map-get($map, $key);?

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}

2）計算功能

?sass允許使用算式。

div {padding: 2px * 4px;margin: (10px / 2);font-size: 12px   4px;    
}

　　

3）嵌套

標簽嵌套

// sass 樣式
div {color: #333;a {font-size:14px; &:hover {text-decoration:underline;}}
} // 編譯后css
div {color: #333;
}
div a {font-size:14px; 
}
div a:hover {text-decoration:underline;
}

　　屬性嵌套：

//sass 樣式
.fakeshadow {border: {style: solid;left: {width: 4px;color: #888;}right: {width: 2px;color: #ccc;}}
}//css 編譯后樣式
.fakeshadow {border-style: solid;border-left-width: 4px;border-left-color: #888;border-right-width: 2px;border-right-color: #ccc; 
}

?4）注釋

?sass有兩種注釋風格

標準css注釋： /* 注釋 */， 會保留到編譯后的文件中，壓縮則刪除

單行注釋： // 注釋

在標準注釋 /*后面加入一個感嘆號，表示重要注釋，壓縮模式也會保留注釋，用于版權聲明等。

/*! 重要注釋 */

5）繼承

sass 中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式

// sass樣式
h1 {font-size:20px;
}
div {@extend h1;color:red;
}
// css編譯后樣式
h1 {font-size:20px;
}
div {font-size:20px;color:red;
}

使用占位符選擇器 %?

從sass3.2.0后，就可以定義占位選擇器%，這個的優勢在于，不調用不會有多余的css文件

// sass樣式
%h1 {font-size:20px;
}
div {@extend %h1;color:red;
}
// css編譯后樣式
div {font-size:20px;color:red;
}

　　

6）混合(mixin)

?sass中使用@mixin聲明混合，可以傳遞參數，參數名義$符號開始，多個參數以逗號分開，如果參數有多組值，那么在變量后面加三個點表示，如： $var...

//sass 樣式
@mixin opacity($opacity:50) {opacity: $opacity / 100;filter: alpha(opacity=$opacity);
}.opacity{@include opacity;      //參數使用默認值  50/100 = 0.5
}
.opacity-80{@include opacity(80); //傳遞參數  80/100 = 0.8
}//  css編譯后樣式
.opacity{opacity: 0.5;filter: alpha(opacity=50);
}// ---------------------// 多參數
@mixin center($width, $height) {position: absolute;left:50%;top:50%;width:$width;height:$height;margin:(-$height / 2) 0 0 (-$width / 2);
}
div {@include center(200px, 100px);
}
// css編譯后樣式
div {position: absolute;left:50%;top:50%;width:200px;height:100px;margin:-50px 0 0 -100px;
}// -------------------//多組值
@mixin box-shadow($shadow...) {-webkit-box-shadow: $shadow;box-shadow: $shadow;
}
div {@include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css編譯后樣式
div {-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}

@content：在sass3.2.0中引入， 可以用來解決css3中 @meidia 或者 @keyframes 帶來的問題。它可以使@mixin接受一整塊樣式，接收的樣式從@content開始

//sass 樣式               
@mixin max-screen($res){@media only screen and ( max-width: $res ){@content;}
}@include max-screen(480px) {body { color: red }
}//css 編譯后樣式
@media only screen and (max-width: 480px) {body { color: red }
}

　　使用@content解決@keyframes關鍵幀的瀏覽器前綴問題

// 初始化變量
$browser: null;
// 設置關鍵幀
@mixin keyframes($name) {@-webkit-keyframes #{$name} {$browser: '-webkit-'; @content;}@-moz-keyframes #{$name} {$browser: '-moz-'; @content;}@-o-keyframes #{$name} {$browser: '-o-'; @content;}@keyframes #{$name} {$browser: ''; @content;}
}// 引入
@include keyframes(scale) {100% {#{$browser}transform: scale(0.8);}
}// css編譯后
@-webkit-keyframes scale {-webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {-moz-transform: scale(0.8);
}
@-o-keyframes scale  {-o-transform: scale(0.8);
}
@keyframes scale  {transform: scale(0.8);
}

　　

7）顏色函數

?sass提供了一些內置的顏色函數

lighten(#cc3, 10%)　　  // #d6d65c
darken(#cc3, 10%) 　　　// #a3a329
grayscale(#cc3) 　　　　// #808080
complement(#cc3) 　　　// #33c

　　

8）引入外部文件

使用 @import 命令引入外部文件， 引入后，可使用外部文件中的變量等。

@import "_base.scss";

　　

三、高級用法

1）函數 function

?sass允許用戶編寫自己的函數，以@function開始

$fontSize: 10px;
@function pxTorem($px) {@return $px / $fontSize * 1rem;
}
div {font-size: pxTorem(16px);
}
// css編譯后樣式
div {font-size: 1.6rem;
}

　　

?2）if條件語句

??@if語句可以用來判斷

// sass樣式
$type: monster;
div {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}
// css編譯后樣式
div {color: green;
}

　　三目判斷：語法為 if($condition, $if_true, $if_false)。 三個參數分別表示： 條件，條件為真的值，條件為假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）循環語句

for循環有兩種形式，分別為：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示變量，start表示開始值，end表示結束值，兩種形式的區別在于 through 包括 end 的值，to 不包括 end 值。

// sass樣式
@for $i from 1 to 4 {.item-#{$i} {width: 2em * $i;}
}
// css編譯后樣式
.item-1 {width: 2em;
}
.item-2 {width: 4em;
}
.item-3 {width: 6em;
}

　　?while循環?

// sass樣式
$i: 2;
@while $i > 0 {.item-#{$i} {width: 2em * $i;}$i: $i - 1;
}
// css編譯后樣式
.item-2 {width: 4em;
}
.item-1 {width: 2em;
}

　　

@each循環：語法為@each $var in <list or map>。 其中$var表示變量，而list和map表示數據類型，sass3.3.0新加入多字段循環和map數據循環

單字段list數據循環

//sass 樣式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');}
}
//css 編譯后樣式
.puma-icon {background-image: url('/images/puma.png'); 
}
.sea-slug-icon {background-image: url('/images/sea-slug.png'); 
}
.egret-icon {background-image: url('/images/egret.png'); 
}

　　?多字段list數據循環

//sass 樣式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {.#{$animal}-icon {background-image: url('/images/#{$animal}.png');border: 2px solid $color;cursor: $cursor;}
}
//css 編譯后樣式
.puma-icon {background-image: url('/images/puma.png');border: 2px solid black;cursor: default; 
}
.sea-slug-icon {background-image: url('/images/sea-slug.png');border: 2px solid blue;cursor: pointer; 
}

　　多字段map數據循環

//sass 樣式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}
//css 編譯后樣式
h1 {font-size: 2em; 
}
h2 {font-size: 1.5em; 
}
h3 {font-size: 1.2em; 
}

　　

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=ibihh0j&title=SASS簡介及使用方法

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

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

相關文章

【轉】Java方向如何準備BAT技術面試答案(匯總版)

【轉】Java方向如何準備BAT技術面試答案(匯總版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 這個主題的內容之前分三個篇幅分享過&#xff0c;導致網絡上傳播的比較分散&#xff0c;所以本篇做了一個匯總&#xff0c;同時對部分內容及答案做了修改&#xff0c;歡迎朋友們吐槽、轉發。因為篇幅長度和時間的原…
閱讀更多...
numpy維度交換_“lazy”的transpose()函數——從numpy 數組的內存布局講起

numpy維度交換_“lazy”的transpose()函數——從numpy 數組的內存布局講起

1 數組的兩種內存布局方式行優先與列優先首先我們回顧一下&#xff0c;矩陣數據在內存中的兩種布局方式&#xff1a;行優先&#xff08;row-major&#xff09;&#xff1a;以行為優先單位&#xff0c;在內存中逐行存儲/讀取&#xff1b;對于多維&#xff0c;意味著當線性掃描內…
閱讀更多...
云耀服務器切換系統,【計算】云耀服務器-常見操作匯總指南

云耀服務器切換系統,【計算】云耀服務器-常見操作匯總指南

通過上期的介紹&#xff0c;相信大家對于云耀云服務器的基本知識有了一個了解。云耀云服務器是一個具備獨立、完整的操作系統和網絡功能&#xff0c;可快速搭建簡單應用的新一代云服務器。接下來&#xff0c;本期為大家帶來關于云耀云服務器使用中的一些簡單方法和小技巧。1.云…
閱讀更多...
機器學習應該準備哪些數學預備知識？

機器學習應該準備哪些數學預備知識？

轉 https://www.zhihu.com/question/36324957 https://www.zhihu.com/question/36324957/answer/139408269 機器學習應該準備哪些數學預備知識&#xff1f; 數據分析師&#xff0c;工作中經常使用機器學習模型&#xff0c;但是以調庫為主。 自己一直也在研究算法&#xff0c;也…
閱讀更多...
react usecontext_Vue3原理實戰運用，我用40行代碼把他裝進了React做狀態管理

react usecontext_Vue3原理實戰運用，我用40行代碼把他裝進了React做狀態管理

前言vue-next是Vue3的源碼倉庫&#xff0c;Vue3采用lerna做package的劃分&#xff0c;而響應式能力vue/reactivity被劃分到了單獨的一個package中。如果我們想把它集成到React中&#xff0c;可行嗎&#xff1f;來試一試吧。使用示例話不多說&#xff0c;先看看怎么用的解解饞吧…
閱讀更多...
Spring MVC –自定義RequestMappingHandlerMapping

Spring MVC –自定義RequestMappingHandlerMapping

在xml bean定義文件中使用<mvc&#xff1a;annotation-driven />配置Spring MVC時&#xff0c;在內部將一個名為RequestMappingHandlerMapping的組件注冊到Spring MVC。 該組件或通常是HandlerMapping組件負責將請求URI路由到處理程序&#xff0c;這些處理程序是使用Requ…
閱讀更多...
css的三個特性 背景透明設置

css的三個特性 背景透明設置

關于行內元素&#xff08;補充一點&#xff09; 行內元素只能容納文本或其他行內元素。&#xff08;a特殊a里面可以放塊級元素&#xff09; 例子&#xff1a; 關于行高tip: 選擇器的嵌套層級不應大于3級&#xff0c;位置靠后的限定條件應盡可能的精確。 屬性定義必須另起一行…
閱讀更多...
比較容易犯的一些智障錯誤（不定時修改）

比較容易犯的一些智障錯誤（不定時修改）

無論在什么學習中&#xff0c;在成長的過程中&#xff0c;注定要犯一些錯誤&#xff0c;有些比較高級的錯誤&#xff0c;有些是比較智障的錯誤。那么在oi的學習中&#xff0c;我們最討厭的就是一些智障的小錯誤&#xff0c;因為如果是大錯誤的話一般情況下在測試樣例的時候都是…
閱讀更多...
ccs安裝多版本編譯器離線_大數據分析：學習工具JDK，在線安裝指南

ccs安裝多版本編譯器離線_大數據分析：學習工具JDK，在線安裝指南

hadoop是使用Java語言開發的并且Hadoop運行需要有Java環境的支持&#xff0c;因此在安裝hadoop之前需要安裝Java開發環境即JDK(Java Development Kit)。安裝前首先向大家介紹以一下本文會用到的幾個詞&#xff1a;JAVA_HOME:一是為了方便引用&#xff0c;比如&#xff0c;JDK安…
閱讀更多...
HTML基礎入門學習準備篇

HTML基礎入門學習準備篇

在學習前端的開始&#xff0c;讓我們一起來了解什么是HTML5時代的大前端開發和全棧開發的定義傳統的前端&#xff1a;切圖-標簽和樣式-實現效果H5時代的前端&#xff1a;一、需要各端的兼容開發二、可以用于APP開發和移動站點的開發三、Ajax服務器端技術開發四、高級設計模式和…
閱讀更多...
asp.net尚未在web服務器上注冊_最新版Web服務器項目詳解 00 項目概述

asp.net尚未在web服務器上注冊_最新版Web服務器項目詳解 00 項目概述

點 擊 關 注 上 方&#xff02;兩猿社&#xff02;設 為&#xff02;置 頂 或 星 標&#xff02;&#xff0c;干 貨 第 一 時 間 送 達。互 聯 網 猿 | 兩 猿 社TineyWebServerLinux下C輕量級Web服務器&#xff0c;助力初學者快速實踐網絡編程&#xff0c;搭建屬于自己的服務器…
閱讀更多...
python正則r的作用_Python正則表達式，這一篇就夠了！

python正則r的作用_Python正則表達式，這一篇就夠了！

原標題&#xff1a;Python正則表達式&#xff0c;這一篇就夠了&#xff01;大多數編程語言的正則表達式設計都師從Perl&#xff0c;所以語法基本相似&#xff0c;不同的是每種語言都有自己的函數去支持正則&#xff0c;今天我們就來學習 Python中關于 正則表達式的函數。re模塊…
閱讀更多...
服務器微信了早上好,每天早上好的問候語 微信早安問候語合集66句

服務器微信了早上好,每天早上好的問候語 微信早安問候語合集66句

1、沒有傘的孩子&#xff0c;必須努力奔跑&#xff01;早安&#xff01;2、你不能改變過去&#xff0c;但你可以改變未來。早安&#xff01;3、堅持了才叫夢想&#xff0c;放棄了就只是妄想。早安&#xff01;4、忘掉失敗&#xff0c;不過要牢記失敗中的教訓。早安&#xff01;…
閱讀更多...
如何得到某個文件的舊版本

如何得到某個文件的舊版本

下載某個文件的舊版本 如果想要得到某個文件的舊版本&#xff0c;只需在該文件上單擊右鍵&#xff0c;選擇Updata to revision…即可。 系統會提示輸入版本號。 例如要下載soc_1的第五個版本&#xff0c;只需填入5即可。如圖7。 查看完版本5的文件后&#xff0c;如果想在此回到…
閱讀更多...
Google Guava EventBus和Java 7 WatchService用于事件編程

Google Guava EventBus和Java 7 WatchService用于事件編程

這篇文章將介紹如何使用Guava EventBus將更改發布到Java 7 WatchService檢測到的目錄或子目錄中。 Guava EventBus是向應用程序添加發布/訂閱通信的好方法。 Java 7 java.nio.file軟件包中新增的WatchService用于監視目錄中的更改。 由于EventBus和WatchService已在以前的文章中…
閱讀更多...
Bootstrap-table 部分瀏覽器顯示不出來

Bootstrap-table 部分瀏覽器顯示不出來

一、問題 近日&#xff0c;寫了一個ASP.Net項目&#xff0c;但是bootstrap-table在別人的電腦上顯示不出來&#xff0c;在自己的電腦上能顯示&#xff0c;有些瀏覽器也是能顯示&#xff0c;但部分瀏覽器就是顯示不出來。找了很多原因&#xff0c;最后有個老師和我說是內核版本的…
閱讀更多...
DBMS-基本概念

DBMS-基本概念

文件處理系統&#xff08;file-processing system&#xff09;的主要弊端&#xff1a; 數據冗余和不一致&#xff08;data redundancy and inconsistency&#xff09;、數據訪問困難&#xff08;difficulty in accessing data&#xff09;、數據孤立&#xff08;data isolation…
閱讀更多...
python多大孩子可以學_孩子學編程最佳年齡是多大

python多大孩子可以學_孩子學編程最佳年齡是多大

兒童編程教育已經悄悄地掀起了編程低齡化的熱浪。但是很多人會疑惑&#xff0c;到底孩子學編程最佳年齡是多少呢&#xff1f;下面小編就為大家解答一下。孩子學編程最佳年齡 首先&#xff0c;孩子的學習黃金時期是非常重要的。從6歲開始&#xff0c;大多數孩子都可以掌握對基本…
閱讀更多...
上傳文件到華為云云服務器,上傳文件到云服務器

上傳文件到華為云云服務器,上傳文件到云服務器

上傳文件到云服務器 內容精選換一換登錄Windows操作系統的彈性云服務器時&#xff0c;需使用密碼方式登錄。因此&#xff0c;用戶需先根據創建彈性云服務器時使用的密鑰文件&#xff0c;獲取該彈性云服務器初始安裝時系統生成的管理員密碼(Administrator帳戶或Cloudbase-init設…
閱讀更多...
JUnit規則

JUnit規則

第一次偶然發現JUnit Rule批注時&#xff0c;我對此概念有些惱火。 在測試用例中擁有一個公共領域似乎有些奇怪&#xff0c;因此我不愿意定期使用它。 但是一段時間后&#xff0c;我習慣了這一點&#xff0c;事實證明&#xff0c;規則可以通過多種方式簡化編寫測試的過程。 這篇…
閱讀更多...
最新文章

Copyright @ 2022~2023