003.从零开始复习前端--Less

2025年07月10日前端

003.从零开始复习前端–Less

学习没有动力就可以看看招聘网站上面的薪资，可以对比其他的工作环境

Less

css预处理器

中文文档：https://less.bootcss.com/

浏览器环境中使用

原生

1 2	<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

在vue中使用

npm/yarn

1	npm install --save less less-loader

在main.js中引入

1 2	import less from 'less' Vue.use(less)

或者在webpack.base.config.js中配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080
  },
  module: {
    rules: [
      // less配置
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
        options: { sourceMap: true }
      }
    ]
  }
})

基本使用

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

嵌套

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

运算

不推荐使用，less运算有的只认第一个单位

1
2
3

@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@base: 2cm * 3mm; // 结果是 6cm

混入

基本使用
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

携带参数
.bordered (@color:#fff){ // @color:#fff默认值
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color:@color;
}
#menu a {
  color: #111;
  .bordered(#999);
}

.post a {
  color: red;
  .bordered();
}

结合映射
.bordered (){
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color:#fff;
}
#menu a {
  color: .bordered()[color];
  // color: .bordered[color]; // 缩写，但是不方便阅读看个人或团队
}

.post a {
  color: red;
  .bordered();
}

引入

1 2	@import "library"; // library.less @import "typo.css";

其他内容查看文档：https://less.bootcss.com/

Sass/Scss

与less类似，使用基本是一样的

文档：https://www.sass.hk/