LessJs笔记

1、变量
@width: 10px;
@height: @width + 10px;

2、混合
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu{
  color: #111;
  .bordered();
}

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

4、运算
【算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。】
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
calc()
@var: 50vh/2;
width: calc(50% + (@var - 20px)); 

5、转义
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

6、函数
@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

7、命名空间和访问符

8、映射
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

9、作用域
@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

10、注释
/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

11、导入
@import "library"; // library.less
@import "typo.css";

在vue的安装配置：

1、安装
npm i less less-loader --save-dev

2、webpack配置
module/rules => getLoader(/\.less$/, 'less'),
function getLoader(reg,type) {
    return {
        test: reg,
        use: [
            process.env.NODE_ENV === "development" && "style-loader",
            process.env.NODE_ENV === "production" && {
                loader: MiniCssExtractPlugin.loader
            },
            'css-loader',
            'postcss-loader',
            {
                loader: "postcss-loader",
                options: {
                    plugins: [
                        autoprefixer()
                    ], // 浏览器兼容性前缀补全
                },
            },
            type === 'less' && {
                loader: 'less-loader'
            }
        ].filter(Boolean)
    }
}

 

参考文献：【https://less.bootcss.com】