史上最全scss教程

一. 基礎

1.數據類型

SassScript 支持 6 種主要的數據類型：

• 數字，1, 2, 13, 10px

• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz

• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)

• 布爾型，true, false

• 空值，null

• 數組 (list)，用空格或逗號做分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps, 至關於 JavaScript 的 object，(key1: value1, key2: value2)

#{}將帶引號的字符串轉化爲無引號字符串

@mixin B($selector) {  #{$selector}{    color:red  }}@include B(".header");複製代碼

2.變量

一般在項目中會創建variable.scss用來存儲一些全局變量

//普通變量
$g-primary:#409eff;
//解構
$values: center,center;
@include df($values...) => @include df(center,center)
複製代碼

3.佔位符

不一樣於變量，佔位符能夠預先寫一些樣式，只有在調用的時候纔會生效

%mr5 {
   margin-right:5px;
}
.header {
   @extend %mr5;	
}
=>
/*
.header {
   margin-right:5px;
}
*/
複製代碼

4.屬性嵌套

屬性和:之間用分號隔開

background:{
	color:#fff;
	image:none;
}
border: 2upx solid #dcdfe6 {
	radius:8upx;
}
//不用分號隔開會報錯
複製代碼

二. 運算

1. 除法

如下三種狀況 / 將被視爲除法運算符號：

• 若是值，或值的一部分，是變量或者函數的返回值

• 若是值被圓括號包裹

• 若是值是算數表達式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
複製代碼

三：宏定義@mixin

本質上就是函數實現樣式複用

好比垂直居中

@mixin t-center{ position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%)}複製代碼

四. 帶參數的mixin

假設封裝一個flex樣式

@mixin df($fd,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
複製代碼

本覺得大功告成，但是會遇到這種狀況

• 每次都要傳一些不變的參數，很難受

能夠設置默認參數

@mixin df($fd:row,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
複製代碼

• 不是每一個參數我都須要，怎麼辦？

能夠默認設置爲null，不傳入參數就不會顯示

@mixin df($fd:row,$jc:null,$ai:null,$as:null){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}
複製代碼

• 傳參順序錯了，容易會錯誤

咱們可能會這樣傳參@include df(center,center)但有時候第一個設置默認值了，這種狀況可使用關鍵詞傳參

@include df($jc:center,$ai:center)
複製代碼

• 傳入的某個參數是一組值怎麼辦，好比：flex

@mixin df($fd,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
 flex:xx;//?怎麼傳
}
複製代碼

可使用...寫在參數的後方

@mixin df($fd,$jc,$ai,$as,$flex...){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
 flex:$flex;
}
複製代碼

@include df($jc:center,$ai:center,$flex:1 auto 1)
複製代碼

其餘

!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"; }
複製代碼

@extend

用來擴展選擇器或佔位符。

.df {
	display:flex
}
.header {
	@extend .df;
}
=>
/*
.header {
	display:flex
}
*/
複製代碼

@at-root

@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層以後，想讓某個選擇器跳出，此時就可使用 @at-root。

.wrapper {
	width:100%;
	height:100%;
	@at-root .active{
	 	color:red
	}
}
=>
/*
.wrapper {
	width:100%;
	height:100%;
}
.active{
	 color:red
}
*/複製代碼

@content

@for

@for 指令包含兩種格式：@for $var from <start> through <end>或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外，$var 能夠是任何變量，好比 $i；<start>和 <end>必須是整數值。

之前要這麼寫

.wes { /* 多出部分用省略號表示 , 用於一行 */
    overflow:hidden;
    word-wrap:normal;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.wes-2 { /* 適用於webkit內核和移動端 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
} 
.wes-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.wes-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}複製代碼

如今只須要

@for $i from 1 through 4{
	.wes-#{$i} {
		overflow: hidden;
		@if($i==1){
			word-wrap:normal;
			white-space:nowrap;
			text-overflow:ellipsis;
		}
		@else{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: $i;
		}
	}
}複製代碼

對象操做

(key:value)

之前這麼寫

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }
複製代碼

如今只須要

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