Sass使用语法（详细）

mr_cmx

已于 2023-04-24 17:32:49 修改

阅读量6.6k

点赞数 9

分类专栏： sass 文章标签： sass css 前端

于 2022-06-08 11:07:23 首次发布

本文链接：https://blog.csdn.net/weixin_44646763/article/details/125162710

版权

sass 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

一、嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。

1、选择器嵌套

#app{
	color:while;
	// 嵌套
	.content{
		color:red;
	}
}

编译结果：

#app {
  color: while; }
  #app .content {
    color: red; }

2、父级选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。

#app{
	color:while;
	// 父级选择器
	&.chird{
		background:#f0f0f0;
	}
}

编译结果：

#app {
  color: while; }
  #app.chird {
    background: #f0f0f0; }

3、属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

#app{
	color:while;
	// 嵌套
	.content{
		color:red;
	}
	// 父级选择器
	&.chird{
		background:#f0f0f0;
		// 属性嵌套
		font:{
			family:test;
			size:30px;
			weight:bold;
		}
	}
}

编译结果：

#app {
  color: while; }
  #app .content {
    color: red; }
  #app.chird {
    background: #f0f0f0;
    font-family: test;
    font-size: 30px;
    font-weight: bold; }

二、注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

/*
多行注释
*/
//单行注释

编译结果：

/*
多行注释
*/

三、变量 $

1、使用变量

$var : 16px;
.fontSize {
	font-size: $var;
}

编译结果：

.fontSize {
	font-size: 16px;
}

2、数据类型

SassScript 支持 6 种主要的数据类型：

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

四、运算

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

1、数字运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。关系运算 <, >, <=, >= 也可用于数字运算。

$number : 12px;
p{
	width: $number * 2 ;
}
p{
	width: $number / 2 ;
}

编译结果：

p {
  width: 24px; }
p {
  width: 6px; }

2、颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。例如 #010203 + #040506，则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，结果为#050709

.color1{
	color: #010120 + #234234;
}
.color2{
	color: #010120 * 2;
}
.color3{
	color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75);
}

编译结果：

.color1 {
  color: #244354; }
.color2 {
  color: #020240; }
.color3 {
  color: rgba(255, 255, 0, 0.75); }

注意：如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

3、字符串运算

+ 可用于连接字符串

注意：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

.string1:before{
	font-family: icon + font ;
	content: "带引号字符串" + 不带引号字符串;
}
.string2:before{
	font-family: icon + font ;
	content: 不带引号字符串 + "带引号字符串";
}

编译结果：

.string1:before {
  font-family: iconfont;
  content: "带引号字符串不带引号字符串"; }
.string2:before {
  font-family: iconfont;
  content: 不带引号字符串带引号字符串; }

4、布尔运算

SassScript 支持布尔型的 and or 以及 not 运算。

.bool1:before{
	content: $bool and false;
}
.bool2:before{
	content: $bool or false;
}
.bool3:before{
	content: not $bool;
}

编译结果：

.bool1:before {
  content: false; }
.bool2:before {
  content: true; }
.bool3:before {
  content: false; }

这里的运算结果其实没有大的意义，只是为了观察运算结果，布尔运算一般在后面的 @if 中使用

5、数组运算

数组不支持任何运算方式，只能使用 list functions 控制。

6、圆括号

圆括号可以用来影响运算的顺序：

//圆括号
p{
	width:12px * (4 - 2);
}

编译结果：

p {
  width: 24px; }

五、函数

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：
（hsl 是SassScript内置的函数之一）

// sassScript 函数
div{
	color: hsl(0 , 80%, 50%);
}

编译结果：

div {
  color: #e61a1a; }

Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：

div{
	color: hsl($hue: 0, $saturation:80%, $lightness:50%);
}

六、插值语句 #{}

通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量：

$selectName:'.foo';
$attrName:'width';
$content: "content内容";

#{$selectName}:before {
	#{$attrName}:12px;
	content: "#{$content}";
}

编译结果：

.foo:before {
  width: 12px;
  content: "content内容"; }

七、!default

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

// !default
$content1:'初始赋值';
$content1: "!default 赋值" !default;
.content_value1:before{
	content: $content1;
}

$content2:null;//null 将会被视为未赋值,从而!default为其赋值
$content2: "!default 赋值" !default;
.content_value2:before{
	content: $content2;
}

编译结果：

.content_value1:before {
  content: "初始赋值"; }

.content_value2:before {
  content: "!default 赋值"; }

八、@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

（1）文件拓展名是 .css；
（2）文件名以 http:// 开头；
（3）文件名是 url()；
（4）@import 包含 media queries。

使用例子：

//@import 语法
@import "test2.scss";

Sass 允许同时导入多个文件，例如同时导入 test2.scss 与 test3.scss 两个文件：

// 导入多文件
@import "test2.scss", "test3.scss";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

Partials

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件
注意：不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

test2.scss:

.test2{
	content: '这是.test2';
}

导入：

// 嵌套导入
#main {
	@import "test2.scss";
}

编译结果：

#main .test2 {
  content: '这是.test2'; }

