Sass 入門
Sass 是一款強(qiáng)化 CSS 的輔助工具犹菱，它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)吮炕、混合 (mixins)腊脱、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅龙亲。使用 Sass 以及 Sass 的樣式庫(kù)（如 Compass）有助于更好地組織管理樣式文件陕凹，以及更高效地開發(fā)項(xiàng)目。
Sass和Scss的區(qū)別
Sass 和 SCSS 其實(shí)是同一種東西鳄炉，我們平時(shí)都稱之為 Sass杜耙，兩者之間不同之處有以下兩點(diǎn)：
文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名拂盯，而 SCSS 是以“.scss”后綴為擴(kuò)展名
語(yǔ)法書寫方式不同佑女，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似团驱。
Sass 語(yǔ)法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
SCSS 語(yǔ)法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sass的輸出方式
- 嵌套輸出方式 nested
- 展開輸出方式 expanded
- 緊湊輸出方式 compact
- 壓縮輸出方式 compressed
sass
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nested
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
expanded
大括號(hào)另起一行
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
compact
單行css
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
compressed
壓縮css
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
sass聲明變量
sass 的默認(rèn)變量?jī)H需要在值后面加上 !default 即可摸吠。
設(shè)置默認(rèn)值主要是用來(lái)覆蓋的
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
最后結(jié)果為2
在組件開發(fā)中我們會(huì)經(jīng)常用到default
例如
$grey-1: #ffffff !default;
$grey-2: #fafafa !default;
$grey-3: #f5f5f5 !default;
$grey-4: #e8e8e8 !default;
$grey-5: #d9d9d9 !default;
$grey-6: #bfbfbf !default;
$grey-7: #8c8c8c !default;
$grey-8: #595959 !default;
$grey-9: #262626 !default;
$grey-10: #000000 !default;
局部變量與全局變量
在外部的為全局變量
//SCSS
$color: orange !default;//定義全局變量(在選擇器、函數(shù)嚎花、混合宏...的外面定義的變量為全局變量)
.block {
color: $color;//調(diào)用全局變量
}
em {
$color: red;//定義局部變量
a {
color: $color;//調(diào)用局部變量
}
}
span {
color: $color;//調(diào)用全局變量
}
//CSS
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
選擇器嵌套
//HTML
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
想選中 header 中的 a 標(biāo)簽寸痢，在寫 CSS 會(huì)這樣寫：
//CSS
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中，就可以使用選擇器的嵌套來(lái)實(shí)現(xiàn)：
//Scss
nav {
a {
color: red;
header & {
color:green;
}
}
}
& 代表父選擇器
屬性嵌套
屬性嵌套就是方便省略前綴
// Css
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
//Scss
.box {
border {
top: 1px solid red;
bottom: 1px solid green;
}
}
偽類嵌套
偽類嵌套與屬性類似
// Css
.box:before{
content:"偽元素嵌套";
}
//Scss
.box{
&: before {
content:"偽元素嵌套";
}
}
混合宏
混合宏適用于復(fù)雜的樣式
@mixin 在調(diào)用中要用@include
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
button {
@include border-radius;
}
混合宏還可以傳參
不帶參數(shù)值
@mixin border-radius($radius){
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(3px);
}
帶參數(shù)值
帶參數(shù)值可以設(shè)為默認(rèn)值
@mixin border-radius($radius:3px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
同時(shí)可以被覆蓋
.box {
@include border-radius(50%);
}
繼承
使用@extend
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
編譯出來(lái)后
//CSS
.btn, .btn-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
}
.btn-second {
background-clor: orange;
color: #fff;
}
占位符%placeholder
%placeholder 聲明的代碼紊选，如果不被 @extend 調(diào)用的話啼止，不會(huì)產(chǎn)生任何代碼。
// SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
混合宏 占位符 繼承對(duì)比
混合宏更適用于有參數(shù)的傳遞兵罢，沒有參數(shù)額話不推薦因?yàn)闀?huì)讓代碼冗余
占位符的話非常推薦因?yàn)橛谜嘉环x的變量如果沒有用extend調(diào)用不會(huì)生成css献烦，非常好
如果你的代碼塊不需要專任何變量參數(shù)，而且有一個(gè)基類已在文件中存在趣些，那么建議使用 Sass 的繼承。
