vue 中的预处理器 less

本贴最后更新于 1951 天前,其中的信息可能已经斗转星移

在 less 中文网中是这么介绍 less 的:

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

由于 vue-cli 构建的项目默认是不支持 less 的,所以一开始需要我们自己安装相关模块

一、LESS 的安装

为了便于在 vue 脚手架中使用 less,首先要通过 npm 对 less 进行安装和配置

// npm 安装less和less-loader
npm install less less-loader --save-dev

然后在 config 中进行 webpack 配置,增加相应的 loader

module.exports = {
    //  ...
    module: {
        rules: [
          //  ...
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

二、使用 LESS

在 vue 脚手架中使用时直接在代码中的 style 标签中 加上 lang="less" 属性即可。

<style lang="less" scoped>
 div {
   a {
      color:red;
    }
 }

三、LESS 的常见操作(https://less.bootcss.com/

  1. 变量。通过变量声明,可以存储常用的任何类型的值,包括 颜色、尺寸、选择器、字体名称和 URL 等,以便于尽可能多的重用 CSS
@background-color: #ffffff;
@color: #333;

div {
  background-color: @background-color;
  color: @color;
}

ul {
  background-color: @background-color;
}

li {
  color: @color;
}
  1. 混合(Mixins)。将已有的 class 和 id 的样式应用到其他选择器上
#a{
  background-color: #fff;
  border-radius: 100%;
}

#b{
  width: 50px;
  height: 50px;
  #a
}

#c{
  width: 100px;
  height: 100px;
  #a
}

转换成常规的 css 语法如下:

#a {
    background-color: #fff;
    border-radius: 100%;
}
#b {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 100%;
}
#c {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 100%;
}

同时,Mixin 支持传入参数,如:

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;
    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

转换成 css 为:

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

注:如上所示,如果不想被引用的规则也出现在 CSS 代码中,可以后面加上括号

  1. 嵌套。选择器互相嵌套构造样式表,可以与页面的 HTML 结构相匹配,避免冲突,节省代码量
ul{
    background-color: #fff;
    padding: 10px;
    li{
        margin: 10px;
    }
}

编译成 css 样式

ul{
    background-color: #fff;
    padding: 10px;
}
ul li{
        margin: 10px;
    }
  1. 基础运算。可以对对数值和颜色进行基本的数学运算
@width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @width;
    background-color: @color - 100;// #004590
}

#right{
    width: @width * 2;// 200px
    background-color: @color;
}
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 1 关注
  • less
    3 引用

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...