中文文档 https://www.sass.hk/docs/
为什么要用它？
Sass号称最专业最稳定最强大的css拓展语言。完全兼容 CSS3、在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能、通过函数进行颜色值与属性值的运算、提供控制指令 (control directives)等高级功能、自定义输出格式。
scss 是 Sass语言的一种语法格式：< style lang="scss"> (推荐)
Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。无论哪种方式都需要先安装 Sass gem （Windows 系统需要先安装 Ruby）
【坑】
如果在没有安装scss 依赖的时候 ，直接在组件<style> 写lang=“scss”,就会报下面的错误
【处理方案】
npm install scss --save-dev
npm install scss-loader --save-dev
npm install sass-lodaer --save-dev
npm install node-sass --save-dev
1. 变量$，如 $nav-color: #F90;
2. CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用
$nav-color: #F90;
nav {
$width: 100px; // 只能在 nav {} 块内使用
width: $width;
color: $nav-color;
}
3. 变量使用中划线和下划线是等同的,$link-color和$link_color其实指向的是同一个变量
$link-color: blue;
a {
color: $link_color;
}
4. 嵌套规则，避免了重复输入父选择器
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
5. 父选择器的标识符&, &: , &-
#article {
a {
color: blue;
&:hover { color: red }
}
&-main { } // 编译后是 #ariticle-main
}
6. 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
7. sass 提供静默注释，其内容不会出现在生成的css文件中它们以//开头，注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
8. 通过sass的混合器实现大段样式的重用 @mixin, 比加添加跨浏览器的圆角边框等。通过@include放在被调用的地方，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
@mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header");
编译后 body.firefox .header:before { content: "Hi, Firefox users!"; }
9. 用混合器来避免重复。通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。 综合性实例如下
$blue: #324157; // 全局定义变量
@mixin colorBtn($color) { // 混合器使用参数
background: $color;
&:hover { // & 代表父级
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue) // 调用混合器
}
10. css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
11. 子组合选择器和同层组合选择器：>、+和~
article section { margin: 5px }
article > section { border: 1px solid #ccc }
第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素
header + p { font-size: 1.1em }
同层相邻组合选择器+选择header元素后紧跟的p元素
article ~ article { border-top: 1px dashed #ccc }
同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
12. @extend 继承样式
13. @media 使用方法与css同样，只是多了一个功能，允许嵌套
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px; } }
编译后
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
网友评论