前端开发中最大的坑之一莫过于写css,流水账式的写法让众多码农们头痛不已。好在有了sass,写css不再死板。sass对css的增强如下:
宏定义的优点在于一处定义,多处使用,需要修改的时候只需要修改定义的地方即可。虽然sass没有明确的说明,但其实以下几种语法与C语言中的宏定义非常类似:
scss:
$basic-margin: "10px 20px";
#box01 {
margin: $basic-margin;
}
#box02 {
margin: $basic-margin;
}
css:
#box01 {
margin: "10px 20px";
}
#box02 {
margin: "10px 20px";
}
scss:
$rounded-corners: false;
.button {
border: 1px solid black;
border-radius: if($rounded-corners, 5px, null);
}
css:
.button {
border: 1px solid black;
}
_module.scss:
$userColor: red !default;
.bass {
padding: 0 20px;
color: $userColor;
}
test.scss:
$userColor: black;
@import "module";
test.css:
.bass {
padding: 0 20px;
color: black;
}
test.scss:
@import "module";
test.css
.bass {
padding: 0 20px;
color: red;
}
test.scss:
$color: red;
.text {
$color: black !global;
}
.box {
color: $color;
}
test.css:
.box {
color: black;
}
scss:
@mixin normal-font($fontfamily) {
font-size: 18px;
font-family: $fontfamily;
}
.box {
width: 200px;
height: 200px;
@include normal-font("IBM Plex Sans");
}
css:
.box {
width: 200px;
height: 200px;
font-size: 18px;
font-family: "IBM Plex Sans";
}
scss:
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
css:
.warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
sass也借鉴了编程语言中的模块化思想,允许文件引入。以下划线开头的文件类似于子模块,不会被被sass编译为css,只能被其他scss文件引用。例如:
_module.scss:
.bass {
padding: 0 20px;
}
test.scss:
@import "module";
$basic-margin: "10px 20px";
#box01 {
margin: $basic-margin;
}
#box02 {
margin: $basic-margin;
}
test.css:
.bass {
padding: 0 20px;
}
#box01 {
margin: "10px 20px";
}
#box02 {
margin: "10px 20px";
}
scss也对css的语法做了一些简化,比如说:
_module.scss:
.bass {
padding: 0 20px;
}
test.scss:
@import "module";
$basic-margin: "10px 20px";
#box01 {
margin: $basic-margin;
}
#box02 {
margin: $basic-margin;
}
test.css:
.bass {
padding: 0 20px;
}
#box01 {
margin: "10px 20px";
}
#box02 {
margin: "10px 20px";
}
sass也做了一些工作让css更像一门编程语言而不是一遍作文。其中包括:
本文简要的介绍了sass对css所做的一些增强,阐明了sass如何让css从简单的平铺式的书写方式演变成一种"编程语言",希望读者可以在自己的前端项目中试一试sass,相信它会极大地提升你的开发效率。