Sass 入门

1 什么是Sass & 为什么要用Sass

1.1 是什么

Sass（Syntactically Awesome Stylesheets）是 CSS的预处理器 ，是CSS的扩展

1.2 为什么

1. 是CSS的扩展，熟悉CSS的可以很快上手
2. 可以减少代码的重复
3. 代码更具有可维护性
4. 用它描述的文档具有干净的风格和结构
5. 让CSS具有了编程能力（变量、运算、条件、循环、函数……）
6. CSS预处理器包括Sass、Less、Stylus等，这些CSS预处理器各有千秋，Sass相较于其他来说，功能上会更强大一些，且拥有一些成熟的框架（如Compass、Susy……）

2 Sass安装与使用

2.1 安装

1. 下载 Ruby
2. 安装sass，通过在命令行中运行

gem install sass

2.2 使用

2.2.1 创建Sass文件

首先创建Sass文件（像CSS一样的文本文件），后缀名为.scss，意思为 Sassy CSS。

2.2.2 生成CSS

命令行运行以下语句可以将Sass文件编译为CSS文件

sass sass/style.scss css/style.css

2.2.3 添加监视

上一小节的方法是手动生成CSS，如果需要自动生成，则需要添加监视：

sass --watch sass/style.scss:css/style.css

添加监视后，无需每次手动生成CSS，每当SCSS文件保存后，就会自动生成对应的CSS
退出监视：ctrl + c

2.2.4 压缩

在编译的时候带上参数 --style compressed:

sass sass/style.scss css/style.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格

3 Sass特性

3.1 变量

Sass中的变量以$开头。

//定义变量
$color-yellow:#FFE100;
//使用变量
div{
	color:$color-yellow;
}

3.2 嵌套

在CSS的编写中，多层结构会写很多重复的code：

.main{...}
.main .content{...}
.main .content ul{...}
.main .content ul li{...}

而在Sass中，可以写成：

.main{
	...
	.content{
		...
		ul{
			...
			li{
				...
			}
		}
	}
}

使代码更具有结构化，且避免了不必要的重复，但需注意不宜嵌套过深。

3.3 父元素引用

在嵌套子层级中，可以使用&引用父元素

.div{
	&:hover{
		background:#333;
	}
}

3.4 运算

$screen-100vw;
$screen-height:100vh;
div{
	$screen-width / 2;
	height:$screen-height - 100px;
}

3.5 继承

允许一个选择器继承另一个选择器，关键字为 @extend

//父类选择器
.btn{
	padding:4px 12px;
}
//子类继承
.btn-1{
	@extend .btn;
	background-color:#333;
}

3.6 混合mixin

mixin是一种可以重用的代码块，可传递参数，关键字为 @mixin ， @include
不传参时类似继承，但不占用选择器名

//定义
@mixin btn{
	padding:4px 12px;
}
//使用
.btn-1{
	@include btn;
	background-color:#333;
}

传参

//定义
@mixin btn($background:#fff){
	padding:4px 12px;
	background:$background;
}
//使用
.btn-1{
	@include btn(#333);
}

3.7 条件语句

@if、@else一般配合@mixin使用

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

3.8 插值

插值#{}一般与循环在一起使用，如下一小节

3.9 循环

3.9.1 for循环

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

3.9.2 while循环

$i: 10;
@while $i > 0 {
　　.item-#{$i} {  2px * $i; }
　　$i: $i - 2;
}

3.9.3 each循环

$img-list:a b c;
@each $img in $img-list {
　　.#{$img} {
　　　　background-image: url("/image/#{$img}.jpg");
　　}
}

3.10 颜色函数

常用的颜色函数主要是加深darken和减淡 lighten

$color-yellow:#FFE100;
$color-yellow-light:lighten($color-yellow,20%);
div{
	color:darken($color-yellow-light,10%);
}

3.11 自定义函数

//定义
@function double($n) {
　　@return $n * 2;
}
//使用
#sidebar {
　　 double(5px);
}

3.12 引用外部scss文件

可以根据component来分成多个scss文件来写样式，最后统一引入主scss文件，或者引用一些通用的样式，如变量定义文件_variables.scss、mixin定义文件_mixins.scss等

@import "general/variables";
@import "general/mixins";

@import "components/header";
@import "components/login";