變量
變量定義
$變量名: 變量值;
$color: red;
變量使用
$變量名
$變量名不能使用在CSS選擇器和屬性名中
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//編譯后
.selected {
border: 1px solid #F90;
}
嵌套規(guī)則
普通嵌套
- 類似于大盒套小盒 大盒可以同時(shí)裝小盒和東西
- 大盒相當(dāng)于父級
- 小盒相當(dāng)于子級
- 東西相當(dāng)于父級本身的屬性
- 父級的屬性會單獨(dú)生成CSS樣式
SCSS源碼
@charset "UTF-8";
#content {
background: red;
article {
font-size: 12px;
h1 {
font-size:24px;
}
p {
line-height:24px;
}
}
aside {
background: green;
}
}
CSS源碼
#content {
background: red; }
#content article {
font-size: 12px; }
#content article h1 {
font-size: 24px; }
#content article p {
line-height: 24px; }
#content aside {
background: green; }
父選擇器嵌套 &
-
偽類選擇器
SCSS源碼
@charset "UTF-8"; #content { background: red; article { a { color:white; } &:hover { text-decoration:underline; } } }CSS源碼
#content { background: red; } #content article a { color: white; } #content article:hover { text-decoration: underline; }?
-
后置 & 父選擇器之前添加選擇器
SCSS源碼
@charset "UTF-8"; #content { background: red; article { color:green; } body & { font-size: 12px; } }CSS源碼
#content { background: red; } #content article { color: green; } body #content { font-size: 12px; }
群組選擇器嵌套
SCSS源碼
@charset "UTF-8";
nav, aside {
a {
color: blue
}
}
CSS源碼
nav a, aside a {
color: blue; }
組合選擇器嵌套
- > 子選擇器
- + 同層相鄰組合選擇器
- ~ 同層全體組合選擇器
屬性嵌套
SCSS源碼
@charset "UTF-8";
nav {
//屬性嵌套
border: {
style: solid;
width: 1px;
radius: 8px;
};
//指明例外規(guī)則
margin:0 {
bottom: 0;
};
}
CSS源碼
nav {
border-style: solid;
border-width: 1px;
border-radius: 8px;
margin: 0;
margin-bottom: 0; }
導(dǎo)入SASS文件
@import
SCSS源碼
@import "路徑";
默認(rèn)變量值
- $變量名: 變量值 !default;
SCSS源碼
@charset "UTF-8";
$box-width: 400px !default;
.box {
width: $box-width;
}
CSS源碼
.box {
width: 400px; }
嵌套導(dǎo)入
SCSS源碼
//width.scss
$box-width: 400px !default;
//theme.scss
aside {
background: blue;
color: white;
}
@charset "UTF-8";
@import "width";
.box {
@import "theme";
width: $box-width;
}
CSS源碼
.box {
width: 400px; }
.box aside {
background: blue;
color: white; }
以上是兩種導(dǎo)入方式
原生CSS導(dǎo)入
- CSS@import
注釋
// 這種注釋內(nèi)容不會出現(xiàn)在生成的css文件中
/* 這種注釋內(nèi)容會出現(xiàn)在生成的css文件中 */
混合器
- 混合器實(shí)際大段樣式重用
- 混合器類似函數(shù)
- 混合器主要用于樣式展示層的重用
混合器定義@mixin
SCSS源碼
@mixin 混合器名稱 {
......
}
混合器的使用@include
SCSS源碼
@charset "UTF-8";
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
CSS源碼
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
使用混合器的場景
利用混合器袜香，可以很容易地在樣式表的不同地方共享樣式惠遏。如果你發(fā)現(xiàn)自己在不停地重復(fù)一段樣式殖蚕，那就應(yīng)該把這段樣式構(gòu)造成優(yōu)良的混合器，尤其是這段樣式本身就是一個(gè)邏輯單元毕箍，比如說是一組放在一起有意義的屬性。
混合器中的CSS規(guī)則
SCSS源碼
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
CSS源碼
ul.plain {
color: #444;
list-style: none; }
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px; }
混合器傳參
SCSS源碼
@charset "UTF-8";
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//必須按順序調(diào)用
a {
@include link-colors(blue, red, green);
}
//不必按順序調(diào)用
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
CSS源碼
a {
color: blue; }
a:hover {
color: red; }
a:visited {
color: green; }
a {
color: blue; }
a:hover {
color: red; }
a:visited {
color: green; }
混合器參數(shù)默認(rèn)值
SCSS源碼
@charset "UTF-8";
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(red);
}
CSS源碼
a {
color: red; }
a:hover {
color: red; }
a:visited {
color: red; }
繼承 @extend
繼承占位符 %
混合器/繼承/占位符區(qū)別
1040067-20161019114010342-630734152.jpg
