为什么用SASS?
刚接触公司的项目,我真的很费解,为什么项目里要用类似SASS,LESS这样的东西,不是有css吗,导入css文件不就可以了吗?这个是用来干嘛的啊?要知道为什么,先来看看SASS到底是什么,怎么用的。
SASS语法
我们先来看一个SASS文件的例子:
$class-prefix: "tabs";
ul {
margin: 0;
padding: 0;
}
.#{$class-prefix} {
&-bar {
margin-bottom: 16px;
}
&-nav {
font-size: 14px;
&:after,
&:before {
display: table;
content: " ";
}
&:after {
clear: both;
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
WTF?这都是什么?
1.变量
先看第一行:
$class-prefix: "tabs";
...
.#{$class-prefix} {}
- 1
- 2
- 3
SASS中可以使用变量,但是我们要告诉程序这是变量,所以用$开头,所以这里class-prefix是变量,它的值是”tabs”,怎么使用?如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
2.嵌套
继续往下看:
.#{$class-prefix} {
&-bar {
margin-bottom: 16px;
}
&-nav {
font-size: 14px;
&:after,
&:before {
display: table;
content: " ";
}
&:after {
clear: both;
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
&
是什么?首先我们得看到这个结构,他是嵌套的,通过一层层的缩进,表示父元素下的子元素,而&就是引用父元素,属性也可以嵌套,比如border-color属性,可以写成(注意,border后面必须加上冒号):
p {
border: {
color: red;
}
}
- 1
- 2
- 3
- 4
- 5
上面的这几个语法是几乎所有的SASS文件都会遇到,而下面可能不是一定会用到,却也是代表SASS语法的特性,所以也要普及一下。
下面的这些用法都是摘自阮一峰的博客
3.计算功能
我们可以在SASS中使用计算功能:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
- 1
- 2
- 3
- 4
- 5
4.代码重用
继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
- 1
- 2
- 3
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}
- 1
- 2
- 3
- 4
mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
- 1
- 2
- 3
- 4
使用@include命令,调用这个mixin。
div {
@include left;
}
- 1
- 2
- 3
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
- 1
- 2
- 3
- 4
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
- 1
- 2
- 3
下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
- 1
- 2
- 3
- 4
- 5
使用的时候,可以像下面这样调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
- 1
- 2
5.高级用法
条件语句
@if可以用来判断:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
- 1
- 2
- 3
- 4
配套的还有@else命令
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
- 1
- 2
- 3
- 4
- 5
循环语句
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
- 1
- 2
- 3
- 4
- 5
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
- 1
- 2
- 3
- 4
- 5
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
- 1
- 2
- 3
- 4
- 5
自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
- 1
- 2
- 3
- 4
- 5
- 6
CSS预处理
所以,SASS究竟做到了什么?单从上面的语法来看,SASS不再是像css那样是“不可控制”的装饰语句:
变量,函数,mixin,继承这些都可以让我们少写很多代码,嵌套使机构更加的清晰,计算,高级语法是我们能更方便地控制样式。当然最终目的还是将SASS编译生成css。网上有这样一段话我觉得说的很通俗:
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:
- 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭
一个React项目除了CSS预处理,也会使用CSS Module,刚开始听到这两个词,我根本分不清,所以除了弄懂CSS预处理,CSS Modules也要清楚,这个在其他文章中学习。
本文部分内容摘自阮一峰博客
SASS用法指南