scss入门到精通

css预处理器出现的原因

无法嵌套书写导致代码的繁重，逻辑混乱
没有变量和样式复用机制，属性值只能以字面量方式重复输出

css预处理器介绍

1. scss/sass

sass在2007年诞生，最早是最成熟的css预处理器，拥有ruby社区支持和compass这一最强大css框架，目前已经更新到了全面兼容的scss

2. Less

less在2009年诞生，借鉴了sass的长处，并兼容了css的语法，使开发者使用非常顺手，但是相比于sass，他的功能不够丰富，反而促使sass更新成了scss

3. Stylus

stylus于2010年诞生，出自nodejs社区，主要用来给node项目进行css预处理支持，人气叫前俩者偏低

scss和sass的区别

sass是在scss之前的一个语法，提供了一个更为简洁的css编写方式，它使用缩进，而不是大括号来表示嵌套，并且使用换行符来分割属性，不是分号，语法后缀为.sass

scss是更新后的语法，是css语法的扩展，这意味着每个有效的css样式表都是具有相同含义的有效scss文件，sass增强了此语法，后缀名为.scss

使用css预处理器的优缺点

优点是css预处理器为css增加了一些编程的特性，无需考虑浏览器兼容性问题，支持嵌套，变量等，可以让css变得更简洁，提高代码的复用性，逻辑分明等

缺点是css的文件体积和复杂度变得不可控，增加了调试的难度和成本等

选择scss的原因

完全兼容css3
在css的基础上增加变量，嵌套，混合等
通过函数进行颜色值与属性值的运算
提供控制指令等高级功能

安装scss方式

不依赖编辑器方式

全局安装css预处理器，使用终端命令进行安装

node环境下的node-sass模块
node环境下的dart-sass模块
Ruby环境下的sass
Dart环境下的sass

开发环境推荐使用dart-sass，性能更好

依赖编辑器方式

在vscode中安装Easy Sass（编辑）和Sass（代码提示）俩个插件

SassScript语法

注释

单行注释		//
多行注释		/* */

单行注释在编译后不会生成到.css文件中，但是多行注释在/*！*/后加上！就可以生成到编译后的文件中去

变量定义

变量以美元符开头，赋值方法跟css属性的方法一样

$width:600px;
$back-color:red;

变量使用

直接使用变量的名称就可以调用变量

p{
	width:$width;
	height:1200px;
	background:$back-color;
}

变量作用域

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）。不在嵌套规则内的变量则可以在任何地方使用（全局变量）
在局部变量的后面加上!global可以转成全局变量

p{
	$width:5rem !global;
	//嵌套规则内依旧可以正常使用
	width:$width
}
saan{
	//加上！global之后。嵌套之外的也能用到了
	width:$width
}

数据类型（7种）

数字类型 ：1，2，3，10px，5等都是数字类型

字符串类型：有引号的字符和无引号的字符 ‘foo’,foo

颜色类型：blue,#ffffff,rgba(#04a3f9)

布尔类型：true,false

空值类型：null

数组类型：用空格和逗号分隔 1.5rem 1rem,2,array

maps类型：相当于js的对象类型

判断数据类型

type-of($value)

运算
数字运算符

关系运算符

相等运算符

布尔运算符

运算符优先级

0.()
1.* / %
2.+ -
3.><>=<=

嵌套语法

.box{//爷
	width:200px;
	height:200px;
	div{//父
		width:100%;
		height:100px;
		p{//孙
			color:red;
			//...以此类推
		}
	}
}

父级选择器

button{
	background-color:red;
	&:hover{
		background-color:blue
	}
}

默认值 ！default

如果设置默认值的变量只出现了一次，那么编译后就是设置默认值之后的样式，如果还有相同变量，无论在前还是后，默认值都会被覆盖掉

$content:'111';
$content:'222' !default;
$new_content:'333' !default;
main{
	content:$content;
	new_contnt:$new_content;
}
编译结果为
main{
	content:'111';
	new_contnt:'333';
}

转全局变量 ！global

p{
	$width:5rem !global;
	//嵌套规则内依旧可以正常使用
	width:$width
}
saan{
	//加上！global之后。嵌套之外的也能用到了
	width:$width
}

引入@import

不能引入文件后缀为.css文件；
不能引入文件名以http://开头的
不能引入文件名是url()的

使用俩种引入方式
@import "header.scss";
@import "footer"

@extend继承

.p{
	color:red;
	background:red;
	font-size:18px;
	line-height:5000;
}
.s{
	//要继承谁的样式就把谁的选择器放到@extend后面
	@extend .p
}
.f{
	//可以直接继承.s
	@extend .s
}

三元运算符

编译成功后颜色值会变为十六进制的

p{
	color:if(1+1==2,green,yellow)
	//结果为green
	color:if(1+1!=2,green,yellow)
	//结果为yellow
}

if…else语句

当@if语句的表达式返回值不是false或null时候则输出{}里面的执行语句

p{
	@if 1+1==2{
		color:red;
	}
}
//编译成功后
p{
	color:red;
}

@if声明后面可以跟多个@else if声明，或者一个else声明，如果@if声明失败，scss则会逐条逐行执行@else if声明，如果以上全部失败则执行@else里面的执行语句

p{
	@if 1+1 !=2{
		color:red;
	}@else{
		color:blue;
	}
}
编译结果为
p{
	color:blue;
}

$color:2;
p{
	@if $color ==0{
		color:red;
	}@else if $color==1{
		color:blue;	
	}@else{
		color:yellow	
	}
}
编译结果为yellow

for循环

语法：
@for $var from <start> through <end>
或者@for $var from <start> to <end>

to和through都包含start的值，但是to不包含end的值，through包含

@for $i from i through 3{
	.item-#{$i} {width:2em * $i;}
}
编译成功后
.item-1{
	width:2em;
}
.item-2{
	width:4em;
}
.item-3{
	width:6em;
}

for循环例子