Less、sass、stylus 的使用\ &的作用

转载已于 2025-08-02 17:18:08 修改 · 650 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000019738480?utm_source=tag-newest

文章标签：

#less

于 2019-07-04 22:50:36 首次发布

Css3 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍如何在Vue项目中使用Sass、SCSS、Stylus和Less等预处理器，包括安装配置、语法特点及常见问题解决，适用于前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SCSS的基本用法-入门篇-CSDN博客

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

& 用在嵌套代码里，代表引用父元素

下面例子中 &代表 .dashboard

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

解析后：↓
.dashboard-container {
  margin: 30px;
}
.dashboard-text {
  font-size: 300px;
  line-height: 46px;
}

&. &: 区别↓
a 
  &.class
/* ==> */
a.class
 
a
  &:hover
/* ==> */
a:hover

Vue 中如何使用stylus(前提已安装node )

https://stylus.comptechs.cn/ Vue 中如何使用stylus 中文文档

Stylus基本使用 - 简书

安装语法: npm install stylus

vue项目中使用stylus预处理器写css语法，老是出现 Cannot find module ‘stylus’ 的错误，
鼓捣了很久，包括webstorm中配置stylus的支持，安装依赖。 

终于找到原因： 
在webpack 里面用了 stylus-loader，但npm instatll 没有正确安装依赖，才会出现error： Cannot find module ‘stylus’。

解决办法： 
重新npm install stylus 和 stylus-loader 
在你所在的项目目录中，输入：

npm install stylus  --save-dev 
npm install stylus-loader  --save-dev

stylus 简单教程：

$background-color = lightblue
add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

编译后：
.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

& 代表父级引用 
&. &: 区别↓
a 
  &.class
/* ==> */
a.class
 
a
  &:hover
/* ==> */
a:hover

Vue 中如何使用sass(前提已安装node )

vue项目安装sass - 简书安装

vue2.0项目中使用sass(含sass基础用法示例)_前端李ce的博客-CSDN博客_vue使用sass sass教程

变量符不一样，Less是@，而Scss是$。

npm install node-sass@^4.9.0 -D
npm install sass-loader@^7.0.3 -D

第二步修改web pack.base.conf.js的module

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},

Vue 中如何使用less (前提已安装node )

报错: loaderContext.getResolve is not a function

loaderContext.getResolve is not a function_zhaokai0130的博客-CSDN博客按照里面修改后再 npm install 感觉无效

解决方法：卸载安装的高版本的less-loader，【npm uninstall less-loader】，安装指定低版本的less-loader【npm install less-loader@4.1.0 --save】即可解决报错。有用

1.安装less和less-loader ，在项目目录下运行如下命令、
npm install less less-loader --save-dev

安装成功后，打开build/webpack.base.conf.js ，在 module.exports = 的对象的module.rules 后面添加一段：
{
   test: /\.less$/,
   loader: "style-loader!css-loader!less-loader",
}
使用：
<style lang="less" scoped> lang="stylus" scoped
  .index-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 0.373rem;
    }
  }
</style>

输出 $ lessc styles.less styles.css

在VsCode中使用Less方法：

安装node.js （这是基本操作了。LESS需要有node.js支持，安装node.js略过）
在VSCode中。搜索插件 Easy LESS。安装，安装完后最好重启一次VSCode
普通的使用需求都可以满足了。在需要生成css文件的地方，新建一个.less文件。

在里面写你需要的样式，保存后，会自动在同级目录下，生成同样名称的css文件
至此，普通版的Less配置就完成了.

less里面写 class嵌套：

nav{
    height: 50px;
    background: red;
    .content{
        width: 1200px;
        height: 50px;
        .left{
            float: left;
        }
    }
}
a{
                &:hover{
                    color: red;
                }
            }
 
css生成：
a:hover{
color:red;
}
nav .content {
  width: 1200px;
  height: 50px;
}
nav .content .left {
  float: left;
}

// 最简单的混合方式
.border{
    border: 1px solid #000;
}
.class{
    .border
}
//解析
.class {
    border: 1px solid #000;
}

// 带参数混合方式
.border(@color){
    border:1px solid @color;
}
.box{
    .border(#7b7b7b)
}
//解析
.box {
    border: 1px solid #7b7b7b;
}

//带默认参数
.border(@width:1px){
    border:@width solid #323232;
}
.box1{
    .border()
}
.box2{
    .border(2px)
}
//解析
.box1 {
  border: 1px solid #323232;
}
.box2 {
  border: 2px solid #323232;
}

.font{
    font:(15/@rem)~'/'(30/@rem) '微软雅黑';
}
.font{
    font:0.3rem/0.6rem '微软雅黑';
}

配合计算js动态计算rem font-size 做项目时先全部写成px 再全选中px 用@rem替换 一次就ok
 
less：
@rem:50rem;
.div1{
    width: 375/@rem;
    height: 100/@rem;
    background: red;
    .div2{
        width: 266/@rem;
        height: 452/@rem;
        font-size: 14/@rem;
    }
}

输出：
.div1 {
  width: 7.5rem;
  height: 2rem;
  background: red;
}
.div1 .div2 {
  width: 5.32rem;
  height: 9.04rem;
  font-size: 0.28rem;
}