前言
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
1.注释
2.嵌套规则
3. 变量: $
4.运算
5.合并文件:@import
6.继承:@extend
7.混入指令
8.判断:@if 和循环:@for
9.自定义函数
注释
在scss中有单行注释和双行注释,多行注释会被保留在输出的CSS中,而单行注释会被删除。在scss中
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
//abc
/*!This comment is important*/
.text {
background-color: #fff;
}
在css中
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
/*!This comment is important*/
.text {
background-color: #fff;
}
嵌套规则
scss 允许将一个 CSS 样式嵌套进另一个样式中,内层样式仅适用于外层样式的选择器范围内1.基本操作
在scss中:
#main{
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
在css中:
#main{
color: #00ff00;
width: 97%;
}
#main .redbox {
background-color: #ff0000;
color: #000000;
}
2.引用父选择器:&
在scss中
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
}
在css中
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
3.嵌套属性
CSS中有一些属性遵循相同的“命名空间”;比如,font-family, font-size, 和 font-weight都在 font 或 background 命名空间中。在CSS中,如果你想在同一个命名空间中设置一串属性,你必须每次都输出来。Scss为此提供了一个快捷方式:只需要输入一次命名空间,然后在其内部嵌套子属性
在scss中
.text {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
在css中
.text{
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
变量: $
1.基本操作
在scss中
$width: 5em;
在css中
#main {
width: $width;
}
2.在后面加 !global 标志
在scss中
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
在css中
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
运算
在scss中.text {
$a: 50px;
margin: (14px/3); //margin: (14/3)+px;
padding: round($a/3);
top: 50px + 100px;
left: $a * 2;
}
在css中
.text {
margin: 4.66667px;
padding: 17px;
top: 150px;
left: 100px;
}
scss中的数学函数
- percentage(value):将一个不带单位的数转换成百分比值;
- round(value):将数值四舍五入,转换成一个最接近的整数;
- ceil(value):将大于自己的小数转换成下一位整数;
- floor(value):将一个数去除他的小数部分;
- abs(value):返回一个数的绝对值;
- min(numbers…):找出几个数值之间的最小值;
- max(numbers…):找出几个数值之间的最大值;
- random(): 获取随机数
合并文件 @import
@import "./reset.scss";
@import "./common.scss";
继承 @extend
在scss中.wh {
width: 100px;
height: 100px;
}
.bgcRed {
background-color: red;
}
#main {
@extend .wh;
@extend .bgcRed;
border: 1px solid #ccc;
}
在css中
.wh, #main {
width: 100px;
height: 100px;
}
.bgcRed, #main {
background-color: red;
}
#main {
border: 1px solid #ccc;
}
混入指令
### 1.定义一个混入@mixin 在scss中@mixin fontstyle {
font: {
family: '楷体';
size: 10px;
weight: 600;
}
color:red;
}
2.引用混合样式:@include
在scss中
.text {
@include fontstyle;
margin: 10px;
}
在css中
.text {
font-family: '楷体';
font-size: 10px;
font-weight: 600;
color: red;
margin: 10px;
}
3.mixin的强大之处,在于可以指定参数和缺省值
@mixin left($value: 10px){
float: left;
margin-right: $value;
}
div{
@include left(20px);
}
判断和循环
在scss中li {
@for $i from 1 to 6 {
&:nth-child(#{$i}) {
.img {
background-image: url("../img/shop#{$i}.jpg");
}
@if $i>3 {
background-color: #fff;
}
}
}
}
在css中
li:nth-child(1) .img {
background-image: url("../img/shop1.jpg");
}
li:nth-child(2) .img {
background-image: url("../img/shop2.jpg");
}
li:nth-child(3) .img {
background-image: url("../img/shop3.jpg");
}
li:nth-child(4) {
background-color: #fff;
}
li:nth-child(4) .img {
background-image: url("../img/shop4.jpg");
}
li:nth-child(5) {
background-color: #fff;
}
li:nth-child(5) .img {
background-image: url("../img/shop5.jpg");
}
自定义函数
在scss中@function double($n) {
@return $n * 2;
}
.text {
width: double(5px);
}
在css中
.text {
width: 10px;
}