Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。
可以通过命令行的方式编译Sass:
sass input.scss output.css
还可以命令 Sass 监视文件的改动并更新 CSS :
sass --watch input.scss:output.css
但一般就会使用gulp、webpack来编译工程中的sass。
嵌套
sass允许css规则进行嵌套:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
会被编译为:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
这有效帮助我们避免父选择器的重复书写。
引用父选择器 &
a{
font-weight: bold;
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
& 在编译时将被替换为父选择符,输出到 CSS 中。
嵌套属性
CSS有一些属性是在一个命名空间下的,如font:font-family, font-size, font-weight。sass就允许在一个命名空间下面书写sub属性,从而避免一条一条书写:
.funky{
font{
family:fantasy;
size:39em;
weight:bold;
}
}
被编译为:
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
注释
sass支持两种注释方式:
- 多行:
/* */
:被编译为css的时候被保留 - 单行:
//
:被编译为css的时候被去除,不会被保留
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
被编译为:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black;
}
a {
color: green;
}
变量
变量以美元符号$开头:
$width :5em;
#main{
width:$width;
}
变量只在其被定义时所属嵌套选择器中可用。若变量在所有嵌套选择器的外部被定义,那么它们在任意地方都是可用的,可以理解为全局的。
变量默认值
你可以通过在值的末尾添加 !default 标记来指定变量默认值。当变量没有被赋值的情况下就会使用这个默认值:
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
被编译为:
#main {
content: "First content";
new-content: "First time reference"; }
运算
数字运算
sass支持数字类型的标准运算:+、-、*、/、%,如果需要的话,也可以在不同单位间做转
也支持关系运算: <、>、<=、>=、 ==、!=
p {
width: 1in + 8pt;
}
被编译为:
p {
width: 1.111in;
}
括号可以改变运算顺序
p {
width: (1em + 2em) * 3;
}
被编译为:
p {
width: 9em; }
颜色运算
所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算:
p {
color: #010203 + #040506;
}
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合成为:
p {
color: #050709;
}
字符串运算
+运算符可以用来连接字符串
p {
cursor: e + -resize;
}
被编译为:
p {
cursor: e-resize;
}
@规则
Sass 支持所有 CSS3 的 @ 规则, 以及一些 Sass 专属的规则,也被称为“指令”。
@import
Sass扩展了css的@import规则,使其能够引入scss文件。
所有引入的scss文件都会被合并并输出一个单一的css文件。
@import根据文件名引入,默认情况下会寻找scss文件并直接引入,但是在几种情况下会被编译成css的@import规则:
- 文件的扩展名是 .css
- 文件名以 http:// 开头
- 文件名是 url()
- @import 包含了任何媒体查询(media queries)
css中的@import规则用于从其他样式表导入样式规则,但并不会进行合并等操作。
@import "foo.scss"
@impot "foo"
两者都将引入 foo.scss 文件
可以通过一个 @import 引入多个文件:
@import "rounded-corners", "text-shadow";
如果你有一个scss文件需要引入,但是你又不希望它被编译为一个css文件,就可以在文件名前面加一个下划线就能避免被编译。
例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你引入的时候还可以省略掉前面的下划线:
@import "colors";
嵌套@import规则
虽然大部分时间只需在顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 和 @media 规则中。
//example.scss
.example {
color: red;
}
#main {
@import "example";
}
会被编译成:
#main .example {
color: red;
}
@media
与css中的@media用法相同,但那是可以被嵌套在规则中。
.sidebar{
width:300px;
@media screen and (orientation:landscape){
width:500px;
}
}
被编译为:
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@media规则之间也可以互相嵌套,编译时会被用and连接起来:
@media screen{
.sidebar{
@media (orientation:landscape){
}
}
}
被编译为:
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
@extend
用于继承另一个样式。
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
被编译为:
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
这意味这error中所有的样式seriousError 也都有,同时还有一些自己独有的样式。
条件语句
@if
p{
@if 1+1 == 2 {border: 1px solid;}
@if 5<3 { border: 2px dotted; }
@if null { border: 3px double; }
}
被编译为:
p {
border: 1px solid;
}
可以和多个@else if语句、一个@else语句一起使用。
$type:monster;
p{
@if $type == ocean{
color: blue;
}@else if $type==matador{
color: red;
}@else if $type == monster{
color:green;
}@else {
color: black;
}
}
被编译为:
p {
color: green;
}
@for
@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
用于遍历一个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; }
mixin指令
Mixins允许定义可以在整个样式表中可以重用的样式。
定义一个mixin
使用@mixin来定义一个mixin:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
mixin也可以包含选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
包含一个mixin
使用@include来引入一个mixin:
.page-title{
@include large-text;
padding: 4px;
margin-top: 10px;
}
被编译为:
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
mixin也可以在任何规则外部引入:
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
一个mixin内部也可以引用其他mixin:
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
@mixin compound {
@include highlighted-background;
@include header-text;
}
参数
mixin可以将sass变量作为参数。
在定义mixin时,参数是用逗号分隔的变量名,全部在mixin名字之后的括号中。使用mixin时也以同样的方式传入参数
@mixin sexy-border($color, $width){
border:{
color: $color;
width: $width;
style: dashed;
}
}
p {
@include sexy-border(blue,1em);
}
被编译为:
p{
border-color: blue;
border-width: 1em;
border-style: dashed;
}
mixin可以设定参数的默认值,如果在使用的时候没有传入那个参数就使用默认值:
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
被编译为:
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }
函数指令
@function grid-width($n){
@return $n*5;
}
#sidebar{
width: grid-width(2);
}
编译为:
#sidebar{
width: 10px;
}
在函数最后必须使用return来返回结果。