用了这么久的scss，是时候总结一下了。
现在看感觉这篇文档很没用 好久之前写的了 刚发布
1. what?
css不是一种编程语言，
css预处理器：基本思想是用一种专门的编程语言，进行网页样式设计，然后在编译成正常的css文件，
Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
2. css功能扩展
2.1嵌套规则
允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器,
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
2.2父选择器&
嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，
例如，当给某个元素设定 hover 样式时，
或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器
a {
font-weight: bold;
text-decoration: none;
// 使用一：伪元素，伪类时
&:hover { text-decoration: underline; }
// 使用二：其他选择其中的a使用当前a的样式时
body.firefox & { font-weight: normal; }
// 使用三：当前选择器的其他类名时
&.color {red;}
}
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如
#main {
color: black;
// 使用四：拼接成的选择器
&-sidebar { border: 1px solid; }
}
2.3 属性嵌套
Sass 允许将属性嵌套在命名空间中
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
3. 注释
3.1
Sass 支持标准的 CSS 多行注释 /* /，以及单行注释 //，
多行注释 / */会 被完整输出到编译后的 CSS 文件中，
而单行注释 //则不会
3.2
将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。
3.3
插值语句 (interpolation) 也可写进多行注释中输出变量值：
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
4. SassScript
4.1 变量
$开头,直接使用
$width: 5em;
变量支持块级作用域
将局部变量转换为全局变量可以添加 !global 声明
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
4.2 #{} 插值语句
可以在选择器 、属性名、属性值 中使用变量
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
4.3 @import
4.3.1
允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
4.3.2
允许同时导入多个文件
@import "rounded-corners", "text-shadow";
4.3.3
导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
4.3.4分音，文件名前加_
需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS
将文件命名为 _colors.scss，便不会编译 colours.css 文件
使用时不加
@import "colors";
上面的例子，导入的其实是 _colors.scss 文件
注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。
4.3.5嵌套@import
可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中
#main {
@import "example";
}
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import
4.4 @media
4.4.1允许其在 CSS 规则中嵌套
@media 将被编译到文件的最外层，
包含嵌套的父选择器
4.4.2可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译为
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
4.5@extend
继承样式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
网友评论