注意:不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

九、@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译结果：

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 允许互相嵌套使用，编译时，Sass 自动添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译结果：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

@media 也可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值

十、@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。

// extend 样式继承
.item{
	width:100%;
	background:#ffffff;
	line-height:40px;
}
.light_item{
	//继承上面.item的样式
	@extend .item ;//父级并行使用.item的样式
	// 特殊样式（其他样式）
	background:#f0f0f0;
}

编译结果：

.item, .light_item {
  width: 100%;
  background: #ffffff;
  line-height: 40px; }

.light_item {
  background: #f0f0f0; }

多重继承

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：

.error{
	color:red;
}
.success{
	color:green;
}
.msg{
	@extend .error;
	@extend .success;
	color: #555555;
}

编译结果：

.error, .msg {
  color: red; }

.success, .msg {
  color: green; }

.msg {
  color: #555555; }

延续继承

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，例如：

// 延续 继承
.g_father{
	color:#555555;
}
.father{
	@extend  .g_father;
	background:#ffffff;
}
.child{
	@extend .father;
	border:1px soild #000000;
}

编译结果：

.g_father, .father, .child {
  color: #555555; }

.father, .child {
  background: #ffffff; }

.child {
  border: 1px soild #000000; }

选择器列

暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列：

#fake-links .link {
  @extend a;
}
a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

编译结果：

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

@extend-Only 选择器

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。

如果使用普通的 CSS 规则，最后会编译出很多用不到的样式，也容易与其他样式名冲突，所以，Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。

// ％占位符
#content a%extreme {//%占位符选择器将不会被编译，只接受 extend 
	color:bule;
	font-size:16px;
}
.notice{
	@extend %extreme;
}

编译结果：

#content a.notice {
  color: bule;
  font-size: 16px; }

十一、@at-root

@at-root指令可以让一个或多个样式规则在文档的根发出，而不是嵌套在它们的父选择器下面。它可以与单个内联选择器一起使用:

// at-root 指令
.parent:before{
	content:"parent 内容";
	@at-root .chird:before{
		content:"chird 内容";
	}
}

编译结果：

.parent:before {
  content: "parent 内容"; }
  .chird:before {
    content: "chird 内容"; }

包含多个选择器：

.parent:before{
	content:"parent 内容";
	@at-root{
		.chird:before{
			content:"chird 内容";
		}
		.chird2{
			color:red;
		}
		.chird3{
			background:red;
		}
	} 
}

编译结果：

.parent:before {
  content: "parent 内容"; }
  .chird:before {
    content: "chird 内容"; }
  .chird2 {
    color: red; }
  .chird3 {
    background: red; }

@at-root (without: …) and @at-root (with: …)

默认情况下，@at-root只移出选择器。但是，也可以使用@at-root移出嵌套指令，比如@media。例如:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

编译结果：

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

十二、@debug、@warn、@error

@debug

@debug指令将SassScript表达式的值打印到标准错误输出流。它对于调试有复杂SassScript的Sass文件非常有用。例如:

@debug 10em + 12em;

编译结果：

Line 1 DEBUG: 22em

@warn

@warn指令将SassScript表达式的值打印到标准错误输出流。对于那些需要警告用户已弃用或存在的小错误，它非常有用。在@warn和@debug之间有两个主要区别:

1、您可以使用——quiet命令行选项或:quiet Sass选项关闭警告。
2、样式表跟踪将与消息一起打印出来，以便被警告的用户可以看到他们的样式在哪里引起了警告。

使用例子：

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

@error

@error指令将SassScript表达式的值作为致命错误抛出，包括一个nice的堆栈跟踪。它对于验证mixin和函数的参数很有用。例如:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative; left: $x; top: $y;
}

十三、@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

编译结果：

p {
  border: 1px solid; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

p{
	$num : 3;
	@if $num == 1 {
		color:red;
	}
	@else if  $num == 2 {
		background:red;
	}
	@else{
		border:red;
	}
}

编译结果：

p {
  border: red; }

十四、@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

// @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

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而是一连串的值，也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

// each
$list : ['one','two','there','four'];
@each $i in $list {
	.item-#{$i}:before {
		content: $i;
	}
}

编译结果：

.item-one:before {
  content: "one"; }

.item-two:before {
  content: "two"; }

.item-there:before {
  content: "there"; }

.item-four:before {
  content: "four"; }

十六、@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

// @while 
$i : 4;
@while $i>0 {
	.while_#{$i}{
		width: 1em * $i;
		$i: $i - 1;
	}
}

