Sass学习总结
Sass作为CSS的一种延伸，我知道之后内心一直十分喜悦。
Sass可以做运算，可以配置，可以嵌套，非常灵活。
写在前面！
compass是基于SASS二次开发的工具。
1、SASS最后是生成CSS！！！
2、SASS自3.0以后就使用*.scss为后缀，而不再使用*.sass(空格敏感)
3、问题是bootstrapV4 需要写或生成sass吗？
现在开始！
1、使用变量
1.1、声明变量
老版本用"!",新版用"$" ,理解为类似 JS 的 var 之类的
$highlight-color: #F90;
1.2、声明引用
$highlight-color:#F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}//编译后
.selected {
border: 1px solid #F90;
}
PS：SASS中不分下划线_和短横线-
$link-color: blue;
a {
color: $link_color;
}
2、嵌套CSS规则
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
2.1、父选择器的标识符&
如果未加入&符号，则article所有的子元素都会被hover时变成红色。
加入后则，只有父类本身变色。
article a { color: blue;
:hover { color: red }
}
2.2、群组选择器的嵌套
所有.container的 h1、h2、h3同时嵌套，不用再重复书写。
.container {
h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
a {color: blue}
}
2.3、子组合选择器和同层组合选择器：>、+和~
> : 子组合选择器 : 代表直接紧跟的子元素
article section { margin: 5px }
article section { border: 1px solid #ccc }
上例中，第一个选择器会选择article下的所有命中section选择器的元素。
第二个选择器只会选 着的子元素中命中section选择器的元素。
+ ： 同层相邻组合选择器 代表只关联同层且相邻的元素。
header p { font-size: 1.1em }
~ : 同层全体组合选择器:代表只要是同层，不管在是否相邻都能关联。
article ~ article { border-top: 1px dashed #ccc }
组合拳：
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
SASS会自动解套并重新组合在一起：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
2.4、嵌套属性
只需要输入一个border~~~ 效率就是生产力！！！
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
3、导入SASS文件
3.1、使用SASS部分文件
你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";
引入sass可以重复利用。便于编程。
3.2、默认变量值 !default
一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。
3.3、嵌套导入
有一个文件 _blue-theme.scss，内容如下：
aside {
background: blue;
color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。.blue-theme {
aside { background: blue;
color: #fff;
}
}
3.4、原生的CSS导入;
由于sass兼容原生的css，所以它也支持原生的CSS@import 。尽管通常在sass中使用@import 时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import ：
被导入文件的名字以
.css结尾；被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是
CSS的url()值。
因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀导入进来。
4、静默注释
SASS生成CSS时，将会删掉注释。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
5、混合器 @mixin
混合器使用@mixin标识符定义。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
我理解为它不带参数时，是一种嵌套。但在使用上，会更加灵活！另外，@mixin支持带参数，更加灵活。
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
5.1、何时使用混合器
略。
5.2、混合器中的CSS规则
这是不带参数的混合器，并且说明，混合器内支持css嵌套。
设置一个混合器：
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
在sass中使用这个混合器：
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;
}
5.3、给混合器传参
设置一个混合器：
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue;}
a:hover { color: red; }
a:visited { color: green; }
sass允许通过语法$name: value的形式指定每个参数的值。
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover: red
);
}
5.4、默认参数值
为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
如果这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为 red。
6、使用选择器继承来精简CSS @extend
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。
6.1、何时使用继承
其中一个类，是另外一个类的细化时。
比如，.error是基础 ；.seriousError是细化
6.2、默认参数值
.error{
color:red;
}
.seriousError{
@extend .error;
border:1px solid red;
}
6.3、继承的工作细节
关于@extend有两个要点你应该知道。
跟混合器相比，继承生成的
css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。继承遵从
css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。
PS : @extend 不能用嵌套多种选择器。
7、小结
SASS文件是基于Ruby的，如果要使用，请安装Ruby。
SASS是CSS的高级编辑器，最后会生成CSS文件。
SASS自3.0开始，使用的是*.scss后缀。切所有*.scss文件放在同一目录下。
@mixin 混合器！
@include 加载混合器！
@extend 继承，各种继承。