史上最全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;}
}复制代码