菜鸟的 Sass 学习笔记
介绍
sass 是什么？？ 在sass的官网，它是这么形容给自己的
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
sass 是世界上最成熟稳定强大的css扩展语言。
sass并不是一种编程语言，但是我们可以用于开发网页样式，你可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件。
css兼容：Sass与所有版本的CSS完全兼容。
功能丰富：Sass拥有比任何其他CSS扩展语言更多的功能和能力。
成熟：Sass由其热爱的核心团队积极支持十多年。
社区：Sass由几家科技公司和数百名开发商的联盟积极支持和开发。
构架：有无数的框架与Sass建立。 Compass, Bourbon, Susy 等等。
安装
先安装Ruby,再安装sass →gem install sass
更详细的安装→http://sass-lang.com/install
学习记录
1.变量
对于一个项目比如说像主要的颜色，或者说所有border的样式，这些比较重要的信息或者是在项目中重复使用的，在sass可以使用$来定义变量。
如果遇到突然项目整一个的border的颜色要改变，那么我们直接修改定义的变量border的颜色就可以了。
例：
//定义变量 $primary-border:1px solid #eee; $primary-color:#488aff; //使用变量 .test{ border: $primary-border; color: $primary-color; } //编译结果 .test { border: 1px solid #eee; color: #488aff; }
2.嵌套
sass允许css规则彼此嵌套，它具有明确的嵌套和可视化层次结构。但是请注意过度的嵌套会导致后期难以维护。
例如:
#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } }
编译后：
#main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }
引用父选择器
使用&来替代父选择器，&必须在复合选择器的开头，甚至可以跟一个被添加到父选择器的后缀
例：
#main { color: black; a { font-weight: bold; &:hover { color: red; } } &-sidebar { border: 1px solid; } }
编译后：
#main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; } #main-sidebar { border: 1px solid; }
嵌套属性
比如font-family，font-size和font-weight都在font命名空间,如果在同一个命名空间设置很多它的属性，挺麻烦的，sass提供这样的方式，只要写一次命名空间，然后嵌套他的每个子属性。
.funky { font: { family: fantasy; size: 30em; weight: bold; } }
属性名称空间本身还可以有一个值
例如：
.funky { font: 20px/24px fantasy { weight: bold; } }
编译后：
.funky { font: 20px/24px fantasy; font-weight: bold; }
3.注释
Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留，而单行注释编译后就被删掉了。
例
/* 我是 * 多行 * 注释 */ //我是我是我是单行注释 body { color: black; }
编译后：
/* 我是 * 多行 * 注释 */ body { color: black; }
如果是很重要的注释，即使是压缩模式编译后也存在/*加一个感叹号
/*！ * 超级重要注释 */
在注释中也可以使用变量
$version: "1.0.0"; /* 版本号 #{$version}. */
编译后
/* 版本号 1.0.0. */
4.Import
假设现在有两个sass文件，bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。
然而导入的可是css文件，http:// 或者是url()
比如：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
也可以一个import导入多个
@import "rounded-corners", "text-shadow";
这是一个示例：
_part.scss
ul, ol { margin: 0; padding: 0; }
base.scss
@import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
@import嵌套导入
例如现在有一个这个example.sass文件里面有以下内容
.example { color: red; }
导入example
#main { @import "example"; }
编译结果
#main .example { color: red; }
5.Mixin
我们使用@mixin定义一个代码块，然后用@include调用这个代码块。
@mixin border{ border:1px solid #ee; } div{ @include border }
编译后：
div { border: 1px solid #ee; }
还可以指定参数
@mixin border($color:#eee){ border:1px solid $color; }
div{
@include border(#eee);
}
6.颜色
颜色值支持所有算术运算
p { color: #010203 + #040506; }
计算01 + 04 = 05，，02 + 05 = 07和03 + 06 = 09，并编译为：
p { color: #050709; }
p { color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); } //编译为： p { color: rgba(255, 255, 0, 0.75); }
它还提供了一些内置的颜色函数
hsl（$ hue，$ saturation，$ lightness）：从色调，饱和度和亮度值创建颜色。
hsla（$ hue，$ saturation，$ lightness，$ alpha）：从色调，饱和度，亮度和Alpha值创建颜色。
还有更多的关于内置的颜色函数可以看这里 →http://sass-lang.com/documentation/Sass/Script/Functions.html
7.继承@extend
sass允许一个选择器去继承另外一个选择器.
.test1 {border: 1px solid #eee;} .test2 {@extend .test1;color:white;}
编译后
.test1, .test2 { border: 1px solid #eee; } .test2 { color: white; }
8.@debug @warn @error
@debug和@warn，指令将SassScript表达式的值打印到标准错误输出流，它有助于调试。
@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"
输出
WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出
9.控制指令和表达式
sass支持基本的控制指令和表达式控制，指令是高级功能，下来来介绍一下。
@if()
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } }
编译后
p { border: 1px solid; }
@if声明可以跟着几个@else，@if语句和一个@else语句。如果@if语句失败，@else if则会按顺序尝试这些语句。
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == monster { color: green; } @else { color: black; } }
编译后
p { color: green; }
@for
该@for指令重复输出一组样式。对于每次重复，使用计数器变量来调整输出。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
编译后
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
@each
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }
编译后
.puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .egret-icon { background-image: url("/images/egret.png"); } .salamander-icon { background-image: url("/images/salamander.png"); }
@while
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
编译后
.item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
10.功能指令#function
可以在sass中定义自己的函数，并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。
例如：
//定义变量 $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; }
编译
sass编译输出的默认CSS样式，可以执行-style命令行来选择四种不同的输出样式
:nested
nested样式是默认的Sass样式，因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行，但缩进不是常量。根据嵌套的深度，每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用：它可以让您轻松掌握文件的结构，而无需实际读取任何内容。
#main { color: #fff; background-color: #000; } #main p { width: 10em; }
:expanded
expanded是一个更典型的人造CSS风格，每个属性和规则占一线。属性在规则中缩进，但是规则不以任何特殊方式缩进。
#main { color: #fff; background-color: #000; } #main p { width: 10em; }
:compact
compact采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行，每行都在该行上定义。嵌套规则彼此相邻，没有换行符，而单独的规则组在它们之间具有换行符。
#main { color: #fff; background-color: #000; } #main p { width: 10em; }
:compressed
compressed样式占用尽可能少的空间，除了分隔选择器和文件末尾的换行符之外，没有空格。它还包括一些其他轻微的按压，例如选择最小的颜色表示。这并不意味着人的可读性。
#main{color:#fff;background-color:#000}#main p{width:10em}
ps:
sass 官网 →http://sass-lang.com/
sass github →https://github.com/sass
sass一个在线将sass编译为css的网站 →https://www.sassmeister.com/
此随笔乃本人学习记录，如有疑问欢迎在下面评论，转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。
