Scss 文檔太多了,但還是耐心看完了,總結自己常用的一些語法。
1、規則嵌套
Sass 允許將一套 CSS 樣式嵌套進另一套樣式中,內層的樣式將它外層的選擇器作爲父選擇器,例如:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
編譯爲:
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
2、父選擇器
在嵌套 CSS 規則時,有時也需要直接使用嵌套外層的父選擇器,例如,當給某個元素設定 hover 樣式時,或者當 body 元素有某個 classname 時,可以用 & 代表嵌套規則外層的父選擇器。
web前端開發學習Q-q-u-n: 731771211,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻)
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
編譯爲
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal;
}
3、嵌套屬性
有些 CSS 屬性遵循相同的命名空間 (namespace),比如 font-family, font-size, font-weight 都以 font 作爲屬性的命名空間。爲了便於管理這樣的屬性,同時也爲了避免了重複輸入,Sass 允許將屬性嵌套在命名空間中,例如:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
編譯爲
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
4、變量 )
SassScript 最普遍的用法就是變量,變量以美元符號開頭,賦值方法與 CSS 屬性的寫法一樣:
$width: 5em;
// 使用
#main {
width: $width;
}
編譯爲:
#main {
width: 5em
}
5、運算
SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %),如果必要會在不同單位間轉換值。
p {
width: 1in + 8pt;
}
編譯爲
p {
width: 1.111in;
}
6、變量定義 !default (Variable Defaults: !default)
可以在變量的結尾添加 !default 給一個未通過 !default 聲明賦值的變量賦值,此時,如果變量已經被賦值,不會再被重新賦值,但是如果變量還沒有被賦值,則會被賦予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
編譯爲
#main {
content: "First content";
new-content: "First time reference";
}
7、@import
Sass 拓展了 @import 的功能,允許其導入 SCSS 或 Sass 文件。被導入的文件將合併編譯到同一個 CSS 文件中,另外,被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。
@import "foo.scss";
// 或
@import "foo";
Sass 允許同時導入多個文件,例如同時導入 rounded-corners 與 text-shadow 兩個文件:
@import "rounded-corners", "text-shadow";
8、@media
Sass 中 @media 指令與 CSS 中用法一樣,只是增加了一點額外的功能:允許其在 CSS 規則中嵌套。如果 @media 嵌套在 CSS 規則內,編譯時,@media 將被編譯到文件的最外層,包含嵌套的父選擇器。這個功能讓 @media 用起來更方便,不需要重複使用選擇器,也不會打亂
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
編譯爲
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; }
}
9、@extend
在設計網頁的時候常常遇到這種情況:一個元素使用的樣式與另一個元素完全相同,但又添加了額外的樣式。通常會在 HTML 中給元素定義兩個 class,一個通用樣式,一個特殊樣式。假設現在要設計一個普通錯誤樣式與一個嚴重錯誤樣式,一般會這樣寫:
.father{
color: yellow;
font-size: 18px;
}
.son{
@extend .father;
font-weight: bold;
}
編譯爲
.son{
color: yellow;
font-size: 18px;
font-weight: bold;
}
10、控制指令 @if
當 @if 的表達式返回值不是 false 或者 null 時,條件成立,輸出 {} 內的代碼:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
編譯爲
p {
border: 1px solid;
}
@if 聲明後面可以跟多個 @else if 聲明,或者一個 @else 聲明。如果 @if 聲明失敗,Sass 將逐條執行 @else if 聲明,如果全部失敗,最後執行 @else 聲明,例如:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
編譯爲
p {
color: green; }
11、@for
@for 指令可以在限制的範圍內重複輸出格式,每次按要求(變量的值)對輸出結果做出變動。這個指令包含兩種格式:@for var from <start> to <end>,區別在於 through 與 to 的含義:當使用 through 時,條件範圍包含 <start> 與 <end> 的值,而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外,i;<start> 和 <end> 必須是整數值。即through前閉後閉 to是前閉後開
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
編譯爲
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
12、@each
@each 指令的格式是 var 可以是任何變量名,比如 name,而 <list> 是一連串的值,也就是值列表。
@each 將變量 $var 作用於值列表中的每一個項目,然後輸出結果,例如:
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
編譯爲
.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'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
13、@while
@while 指令重複輸出格式直到表達式返回結果爲 false。這樣可以實現比 @for 更復雜的循環,只是很少會用到。例如:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
編譯爲
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
14、定義混合樣式指令 @mixin
混合指令的用法是在 @mixin 後添加名稱與樣式,比如名爲 large-text 的混合通過下面的代碼定義:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含選擇器和屬性,甚至可以用 & 引用父選擇器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
引用混合樣式 @include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
編譯爲
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
15、混合樣式指令的參數
參數用於給混合指令中的樣式設定變量,並且賦值使用。在定義混合指令的時候,按照變量的格式,通過逗號分隔,將參數寫進圓括號裏。引用指令時,按照參數的順序,再將所賦的值對應寫進括號:
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
編譯爲
p {
border-color: blue;
border-width: 1in;
border-style: dashed;
}
16、函數指令 (Function Directives)
Sass 支持自定義函數,並能在任何屬性值或 Sass script 中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
編譯爲
#sidebar {
width: 240px;
}
自己是一個6年的前端工程師,希望本文對你有幫助!
這裏推薦一下我的前端學習交流扣qun:731771211 ,裏面都是學習前端的,如果你想製作酷炫的網頁,想學習編程。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴,每天分享技術
點擊:加入