声明/引用/命名, 重复定义的变量按最后一次定义为准
声明规则: $key:value
$highlight-color: #F90;
引用规则: $key:value
.box {
color: $highlight-color;
}
命名规则: kebab-case
(建议)
&标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。
article a {
color: blue;
&:hover { color: red }
}
群组选择器的嵌套: 多个子选择器拥有公共父选择器,并且需要给子选择器设置通用属性的情况。
.container {
h1, h2, h3 {margin-bottom: .8em}
}
子组合选择器和同层选择器: > 、+ 和 ~
// 同层相邻组合选择器 header + p { font-size: 1.1em }
// 同层全体组合选择器 article ~ article { border-top: 1px dashed #ccc }
4. 嵌套属性
```css
// 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;
}
}
@import
执行到后下载css文件,导致页面加载慢@import
在生成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导入
import
导入原始css文件何时使用: 用于展示性样式的重用
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
2. 使用:
```css
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
// 使用时动态赋值 a { @include link-colors(blue, red, green); }
6. 默认参数值
```css
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
// 使用时动态赋值 $hover和$visited也会被自动赋值为red
@include link-colors(red)
何时使用: 类名用于语义化样式的重用
定义
//通过选择器继承继承样式
.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;
}
数字: 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');
}
$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 (嵌套)样式是 Sass 默认的输出格式,能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行,缩进量与 Sass 文件中一致,每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时,这种样式可以很容易地分析文件的主要结构。
Expanded 输出更像是手写的样式,选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进。
Compact 输出方式比起上面两种占用的空间更少,每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符。
Compressed 输出方式删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。