CSS-当前主流的三种预编译器
什么是预编译器:
CSS预编译器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用;
优点:
可以让我们的CSS代码更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
当前主流的三种预编译器:
Sass
Less
Stylus
比较:
比较一:基本语法
- 首先
Sass
和Less
都使用的是标准的 CSS 语法,因此如果可以很方便的将已有的 CSS 代码转为预处理器代码。默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。
/* style.scss or style.less */
h1 {
color: #666666;
}
/* 但是,Sass同时也支持老的语法,就是不包含花括号和分号的方式: */
h1
color: #666666;
- 而
Stylus
支持的语法要更多样性一点,它默认使用.styl
的文件扩展名,它可以既没有花括号也没用分号。下面是Stylus
支持的语法:
/* style.styl */
h1 {
color: #666666;
}
/* 省略括号 */
h1
color: #666666;
/* 省略冒号和分号 */
h1
color: #666666
- 可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:
h1 {
color #0982c1
}
h2
font-size: 1.2em
比较二:变量
Sass
声明变量必须是$
开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:
分隔开。
Sass
让人们受益的一个重要特性就是它为 css 引入了变量。你可以把反复使用的 css 属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。
$maincolor : #666666;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
color: $maincolor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
Less
声明变量用@
开头,其余等同Sass
。
- 在
Less
文件中,当一个值需要反复使用时,可以通过@
符号定义变量。已经被赋值的变量以及其他的常量(如像素、颜色等)都可以参与运算。
@maincolor : #666666;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
color: @maincolor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus
中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有=
。
Stylus
对变量是没有任何设定的,可以是以$
开头,或者任何的字符,而且与变量之间可以用冒号,空格隔开,但是在Stylus
中不能用@
开头,例如:
maincolor = #666666
siteWidth = 1024px
borderStyle = dotted
body
color maincolor
border 1px borderStyle mainColor
max-width siteWidth
- 以上三种写法等同于:
body {
color: #092873;
border: 1px dotted #092873;
max-width: 1024px;
}
比较三:嵌套
- 如下代码,大家肯定经常用到或者很常见:
div {
margin: 10px;
}
div nav {
height: 25px;
}
div nav a {
color: #ffffff;
}
div nav a:hover {
text-decoration: underline;
}
- 如果用 CSS 预处理器,就可以少写很多单词,而且父子节点关系一目了然,并且sass,Less,stylus都支持下面这样的写法,且都是相同的:
nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
比较四:运算符
- 在 CSS 预处理器中还是可以进行样式的计算如下:
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
比较五:颜色处理函数
CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。
Sass
- Sass 的颜色处理函数:
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
desaturate($color, 10%);
grayscale($color);
complement($color);
invert($color);
mix($color1, $color2, 50%);
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
Less
- Less 的颜色处理函数:
用@
,其余同Sass
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus
- Stylus颜色处理函数:
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
比较六:继承
Sass
Sass
可通过@extend
来实现代码组合声明,使代码更加优越简洁。
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}
Less
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
.message;
border-color: green;
}
.error {
.message;
border-color: red;
}
.warning {
.message;
border-color: yellow;
}
- 以上两种写法等同于:
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
比较七:Mixins(混入)
Mixins
有点像是函数或者是宏,当某段 CSS 经常需要在多个元素中使用时,可以为这些共用的 CSS 定义一个 Mixin
,然后只需要在需要引用这些 CSS 地方调用该 Mixin
即可。
可以理解成:定义了一个公用的方法,传入不同的参数去调用这个方法。
Sass
/* logo 高度 */
@value logoHeight: 160px;
/* logo的样式 logo($x:2px),也可以有默认参数 */
@mixin logo($x, $y, $width, $height, $logoHeight) {
display: inline-flex;
height: $logoHeight;
width: 100%;
justify-content: center;
align-items: flex-end;
background: url('../assets/basic/logo.png') no-repeat;
background-position: $x $y;
background-size: $width $height;
color: #fff;
font-size: 22px;
font-weight: 600;
transition: background 0.2s, width 0.2s, height 0.2s;
}
/* 在引用的地方@include logo() */
.logo {
@include logo(19px, 22px, 120px, 120px, logoHeight);
}
Less
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); /* 这里调用默认 border: 2px solid #F00; */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); /* 这里调用 border:5px solid #F00; */
}
Stylus
与Less
的区别是,引用的时候,可以不用加 (.
)
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
比较八:3D文本
要生成具有 3D 效果的文本可以使用 text-shadows
,唯一的问题就是当要修改颜色的时候就非常的麻烦,而通过 mixin
和颜色函数可以很轻松的实现:
用法跟 mixin
的用法一致
Sass
@mixin text3d($color) {
color: $color;
text-shadow: 1px 1px 0px darken($color, 5%),
2px 2px 0px darken($color, 10%),
3px 3px 0px darken($color, 15%),
4px 4px 0px darken($color, 20%),
4px 4px 2px #000;
}
h1 {
font-size: 32pt;
@ include text3d(#0982c1);
}
Less
.text3d(@color) {
color: @color;
text-shadow: 1px 1px 0px darken(@color, 5%),
2px 2px 0px darken(@color, 10%),
3px 3px 0px darken(@color, 15%),
4px 4px 0px darken(@color, 20%),
4px 4px 2px #000;
}
span {
font-size: 32pt;
.text3d(#0982c1);
}
Stylus
text3d(color)
color: color
text-shadow: 1px 1px 0px darken(color, 5%),
2px 2px 0px darken(color, 10%),
3px 3px 0px darken(color, 15%),
4px 4px 0px darken(color, 20%),
4px 4px 2px #000
span
font-size: 32pt
text3d(#0982c1)
- 其生成的 css 最终的效果如下:
span {
font-size: 32pt;
color: #0982c1;
text-shadow: 1px 1px 0px #097bb7,
2px 2px 0px #0875ae,
3px 3px 0px #086fa4,
4px 4px 0px #07689a,
4px 4px 2px #000;
}
比较九:支持条件语句
- 在
Sass
中,还支持条件语句:@if
可一个条件单独使用,也可以和@else
结合多条件使用
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
其最终的 css 代码如下:
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
另外,Sass
还支持 for
,each
等其他用法,感兴趣的小伙伴自己上官网see see吧。