SASS的認識

一.sass/scss的認識

今天我們來認識一個CSS的預處理器-------sass/scss，它可以讓我們把css當成js來寫，可以有變量，字符串，嵌套，函數，引入，擴展，循環，計算等等邏輯處理，讓樣式的編程不可那麼的單一化，也可以減少 CSS 重複的代碼，節省開發時間。

二.變量

變量可以存儲以下信息：

• 字符串
• 數字
• 顏色值
• 布爾值
• 列表
• null 值

 通過變量的形式 我們可以通過修改一個變量來達到全局的效果 ，而不是複用的要是修改都要全部修改，我們可以定義一下項目默認字體大小，基本顏色，邊框 等待常用配置， 變量支持塊級作用域，有全局變量跟局部變量，而定義變量我們用是$,跟PHP定義變量一樣，而不是前端的var,let;

	$myColor: #f50; //全局變量
	div {
		$_selfColor : #fd0 !global; //局部變量 要想變成全局變量 需要添加 !global，這樣就可以在其他地方拿到
		color: $myColor;
		span {
			color: $_selfColor;
		}
	}
	.name{
		color: $_selfColor;
	}
================================================
編譯後就是
div {
  color: #f50;
}
div span {
  color: #fd0;
}

.name {
  color: #fd0;
}

三. 嵌套規則

sass可以讓我們類似於html嵌套那樣的一層一層的嵌套下去,避免了重複輸入父選擇器，而且令複雜的 CSS 結構更易於管理,而有時候我們需要用到父級元素，這裏我們可以用&代替，可以讓我們省下很多重複性東西，而且嵌套也遵守選擇器的方法 比如子級選擇器，序選擇器，id選擇器等等

$myColor: #f50; //全局變量
	div {
		$_selfColor : #fd0 !global; //局部變量 要想變成全局變量 需要添加 !global，這樣就可以在其他地方拿到
		color: $myColor;
		// div下面的所有
		span {
			color: $_selfColor;
		}
		// div的第一級a
		>a{
			font-size: 12px;
		}
		p{
			font-weight: bold;
		}
		// & 代表嵌套規則外層的父選擇器。z這裏只的是div 當前作用域的元素
		&:hover{
			color: #F0AD4E;
		}
	}
================================================
編譯後就是
div {
  color: #f50;
}
div span {
  color: #fd0;
}
div > a {
  font-size: 12px;
}
div p {
  font-weight: bold;
}
div:hover {
  color: #F0AD4E;
}

還有一個屬性嵌套的規則，把通過屬性的通過鍵值對的形式顯示出來

/* 屬性嵌套 */
		div{
			font :{
				size: 12px;
				weight : bold;
				
			}
		}
===================================
編譯後 
div {
  font-size: 12px;
  font-weight: bold;
}

還有一個 @import嵌套  和 命名嵌套，

//命名嵌套
.name{
		color: #f00;
		&-name{
			font-size: 12px;
		}
	}
=========================
.name {
  color: #f00;
}
.name-name {
  font-size: 12px;
}


//@import嵌套
//index.scss'內容
	.name-title{
		color: #f00;
	}
	//在其他文件引入
	.name{
		@import '../index.scss';
	}
	===========
	.name{
		.name-title{
			color: #f00;
		}
	}

四.運算

sass也支持跟編程一樣的加減乘除運算，它除了數字的運算，還可以顏色值的計算，字符串的計算，布爾值的計算，數組的計算 ，其運算規則跟JS的計算規格差不多,更多的可以去官網查看

