Sass是一種CSS預(yù)處理語言烫扼。CSS預(yù)處理語言是一種新的專門的編程語言曙求，編譯后形成正常的css文件碍庵，為css增加一些編程特性映企，無需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡潔静浴、適應(yīng)性更強(qiáng)堰氓，可讀性更佳，更易于代碼的維護(hù)等諸多好處苹享。
CSS預(yù)處理語言有Scss(Sass) 和Less双絮、Postcss。
Scss和Sass
sass一開始用的是一種縮進(jìn)式的語法格式
采用這種格式文件的后綴名是.sass
在sass3.0版本后我們常用的是sassy css語法得问，擴(kuò)展名是.scss囤攀，更接近與css語法
區(qū)別：
- 后綴名不同 .sass和.scss
- 語法不同，請(qǐng)看下面
新版：
/*新版本
多行文本注釋*/
//新版本
//單行文本注釋
@import "base";
@mixin alert{
color:red;
background:blue;
}
.alert-warning{
@include alert;
}
ul{
font-size:15px;
li{
list-style:none;
}
}
老版本：
/*新版本
多行文本注釋
//新版本
單行文本注釋
@import "base"
=alert
color:red
background:blue
.alert-warning
+alert
ul
font-size:15px
li
list-style:none
變量
變量的意義
在sass里我們可以定義多個(gè)變量來存放顏色宫纬、邊框等等的樣式焚挠，這樣就可以在下面想要使用樣式的時(shí)候使用變量了
這樣的優(yōu)點(diǎn)就是便于維護(hù)，更改方便
變量的使用
可以通過$來定義變量漓骚，在變量名字中可以使用-和來作為連接蝌衔，并且-和是可以互通的，就是用起來一模一樣蝌蹂。
變量的值可以是字符串噩斟、數(shù)字、顏色等等孤个，在變量里還可以使用其他變量剃允，使用的時(shí)候直接寫變量名就好了
例如
$primary-color:#ff6600;
$primary-border:1px solid $primary_color;
div.box{
background:$primary-color;
}
h1.page-header{
border:$primary-border;
}
css寫法---》
div.box {
background: #ff6600;
}
h1.page-header {
border: 1px solid #ff6600;
}
嵌套的使用
合理的使用嵌套語法，可以使我們編寫代碼更為快捷
假設(shè)我們想寫這樣的css：
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
在sass里我們可以這樣寫
.nav{
height:100px;
ul{
margin:0;
li {
float:left;
list-style:none;
padding:5px;
}
}
}
大家會(huì)發(fā)現(xiàn)齐鲤，寫出來的代碼父和子之間都有空格隔開硅急，如果我們需要給a加上偽類的話我們這樣寫
.nav{
height:100px;
a{
color:#fff;
:hover{
color:#ff6600;
}
}
}
在里面就會(huì)出現(xiàn)這樣的情況
.nav a :hover {
color: #ff6600;
}
我們發(fā)現(xiàn)在a和:hover之間有了空格，這樣是不好的佳遂，所以我們需要在寫的時(shí)候在：hover之前把a(bǔ)加上营袜，這樣就需要用到在之類里引用父類選擇器的方式，我們可以用&符號(hào)代替父類
例如：
.nav{
height:100px;
a{
color:#fff;
&:hover{
color:#ff6600;
}
}
}
這樣就好了丑罪，下面來個(gè)完整的代碼：
.nav{
height:100px;
ul{
margin:0;
li{
float:left;
list-style:none;
padding:5px;
}
a{
display:block;
color:#000;
&:hover{
color:#f60;
background:red;
}
}
}
& &-text{
font-size:15px;
}
}
css寫法-----》
.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}
.nav ul a:hover {
color: #f60;
background: red;
}
.nav .nav-text {
font-size: 15px;
}
嵌套屬性
我們可以把一些復(fù)合屬性的子屬性來嵌套編寫荚板，加快編寫速度，例如
body{
font:{
family:Helvitica;
size:15px;
weight:bold;
}
}
.nav{
border:1px solid red{
left:none;
right:none;
}
}
.page-next{
transition:{
property:all;
delay:2s;
}
}
css寫法-----》
body {
font-family: Helvitica;
font-size: 15px;
font-weight: bold;
}
.nav {
border: 1px solid red;
border-left: none;
border-right: none;
}
.page-next {
transition-property: all;
transition-delay: 2s;
}
mixin 混合
你可以把它想象成一個(gè)有名字的定義好的樣式
每一個(gè)mixin都有自己的名字吩屹，類似于js里的函數(shù)定義方法如下
@mixin 名字(參數(shù)1跪另，參數(shù)2...){
...
}
使用方法是在其他選擇器css樣式里通過@include引入，其實(shí)就相當(dāng)于將mixin里的代碼寫入到這個(gè)選擇器的css里煤搜，如下：
@mixin alert {
color:#f60;
background-color:#f60;
a{
color:pink;
}
&-a{
color:red;
}
}
.alert-warning{
@include alert;
}
css寫法-----》
.alert-warning {
color: #f60;
background-color: #f60;
}
.alert-warning a {
color: pink;
}
.alert-warning-a {
color: red;
}
剛才是沒有參數(shù)的mixin免绿，mixin也可以擁有參數(shù)，需要注意的是：
- 形參的名字前要加$
- 傳參的時(shí)候只寫值的話要按順序傳
- 傳參的時(shí)候不想按順序的話需要加上形參名字
例如：
@mixin alert($color,$background) {
color:$color;
background-color:$background;
a{
color:darken($color,10%);//把顏色加深百分之十
}
}
.alert-warning{
@include alert(red,blue);
}
.alert-info{
@include alert($background:red,$color:blue);
}
css寫法------》
.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: #cc0000;
}
.alert-info {
color: blue;
background-color: red;
}
.alert-info a {
color: #0000cc;
}
繼承拓展 extend
如果我們有一個(gè)選擇器想要擁有另一個(gè)選擇所有的東西擦盾，不管是樣式還是子元素等等嘲驾，可以使用@extend來繼承
大家需要注意的是淌哟，++b繼承a的時(shí)候，a的子元素設(shè)置了樣式辽故，也會(huì)給b的子元素設(shè)置樣式++徒仓，達(dá)到完全一樣的情況，例如：
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css寫法----》
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
partials
在以前咱們編寫css的時(shí)候誊垢，一個(gè)css引入另一個(gè)css需要使用@import掉弛，其實(shí)這是不好的，會(huì)多發(fā)一次http請(qǐng)求喂走，影響咱們站點(diǎn)的響應(yīng)速度殃饿。
在sass里，咱們可以把小的sass文件分出去芋肠，叫做partials壁晒，在某個(gè)sass里通過@import ‘partials名’去引入，注意路徑喲业栅，這樣的話就可以把partials里的代碼引到咱們大的sass里一起編譯
- 需要注意的是 partials的文件名前要加_
_base.scss :
body{
margin:0;
padding:0;
}
style.scss :
@import "base";
.alert {
padding:5px;
}
.alert a {
font:{
weight:bold;
size:15px;
}
}
.alert-info {
@extend .alert;
backgournd:skyblue;
}
css寫法----------->
body {
margin: 0;
padding: 0;
}
.alert, .alert-info {
padding: 5px;
}
.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}
.alert-info {
backgournd: skyblue;
}
這樣的話我們就可以把模塊化的思想引入到sass里了
comment注釋
sass里的注釋有三種
- 多行注釋
- 單行注釋
- 強(qiáng)制注釋
多行注釋：壓縮后不會(huì)出現(xiàn)在css里 /* */
單行注釋: 不會(huì)出現(xiàn)在css里 //
強(qiáng)制注釋：壓縮后也會(huì)出現(xiàn)在css里 /*! */
sass的基礎(chǔ)使用方法就介紹到這里秒咐，文章持續(xù)更新，后續(xù)更新sass高階用法碘裕，關(guān)注公眾號(hào)第一時(shí)間閱讀携取。
我是monkeysoft，你的【三連】就是monkeysoft創(chuàng)作的最大動(dòng)力帮孔，如果本文有任何錯(cuò)誤和建議雷滋，歡迎大家留言！
文章持續(xù)更新文兢，可以微信搜索 【小猴子的web成長之路】關(guān)注公眾號(hào)第一時(shí)間閱讀,關(guān)注之后后臺(tái)回復(fù)知識(shí)體系晤斩，更可領(lǐng)取小編精心準(zhǔn)備的前端知識(shí)體系，未來學(xué)習(xí)不再迷茫,更可加入技術(shù)群交流討論姆坚。
