点击查看 sass 官方文档
1.编译
初学可以在atom 中编译
- 安装命令 gem install sass
- atom中安装atom-sass ,mac 中“control+option+c”,windows中“Alt + Ctrl + c” 监控修改的样式文件；
在终端通过指令控制
- sass --watch sass文件夹名：css文件夹名 --style 编译后的格式
- sass --watch 单个scss文件名称：css文件名称 --style 编译后的格式
- "1，2"中的文件夹或者文件名称路径不能出错
通过终端输出的4种格式选择：
（1）nested
Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
（2）expanded
Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
（3）compact
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
（4）compressed
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
2.变量
//编译前
$color-white:#fff;
p{
color: $color-white;
}
//编译后
p {
color: #fff; }
/*# sourceMappingURL=scss-test.css.map */
3.嵌套
(1) 嵌套普通标签
//编译前
$color-white:#fff;
div{
height: 100px;
p{
color: $color-white;
}
}
//编译后
div {
height: 100px; }
div p {
color: #fff; }
（2）嵌套伪类:通过"&"实现
//编译前
a {
color: #fff;
&:active{
color: #000;
}
}
//编译后
a {
color: #fff; }
a:active {
color: #000; }
/*# sourceMappingURL=scss-test.css.map */
(3)在父级嵌套中，使用“&”引用父级
//编译前
.test {
color: #fff;
& {
color:#666;
}
& &_ss{
color: #999;
}
}
//编译后
.test {
color: #fff; }
.test {
color: #666; }
.test .test_ss {
color: #999; }
/*# sourceMappingURL=scss-test.css.map */
(4)嵌套属性
//编译前
div{
font:{size: 16px;
weight:400;
family:sans-serif;
}
border:2px solid #999{
left:4px;
right:4px;
}
}
//编译后
div {
font-size: 16px;
font-weight: 400;
font-family: sans-serif;
border: 2px solid #999;
border-left: 4px;
border-right: 4px; }
/*# sourceMappingURL=scss-test.css.map */
4.混合：@mixin 和 @include
1.基础
@mixin 名称 {
...
};
//编译前
@mixin test{
width:100px;
};
div{
@include test;
}
//编译后
div {
width: 100px; }
/*# sourceMappingURL=scss-test.css.map */
2.可以传参数
@mixin 名称 （option1,option2...）{
...
};
@mixin test($width){
width:100px;
};
div{
@include test(100px);
}
//编译后
div {
width: 100px; }
/*# sourceMappingURL=scss-test.css.map */
3.设置参数默认值
@mixin 名称 （option1:value1,option2:value2,option3,option4...）{
...
};
//编译前
@mixin test($width,$height:10px){
width:100px;
height:$height;
};
div{
@include test(100px);
}
//编译后
div {
width: 100px;
height: 10px; }
/*# sourceMappingURL=scss-test.css.map */
5.函数(functions)
（1）sass自带函数(更多自带方法请查看官网)
//编译前
.div1{
width: max(10px,20px,40px);
}
.div2{
height: min(10px,20px,40px);
}
.div3{
height: ceil(10.1px);
}
.div4{
height: floor(10.1px);
}
//编译后.div1 {
width: 40px; }
.div2 {
height: 10px; }
.div3 {
height: 11px; }
.div4 {
height: 10px; }
/*# sourceMappingURL=style.css.map */
(2)自定义函数
语法：
@function 函数名（参数1,参数2）{
...
}
//编译前
@function addWidth($width1,$width2){
@return $width1+$width2;
}
div{
width:addWidth(100px,20px);
}
//编译后
div {
width: 120px; }
/*# sourceMappingURL=scss-test.css.map */
(3)自定义函数取list颜色值
/*!
* 配置样式
*/
$color_list:("red":"#ff5050","white":"#fff");
/**
* 获取颜色
*/
@function get_color($key){
@return map-get($color_list,$key);
};
//使用方法
div{
color: get_color(red);
}
//编译后
div{
color:#ff5050;
}
6.继承扩展：@extend
@extend 会继承指定元素的所有样式，包括子元素的所有样式
//编译前
.test1{
width: 100px;
}
.test1 p{
color: #999;
}
.test2 {
@extend .test1;
height: 10px;
}
//编译后
.test1, .test2 {
width: 100px; }
//.test2也继承了.test1 的子元素p的样式
.test1 p, .test2 p {
color: #999; }
.test2 {
height: 10px; }
/*# sourceMappingURL=scss-test.css.map */
7.导入样式：@import
将多个文件中的样式导入到一个文件，减少http请求次数;
每个需要import的文件称为partials，文件需要以下划线“_”开头，如"_color.scss"，以“_”开头的文件不会编译生产对应的css文件；
//编译前
//_color.scss 文件内容:
.color-blue{
color: blue;
};
//style.scss 文件内容：
@import 'color';
//编译后
//不生成对应的_color.css
//style.css 文件
.color-blue {
color: blue; }
/*# sourceMappingURL=style.css.map */
8.注释 ：Comment
(1)多行注释
会出现在编译后的css文件中
/*
* 多行注释
*/
(2)单行注释
不会出现在编译后的css文件中
//单行注释
(3)多行强制注释
会出现在编译后的css文件中，即使文件压缩也会保留
/*！
* 多行强制注释
*/
9.SassScript 支持 6 种主要的数据类型：
数字，1, 2, 13, 10px //"number"
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz//"string"
颜色，blue, #04a3f9, rgba(255,0,0,0.5)//"color"
布尔型，true, false//"bool"
空值，null//"null"
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif//"list "
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
image.png
11.基础运算
(1)加：+
//编译前
.div1{
width: 10px+10px;
}
.div2{
width: 10px+10;
}
//编译后
.div1 {
width: 20px; }
.div2 {
width: 20px; }
/*# sourceMappingURL=style.css.map */
(2)减：-
//编译前
.div1{
width: 10px-5px;
}
.div2{
width: 10px-5;
}
//编译后
.div1 {
width: 5px; }
.div2 {
width: 5px; }
/*# sourceMappingURL=style.css.map */
(3)乘：*
//编译前
.div1{
//乘法计算的时候单位只能有一个，下面 10px*1px报错
width: 10px*1px;
}
.div2{
width: 10px*2;
}
//编译后
.div1{
//报错
width: 10px*px;
}
.div2 {
width: 20px; }
/*# sourceMappingURL=style.css.map */
(4)除：/
//编译前
.div1{
//不正确
width: 10px/2;
}
.div2{
//不正确
width: 10px/2px;
}
.div3{
//不正确
width: (10px/2px);
}
.div4{
//正确
width: (10px/2);
}
//编译后
.div1 {
width: 10px/2; }
.div2 {
width: 10px/2px; }
.div3 {
width: 5; }
.div4 {
width: 5px; }
/*# sourceMappingURL=style.css.map */
12.插值语句
语法：
#{}
//编译前
$height:10px;
$name:height;
/*
* @author:#{$name}
*/
.div-#{$name}{
#{$name}: #{$height};
};
//编译后
/*
* @author:height
*/
.div-height {
height: 10px; }
/*# sourceMappingURL=style.css.map */
