作者:手机用户2702932894 | 来源:互联网 | 2023-09-24 16:15
CSS预处理语言Less,Sass,Stylus安装Lessyarnaddless运行命令.node_modules.binlessc嵌套规则Less、Sass嵌套规则一样#header{h1{font-size:26px;font-weight:bold;}p{font-s
CSS预处理语言
Less,Sass,Stylus
安装
Less
yarn add less
运行命令 ./node_modules/.bin/lessc
嵌套规则
Less、Sass嵌套规则一样
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
变量
Less
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
Sass
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
Less变量采用的是@
Sass变量采用的是$
混合(mixin)
Less
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Sass
@mixin rounded-corners ($radius: 5px) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}
Less的mixin尽可能的跟CSS一样
Sass的mixin接近JS的书写风格 @mixin @include
extend
Less
.a{
&:extend(.b);
font-size: 12px;
}
.b{
font-weight: bold;
}
Sass
.a{
@extend .b;
font-size: 12px;
}
.b{
font-weight: bold;
}
Less和Sass书写区别