sass、scss、less、的区别
sass、scss、less都是css预处理器,区别如下:
1语法格式:
sass采用缩进格式,不使用大括号和分号
$color: #333
body
background-color: $color;
font-size: 14px;
h1:
color: $color
scss与css语法相似,使用大括号和分号
$color: #333;
body {
background-color: $color;
font-size: 14px;
h1 {
color: $color;
}
}
less同样类似css语法
@color: #333;
body {
background-color: @color;
font-size: 14px;
h1 {
color: @color;
}
}
2变量定义与使用:
sass和scss都使用$符定义变量
$primary-color: #007bff;
$secondary-color: #6c757d;
.button {
background-color: $primary-color;
color: $secondary-color;
}
less使用@符号定义变量
@primary-color: #007bff;
@secondary-color: #6c757d;
.button {
background-color: @primary-color;
color: @secondary-color;
}
3嵌套规则:
sass和scss都使用$符表示父元素
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
color: #333;
&:hover {
color: #000;
}
}
}
}
}
less使用~表示父元素
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
color: #333;
&:hover {
color: #000;
}
}
}
}
}
4混合(Mixins):
sass和scss通过@mixin定义,@include调用
@mixin button-style {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.button {
@include button-style;
}
less使用.mixin()形式定义和调用
.button-style() {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.button {
.button-style();
}
5继承:
sass、scss和less都使用@extend实现继承
//sass
.error {
border: 1px solid red;
background-color: #f8d7da;
}
.serious-error {
@extend.error;
border-width: 3px;
}
//less
.error {
border: 1px solid red;
background-color: #f8d7da;
}
.serious-error {
@extend.error;
border-width: 3px;
}