div {
		font-size: (10px + 10px); //數字計算
		color: (#f40500 + #040506); //顏色值計算
		content: "Foo "+ 'Bar'; //字符串計算

	}
==================
div {
  font-size: 20px;
    color: #f80a06;
  content: "Foo Bar";
}

 五.函數

sass也可以像編程一樣定義函數，在需要的地方引入 ，規則也是差不多，也有參數傳遞，通過 @function 定義，function名字調用；函數裏面也可以做邏輯運算，但要通過 @return 返回計算結果; 參數的話要通過變量的形式傳入，比如 參數名字是n 那要寫成$n 而不是n;

@function grid-width($n) {
	  @return $n + 19px
	}
	div {
		width: grid-width(5);

	}
=============================
div {
  width: 24px;
}

它也支持 使用關鍵詞參數

//定義函數
	@function grid-width($n) {
	  @return $n + 19px
	}
	div {
		width: grid-width($n : 10);  //關鍵詞參數
	}
==========================
div {
  width: 29px;
}

六.混合指令 @mixin

mixin跟函數差不多，也是定義引用，也支持關鍵詞參數;不過跟函數不一樣的,他是通過 @include 來引入的，而且內容可以多層嵌套

@mixin test($color:blue) {
		background: $color;
		span{
			color: #f00;
		}
	}
	div{
		@include test(#ff0040);
	}
==========================
div {
  background: #ff0040;
}
div span {
  color: #f00;
}

而且sass的mixin還可以用類似於vue組件那種插槽solt來進行佔位，通過 @content來佔位

@mixin test {
		div{
			@content;
		}
	}

	@include test {
		span {
			color: blue;
		}
	}
========================
div span {
  color: blue;
}

七.@extend

@extend擴展，有點類似於編程的class的extend，它可以讓我們複製一個相同樣式，而不用重複的寫相同的代碼，也不用寫一堆的類名，也可以引入多個 ，用逗號隔開  這個跟我們在html寫多個類名的效果差不多

.fz30{
		font-size: 30px;
	}
	
	.btn{
		border-radius: 10px;
		padding: 10px 20px;
		border: none;
		box-sizing: border-box;
	}
	.btn-success{
		@extend  .btn,.fz30;
		color: green;
		background: transparent;
		border: 1px solid currentcolor;
	}
===================================
.fz30, .btn-success {
  font-size: 30px;
}

.btn, .btn-success {
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  box-sizing: border-box;
}

.btn-success {
  color: green;
  background: transparent;
  border: 1px solid currentcolor;
}

八.控制指令---@if,@for,@each

sass也可以像編程那樣進行條件判斷，數據循環這類操作，

一.@if條件判斷，滿足對應的條件執行對應的代碼，其他的代碼樣式忽略

$type : ocean;
	.btn {
		@if $type==ocean {
			color: blue;
		}

		@else if $type==matador {
			color: red;
		}

		@else if $type==monster {
			color: green;
		}

		@else {
			color: black;
		}

	}
=====================
.btn {
  color: blue;
}

二.@for​​​​​​​ 循環 有時候我們有一個列表的圖表 或者精靈圖 要寫很多類似的樣式  通過循環我們可以省下很多代碼，

循環有兩種寫法，一個是  @for $var from <start> through <end> 這個包含開始和結束長度 一個是 @for $var from <start> to <end>，只包含開頭，不包含結束長度

//包含一 不包含 3
	@for $i from 1 to 3 {
		.name_#{$i}{
			width: 2em * $i;
		}
	}
==========================	
.name_1 {
  width: 2em;
}

.name_2 {
  width: 4em;
}


==========================	
//包含一 也包含 3
	@for $j from 1 through 3 {
		.names_#{$j}{
			width: 2em * $j;
		}
	}
============================
.names_1 {
  width: 2em;
}

.names_2 {
  width: 4em;
}

.names_3 {
  width: 6em;
}

 三. @each有點類似JS的for..in..,寫法爲$var in <list>, $var 可以是任何變量名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表

//類別字符串
@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");
}

======================================
列表爲數組
@each $animal in [a,b,c,d] {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
========================
.a-icon {
  background-image: url("/images/a.png");
}

.b-icon {
  background-image: url("/images/b.png");
}

.c-icon {
  background-image: url("/images/c.png");
}

.d-icon {
  background-image: url("/images/d.png");
}

 九,sass封裝的函數

這裏就不介紹，可以去菜鳥教程-SASS進行查看，有一下對字符串，數組，數字，顏色的處理的函數