这是我参与「第五届青训营」伴学笔记创作活动的第5天

基础

声明变量：$ ，如：$color: red

全局变量：$color: #f60 !global
若没有别的声明（如import中的），用此默认值：$color: #f60 !default

变量类型：数字、有/无引号字符串、颜色、布尔、null、数组、对象

值支持直接计算，而不需要使用calc函数
颜色也可以相加

允许选择器嵌套，也允许属性嵌套

nav {
  border: 1px solid #ccc{
  left: 0px;
  right: 1px;
  }
}
/* 与下面的形式等价 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 1px;
}

#main {
  color: black;
&-sidbar {border: 1px;}
}
/* 编译后 */
#main {color: black;}
#main-sidbar {border: 1px;}

注意main-sidbar元素与main实际没有嵌套关系，只是相当于一个语法糖

混合样式

@mixin 名称 {样式}

可以将其中的样式混合到其他元素的样式中，使用 @include 名称； 混合
可以被定义为函数： @mixin 名称($变量：默认值) {样式}
- 不确定参数数量：($变量...)

% + @extend

有相同的效果，但这个编译后会合并重复的样式

与Less的区别

LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制
变量符不一样，Less是@，而Scss是$。
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
引用外部CSS文件时，Scss@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以 _ 开头, 文件名如果以下划线开头的话，Scss会认为该文件是一个引用文件，不会将其编译为同名css文件，而是只当做模块导入。

此时导入不需要加_和后缀名，如导入_reboot.scss，语句为@import "reboot";

编译环境不一样 Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
Sass和Less的工具库不同 Sass有工具库Compass, Less有UI组件库Bootstrap。

其他

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

通过选择器继承继承样式

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

参考：SCSS之基础全解

SCSS/SASS 基础 | 青训营笔记

基础

混合样式

与Less的区别

其他