编译结果：

.while_4 {
  width: 4em; }

.while_3 {
  width: 3em; }

.while_2 {
  width: 2em; }

.while_1 {
  width: 1em; }

十七、mixin 混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

1、定义混合指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin big_text{
	font:{
		size:22px;
		weight:bold;
	}
	color:#555;
}

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：

@mixin pos_center{
	position:absolute;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	&:hover{
		color:red;
	}
}

2、引用混合样式 @include

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

.block{
	@include pos_center;
}

编译结果：

.block {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%; }
  .block:hover {
    color: red; }

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译结果：

a {
  color: blue;
  background-color: red; }

混合样式中也可以包含其他混合样式，比如

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

3、带参混合

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin big_text2($size,$weight){
	font:{
		size:$size;
		weight:$weight;
	}
	color:#555;
}
.p_big_text2{
	@include big_text2(24px,bold)
}

编译结果：

.p_big_text2 {
  font-size: 24px;
  font-weight: bold;
  color: #555; }

设置默认值

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

@mixin big_text3($size:20px,$weight:400){
	font:{
		size:$size;
		weight:$weight;
	}
	color:#555;
}
.p_big_text3{
	@include big_text3
}

编译结果：

.p_big_text3 {
  font-size: 20px;
  font-weight: 400;
  color: #555; }

关键词参数

混合指令也可以使用关键词参数：

.p_big_text3{
	@include big_text3($weight:bold)
}

编译结果：

.p_big_text3 {
  font-size: 20px;
  font-weight: bold;
  color: #555; }

不定参

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时，可以使用参数变量(不定参) … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

@mixin big_text4($font...){
	font:  $font;
	color:#555;
}
.p_big_text4{
	@include big_text4(20px 400)
}

编译结果：

.p_big_text4 {
  font: 20px 400;
  color: #555; }

4、向混合样式中导入内容

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方：

@mixin apply(){
	#app{
		color:red;
		@content;
	}
}
#page{
	@include apply{
		.container{
			width:100%;
		}
	}
}

编译结果：

#page #app {
  color: red; }
  #page #app .container {
    width: 100%; }

为便于书写，@mixin 也可以用 = 表示，而 @include 可以用 + 表示，这种写法只适用Sass3之前版本的语法（sass语法格式）

使用例子：

=apply
  #app
  	color:red;
    @content

#page
  +apply
    .container
      width:100%;

十八、@function 函数指令

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用，与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。：

$width : 400;
$multiple: 2;
@function app_width($width,$multiple){
	@return $width * $multiple px;
}
#app{
	width: app_width($width,$multiple);
}

编译结果：

#app {
  width: 800 px; }

mr_cmx

关注

9
点赞
踩
55

收藏

觉得还不错? 一键收藏
6
评论
Sass使用语法（详细）

Sass使用语法整理
复制链接

扫一扫

专栏目录

Sass使用语法（详细）

一、嵌套

1、选择器嵌套

2、父级选择器 &

3、属性嵌套

二、注释

三、变量 $

1、使用变量

2、数据类型

四、运算

1、数字运算

2、颜色值运算

3、字符串运算

4、布尔运算

5、数组运算

6、圆括号

五、函数

六、插值语句 #{}

七、!default

八、@import

九、@media

十、@extend

十一、@at-root

十二、@debug、@warn、@error

十三、@if

十四、@for

十五、@each

十六、@while

十七、mixin 混合指令

1、定义混合指令 @mixin

2、引用混合样式 @include

3、带参混合

4、向混合样式中导入内容

十八、@function 函数指令

“相关推荐”对你有帮助么？