这里写目录标题
1、什么是Sass?
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。
2、CSS制作框架
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。
3、Sass语法
3.1、变量
Sass支持定义变量。变量以美元符号($)作为开头。变量用冒号(:)赋值。
SassScript支持四种数据类型:
- 数值(可包括单位)
- 字符串
- 颜色
- 布尔类型
变量可以用作函数的参数或返回值。在解释过程中,解释器会把变量的值写入最终的CSS文件中。
SCSS语法的变量示例:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 10%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
3.2、嵌套
3.2.1 1. 选择器嵌套
CSS虽然支持嵌套但是不支持代码块的嵌套,而SCSS支持。这样可更加清晰地表示元素之间的关系。
语法:
爷爷 {
爸爸 {
儿子 {
孙子 {
}
}
}
}
示例如下:
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}
3.2.1 2. 伪类嵌套
从上面我们可以看出,选择器嵌套得出的css样式相当于后代选择器一样,中间都有一个空格分隔,那如果想给一个元素添加:hover要怎么做呢?
&符就是来解决这个问题的。
语法: &:hover { }
示例如下:
// html结构
<div class="box">
<a href="javascript:;">hello</a>
</div>
// .scss文件
// 这里我们希望鼠标悬停a的文本颜色改变
.box {
a {
&:hover {
color: red;
}
}
}
--------------------------------------
// 生成的css代码
.box a:hover {
color: red;
}
3.3、混入(Mixin)
Mixin包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。
语法
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
使用: @include name;
示例如下:
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
3.4、给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式。当@include混合器时,参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript,这种方式跟JavaScript的function很像:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include时,你可以把它当作一个css函数来传参。如果你像下边这样写:
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
3.5、 继承 extend
如果一个元素的样式和另一个元素的样式完全一样,这个元素无需再写一遍重复的样式,只需要使用@extend 就可以把另一个元素的所有样式全部继承过来
// .scss文件
.box1 {
width: 200px;
height: 200px;
}
// box2 继承 box1的样式
.box2 {
@extend .box1;
}
--------------------------------------
// 生成的css代码
.box1, .box2 {
width: 200px;
height: 200px;
}
3.6、数学运算
包含+、-、*、/(加减乘除)
示例如下:
// .scss文件
.box {
width: 50px + 50px;
height: 100px - 50px;
// 这里不能两个都带单位,否则是100px*px这种不合法的值
margin-top: 10px * 10;
// css会将/认为是合法的,所以需要加括号
padding-top: (100px / 2) ;
}
--------------------------------------
// 生成的css代码
.box {
width: 100px;
height: 50px;
margin-top: 100px;
padding-top: 50px;
}
3.7、 if条件语句
Sass可以根据条件判断给出特定的样式
语法:
@if 条件语句 {
} @ else if 条件语句 {
} @else
实例如下:
// .scss文件
.box {
@if 1+1 == 2 {
color: red;
} @else if 1+1 == 3 {
color: blud;
} @else {
color: pink;
}
}
--------------------------------------
// 生成的css代码
.box {
color: red;
}
以上就是Sass比较常用的一些语法了,希望能帮助到您可以了解Sass,如果想了解的更加详细全面,可以直接去Sass官网查阅文档链接: Sass中文网。