# Scss 基础
TIP
本文略过了运算，函数等功能
# 嵌套
Scss 带来的第一个好处就是可以让 CSS 像 HTML 可以嵌套，使得 CSS 和 HTML 的书写从某种程度上变得一致，减少心智负担。
- 嵌套选择器
#content {
article {
h1 {
color: #333;
}
}
}
article a {
color: blue;
:hover {
color: red;
}
}
/* 编译后 */
#content article h1 {
color: #333;
}
article a {
color: blue;
}
article a:hover {
color: red;
}
- 嵌套属性
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
/* 编译后 */
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
# 变量
Scss 带来的第二个好处就是可以使用变量，让重复的大小，颜色等值提取为变量，方便统一管理。
- 变量声明
你可以把反复使用的css属性值，定义成变量，sass使用$符号来标识变量
$highlight-color: #f90;
- 变量引用
// scss
$highlight-color: $f90;
.selected {
border: 1px solid $highlight-color;
}
// css
.selected {
border: 1px solid #f90;
}
在声明变量时，变量值也可以引用其他变量
$highlight-color: #f90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
在引用时$link-color和$link_color其实指向的是同一个变量。
在 sass 中的大多数地方，中划线命名的内容和下划线命名的内容是互通的。
# 循环
Scss 带来的第三个好处就可以将连续的有规律的表达式用一个循环来表示。
- @for
@for $var from <start> through <end> [start,end]
@for $var from <start> to <end> [start,end)
@for $var from 1 through 10 {
.font_#{$var} {
font-size: $var + px;
}
}
- @each
$var in <list>
# 继承
第四个好处就是类似面向对象编程一样，让选择器之间的样式可以继承，提高复用性
- @extend
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
- 何时使用继承
当两个选择器之间有语义化上的关系的时候使用继承
注意：继承有可能存在样式层叠的问题
# 混合
混合不同于继承，混合本身只用于表示一组规则集，不直接作用于样式。
混合指令的用法是在 @mixin 后添加名称与样式。
然后使用 @include 指令引用混合样式。
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
# 导入
css 允许导入另一个 css 文件，scss 当然也不能少，而且 scss 的导入发生在编译时，可以在编译的时候将导入的 scss 和主体 scss 合并成一个文件。
- @import
css中的@import规则，允许在一个css文件中导入其他 css 文件，但是只有执行到@import时，浏览器才会去下载其他的css文件；
sass中也有一个@import规则，但是sass会在生成css文件的时候就把相关文件进行导入。
@import "./color.scss";
@import "./library.css";
- 默认变量值
一般情况下，反复声明一个变量，变量的值会被覆盖，加入引入了一个可被他人通过@import 导入的 sass 库文件，我们希望导入这可以定制修改 sass 库文件中的某些值，使用 sass 中的!default标签可以实现这个目的。
!default的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
如上，局部文件中对$fancybox-width赋值400px的操作不是立即有效的，只有当用户没有做这样的声明时，$fancybox-width才会默认为400px