Less、scss、stylus 对比

最新推荐文章于 2024-06-28 03:56:11 发布

daisy0328

最新推荐文章于 2024-06-28 03:56:11 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/daisy0328/article/details/110207295

版权

web前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

本文对比分析了Less、Scss和Stylus在声明变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和判断语句等方面的特点。它们都提供变量、混入等功能，但具体语法和特性各有不同，如Scss支持直接单位换算，Stylus的运算能力最强。

摘要由CSDN通过智能技术生成

都有变量、混入、函数、嵌套、继承、颜色函数等的概念。

一、关于声明变量

Less使用@变量名：值
Scss使用$变量名：值
Stylus使用变量名=值，$可加可不加

二、关于作用域

Scss没有全局作用域的概念，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

Less和Styuls中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。

三、关于混合——Mixins

为公用的CSS样式定义一个Mixins，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

1、Scss的混合：

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号：分开。

调用时使用“@include”，然后在其后紧跟你要调用的Mixins名。

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){	
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

2、Less的混合：

在Less中可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号：分隔开。

调用时直接.mixinName()。

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

3、Stylus的混合：

可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号=来连接。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

四、关于嵌套

嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。

使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号｛｝里写这些元素。同时可以使用“&”符号来引用父选择器。对于Scss、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

五、关于继承

1、Sass和Stylus的继承

Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

编译为CSS后代码如下：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

2、Less的继承

LESS支持的继承和Scss与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。
这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

编译为CSS后代码如下：


.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}