【項目實戰】sass使用基礎篇（上）

2020 年 8 月 6 日
筆記
javascript, React, VUE

Sass是一種CSS預處理語言。CSS預處理語言是一種新的專門的程式語言，編譯後形成正常的css文件，為css增加一些編程特性，無需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於程式碼的維護等諸多好處。

CSS預處理語言有Scss(Sass) 和Less、Postcss。

Scss和Sass

sass一開始用的是一種縮進式的語法格式

採用這種格式文件的後綴名是.sass

在sass3.0版本後我們常用的是sassy css語法，擴展名是.scss，更接近與css語法

區別：

後綴名不同 .sass和.scss
語法不同，請看下面

新版：

/*新版本
多行文本注釋*/

//新版本
//單行文本注釋

@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里我們可以定義多個變數來存放顏色、邊框等等的樣式，這樣就可以在下面想要使用樣式的時候使用變數了

這樣的優點就是便於維護，更改方便

變數的使用

可以通過$來定義變數，在變數名字中可以使用-和_來作為連接，並且-和_是可以互通的，就是用起來一模一樣。

變數的值可以是字元串、數字、顏色等等，在變數里還可以使用其他變數，使用的時候直接寫變數名就好了

例如

$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;
}

嵌套的使用

合理的使用嵌套語法，可以使我們編寫程式碼更為快捷

假設我們想寫這樣的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;
		}
	}
}

大家會發現，寫出來的程式碼父和子之間都有空格隔開，如果我們需要給a加上偽類的話我們這樣寫

.nav{
    height:100px;
    a{
        color:#fff;
        :hover{
            color:#ff6600;
        }
    }
}

在裡面就會出現這樣的情況

.nav a :hover {
  color: #ff6600;
}

我們發現在a和:hover之間有了空格，這樣是不好的，所以我們需要在寫的時候在：hover之前把a加上，這樣就需要用到在之類里引用父類選擇器的方式，我們可以用&符號代替父類

例如：

.nav{
    height:100px;
    a{
        color:#fff;
        &:hover{
            color:#ff6600;
        }
    }
}

這樣就好了，下面來個完整的程式碼：

.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;
}

嵌套屬性

我們可以把一些複合屬性的子屬性來嵌套編寫，加快編寫速度，例如

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 混合

你可以把它想像成一個有名字的定義好的樣式

每一個mixin都有自己的名字，類似於js里的函數定義方法如下

@mixin 名字(參數1，參數2...){
    ...
}

使用方法是在其他選擇器css樣式里通過@include引入，其實就相當於將mixin里的程式碼寫入到這個選擇器的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;
}

剛才是沒有參數的mixin，mixin也可以擁有參數，需要注意的是：

形參的名字前要加$
傳參的時候只寫值的話要按順序傳
傳參的時候不想按順序的話需要加上形參名字

例如：

@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

如果我們有一個選擇器想要擁有另一個選擇所有的東西，不管是樣式還是子元素等等，可以使用@extend來繼承

大家需要注意的是，b繼承a的時候，a的子元素設置了樣式，也會給b的子元素設置樣式，達到完全一樣的情況，例如：

.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的時候，一個css引入另一個css需要使用@import，其實這是不好的，會多發一次http請求，影響咱們站點的響應速度。

在sass里，咱們可以把小的sass文件分出去，叫做partials，在某個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里的注釋有三種

多行注釋
單行注釋
強制注釋

多行注釋：壓縮後不會出現在css里 /* */

單行注釋: 不會出現在css里 //

強制注釋：壓縮後也會出現在css里 /*! */

sass的基礎使用方法就介紹到這裡，文章持續更新，後續更新sass高階用法，關注公眾號第一時間閱讀。

Tags: javascript React VUE