sass使用

SASS

• SASS官网

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

• sass 是一个 css 的预编译工具

• 也就是能够 更优雅 的书写 css

• sass 写出来的东西 浏览器不认识

• 依旧是要转换成 css 在浏览器中运行

• 这个时候就需要一个工具来帮我们做

Sass 扩展了 css 的特性：
变量
嵌套规则
@import导入样式
@mixin 混合器及传参
@extend 继承

Sass和Scss

Sass包括两套语法：
最开始的语法叫做“缩进语法”，使用缩进来区分代码块，并且用回车将不同规则分隔开；
而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。
通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。

.sass文件
body    
	background-color: red    
	font-size: 16px
div    
	color: red

.scss文件
body{    
	background-color: red;    
	font-size: 16px;
}

安装 sass 环境

安装Sasssass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
安装完成后需测试安装有没有成功,运行CMD输入以下命令：ruby -v
//如安装成功会打印
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源：
//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内gem源
gem sources --add https://gems.ruby-china.com/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://gems.ruby-china.com
安装 Sass 输入下面的命令：
gem install sass
验证安装情况：
sass -v
Ruby Sass 3.7.4
Sass常用命令：
//更新
sassgem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h

编译 sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-sass等。
命令行编译

//单文件转换命令
sass sass/a.scss css/a.css --style expanded
sass sass/a.scss:css/a.css --style expanded
//单文件监听命令
sass --watch sass/input.scss:css/output.css --style expanded
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch sass:css --style expanded
监听目录sass中的所有scss文件，输出到目录css中，编译格式为expanded

编译配置选项
sass内置有四种编译格式：nested、expanded、compact、compressed

/* 未编译样式 */
.box {    
	width: 300px;    
	height: 400px;    
	&-title {        
		height: 30px;        
		line-height: 30px;    
	}
}

nested 编译排版格式（嵌套的）

/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {    
	width: 300px;    
	height: 400px; }    
	.box-title {        
		height: 30px;        
		line-height: 30px; }

expanded 编译排版格式（展开的）

/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {    
	width: 300px;    
	height: 400px;
}
.box-title {    
	height: 30px;    
	line-height: 30px;
}

compact 编译排版格式（紧凑的）

/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式（压缩的）

/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30

软件方式编译

koala 和 codekit,它们是优秀的编译器，界面清晰简洁，操作起来也非常简单。 gulp-sass-china
koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
koala：http://koala-app.com/index-zh.html

注：以下均为scss语法

变量

sass使用$符号来标识变量

$nav-color: #F90;
$width: 100px;
nav {    
	width: $width;    
	color: $nav-color;
}
//编译后
nav {    
	width: 100px;    
	color: #F90;
}

嵌套规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。Sass允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

#box{    
	width:100px;    
	height:100px;    
	h1{        
		text-align:center;    
	}    
	span{        
		font-size:16px;        
		a{            
			color:blue        
		}    
	}
}
//编译后
#box {    
	width: 100px;    
	height: 100px;
}
#box h1 {    
	text-align: center;
}
#box span {    
	font-size: 16px;
}
#box span a {    
	color: blue;
}

父选择器的标识符&

a {    
	background-color:red;    
	&:hover{        
		font-size:60px;    
	}
}
//编译后a {    
	background-color: red;
}
a:hover {    
	font-size: 60px;
}

@import导入样式

css有一个特别不常用的特性，即@import url()规则，它允许在一个css文件中导入其他css文件。 页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完(DOM)之后再加载。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。@import “sidebar”;这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

// a.scss
$width : 100px;
.before {    
	width: $width;
}
@import "b";
.after {    
	width: $width;
}
.container {    
	width: $width;    
	height: $height;    
	border: 1px solid;
}
// b.scss
$width : 200px;
$height : 200px

编译后

// a.css
.before {    
	width: 100px;
}
.after {    
	width: 200px;
}
.container {    
	width: 200px;    
	height: 200px;    
	border: 1px solid;
}

// bgblue
.scssaside {    	
	background: blue;    
	color: white;
}
.bluebox {   
	 @import "bgblue"
}
//生成的结果
.bluebox {    
	aside {        
		background: blue;        
		color: #fff;    
	}
}

混合器（宏） @mixin

可以通过sass的混合器实现大段样式的重用。

@mixin no-bullets {    
	list-style: none;    
	li {        
		list-style-image: none;        
		list-style-type: none;        
		margin-left: 0px;    
	}
}
ul.plain {    
	color: #444;    
	@include no-bullets;
}
// 编译后：
ul.plain {    
	color: #444;    
	list-style: none;
}
ul.plain li {    
	list-style-image: none;    
	list-style-type: none;    
	margin-left: 0px;
}

给混合器传参

@mixin link-colors($normal, $hover, $visited) {    
	color: $normal;    
	&:hover {        
		color: $hover;    
	}    
	&:visited {        
		color: $visited;    
	}
}
a {    
	@include link-colors(blue, red, green);
}
// 编译后：
a {    
	color: blue;
}
a:hover {    
	color: red;
}
a:visited {    
	color: green;
}

@extend 使用选择器继承来精简CSS

.error {    
	border: 1px solid red;    
	background-color: #fdd;
}
.seriousError {    
	@extend .error;    
	border-width: 3px;
}
// 编译后：
.error {    
	border: 1px solid red;    
	background-color: #fdd;
}
.seriousError {    
	border: 1px solid red;    
	background-color: #fdd;    
	border-width: 3px;
}

@if

// 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
p {   
	 @if 1 + 1 == 2 { border: 1px solid; }    
	 @if 5 < 3 { border: 2px dotted; }    
	 @if null { border: 3px double; }
}
// 编译为
p {    
	border: 1px solid;
}

@for

// @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
@for $i from 1 through 3 {    
	.item-#{$i} { width: 2em * $i; }
}
或者
@for $i from 1 to 4 {    	
	.item-#{$i} { width: 2em * $i; }
}
// 编译为
.item-1 {    
	width: 2em;
}
.item-2 {    
	width: 4em;
}
.item-3 {    
	width: 6em;
}

@function

// Sass支持自定义函数，并能在任何属性值或Sass script中使用：
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {    
	@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
// 编译为#sidebar {    
	width: 240px;
}