快速使用
- 在VSCode中安装Live Sass Compiler插件
- Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以打开实时编译。
- 在html页面引入动态生成的.css文件
Sass使用指南
内容摘录自: www.sass.hk/
1. 使用变量
声明/引用/命名, 重复定义的变量按最后一次定义为准
- 声明规则:
$key:value
$highlight-color: #F90;
- 引用规则:
$key:value
.box { color: $highlight-color; }
- 命名规则:
kebab-case(建议)
2. 嵌套规则
- &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。
article a { color: blue; &:hover { color: red } }
- 群组选择器的嵌套: 多个子选择器拥有公共父选择器,并且需要给子选择器设置通用属性的情况。
.container { h1, h2, h3 {margin-bottom: .8em} }
- 子组合选择器和同层选择器: > 、+ 和 ~
- 子组合选择器>，选择一个元素的直接子元素
- 同层相邻组合选择器+，选择header元素后紧跟的p元素
- 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
// 子组合选择器 article section { margin: 5px } article > section { border: 1px solid #ccc } // 同层相邻组合选择器 header + p { font-size: 1.1em } // 同层全体组合选择器 article ~ article { border-top: 1px dashed #ccc }
- 嵌套属性
// css语法 nav { border-style: solid; border-width: 1px; border-color: #ccc; } // sass语法 nav { border: { style: solid; width: 1px; color: #ccc; } }
// css语法 nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; } // sass语法 nav { border: 1px solid #ccc { left: 0px; right: 0px; } }
3. 导入SASS文件
- css中的
@import执行到后下载css文件,导致页面加载慢- sass中的
@import在生成css的时候导入,无法额外下载- sass导入可以省略后缀
- 导入sass部分文件
- 通常在编写的base-style的文件是无需主动编译为css文件的,在其他sass文件中使用
@import导入后生效即可。 - 通过将文件命名为'_'开头即不会在编译时生成单独文件
- 如需导入的文件为:
themes/_night-sky.scss,那么导入的时候可以写@import "themes/night-sky";
- 默认变量值
- 多次定义相同变量会造成值的覆盖
- 可以通过使用
!default进行标记
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; /* 无效声明 */ $fancybox-width: 500px; }
- 嵌套导入
- 直接导入到需要使用的样式选择器中
文件: _blue-theme.scss 内容: aside { background: blue; color: white; } // 嵌套导入 .blue-theme { @import "blue-theme" }
- 原生css导入
- 勿用sass的@
import导入原始css文件- 可将css文件后缀修改为scss后缀
5. 混合@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; }
- 混合器中css规则
内部除了包含属性也可包含css规则
@mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; } }
- 给混合器传参
@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } // 使用时动态赋值 a { @include link-colors(blue, red, green); }
- 默认参数值
@mixin link-colors( $normal, $hover: $normal, $visited: $normal ) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } // 使用时动态赋值 $hover和$visited也会被自动赋值为red @include link-colors(red)
6. 继承@extend
何时使用: 类名用于语义化样式的重用
- 定义
//通过选择器继承继承样式 .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
- 使用
//.seriousError从.error继承样式 .error a{ //应用到.seriousError a color: red; font-weight: 100; } h1.error { //应用到hl.seriousError font-size: 1.2rem; }
Sass补充
数据类型:
- 数字: 1, 2, 13, 10px
- 字符串: "foo", 'bar', baz
- 颜色: blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型: true, false
- 空值: null
- 数组,用空格或逗号作分隔符: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps: (key1: value1, key2: value2)
运算:
所有数据类型均支持相等运算
==或!=，此外，每种数据类型也有其各自支持的运算方式。
- 数字类型运算:
+, -, *, /(除后取整), %(除后取余)数值运算,<, >, <=, >=关系运算 - 颜色值运算: 叠加符 '+'
- 字符串运算: 连接符 '+'
- 布尔运算: and, or, not
使用函数
SassScript 定义的函数
p { color: hsl(0, 100%, 50%); } // 编译为: p { color: #ff0000; }
关键词参数
p { color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); }
插值语句 #{}
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } 复制代码
控制语句
- @if
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } // 编译后 p { border: 1px solid; }
- @for
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } // 编译后 .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
- @each: 格式是
$var in <list>
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } // 编译后 .puma-icon { background-image: url('/images/puma.png'); } .sea-slug-icon { background-image: url('/images/sea-slug.png'); } .egret-icon { background-image: url('/images/egret.png'); } .salamander-icon { background-image: url('/images/salamander.png'); }
- @while
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } // 编译后 .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
输出格式
- nested
Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
- expand/体积较大
Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
- compact/体积较小
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
- compressor/压缩的
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
