CSS扩展语言-Less用法总结

keeely
972 阅读6分钟

前言

Less是一门css扩展语言，所谓『扩展』指的是less在css语法的基础上，新增了一些功能特性，例如变量、函数等，编写起来更加灵活，便于后续维护。

Less安装

1. 在浏览器中使用less
<head>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <!--引入CDN-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
</head>
2. 在node环境中使用less
// 全局安装
npm install -g less
// 查看版本
lessc -v

Less安装成功之后就可以使用下方命令行语句将less文件编译成css文件

lessc demo.less demo.css
3. 在webpack中使用less
  • 安装 less 和 less-loader
npm install less less-loader --save-dev
  • 添加配置 webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

用法总结

1. 变量

1.1 常规使用

@width: 500px;
@height: @width + 100px;
@border-color: #dcdfe6;

.box {
    width: @width;
    height: @height;
    border: 1px solid @border-color;
}

编译为

.box {
  width: 500px;
  height: 600px;
  border: 1px solid #dcdfe6;
}

1.2 定义选择器名称或属性名称

@selector: container;
@pro-name: width;

.@{selector} {
    @{pro-name}: 100px;
}

编译为

container {
  width: 100px;
}

1.3 定义URL

@img-url: './image/icon.png';

.box {
    background-image: url("@{img-url}");
};

编译为

.box {
    background-image: url("image/icon.png");
}

1.4 变量的作用域

less中变量的作用域与js类似，先在当前层级中寻找，如果找不到则继续向上查找。因此，如果定义了多个同名变量，则距离引用处最近的值生效。

@common-color: red;

#page {
    @common-color: white;
    #header {
        color: @common-color; // white
    }
}

与css中自定义属性的规则一致，变量不是必须要在使用前定义。

@common-color: red;

#page {
    #header {
        color: @common-color; // white
    }
    @common-color: white;
}
2. 映射

自less3.5版本开始，可以定义一组映射值，通过类似于JS中对象属性的调用方式去使用，进一步提升代码的可复用性。

#colors() {
    primary: blue;
    secondary: green;
  }

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

编译为

.button {
  color: blue;
  border: 1px solid green;
}
3. 混合

混合是指将某组属性从一个规则集引入其他的规则集的方法，假设定义了一个bordered类：

.bordered {
    border-top: solid 1px #dcdfe6;
    border-bottom: solid 2px #dcdfe6;
}

若想在其他规则集中使用.bordered类的全部属性，可以使用以下方法引入：

.bordered {
    border-top: solid 1px #dcdfe6;
    border-bottom: solid 2px #dcdfe6;
}
#menu a { 
    color: red;
    .bordered(); 
}
.box a {
    color: blue;
    .bordered(); // 不加()，使用.bordered也ok;
}

编译为

.bordered {
  border-top: solid 1px #dcdfe6;
  border-bottom: solid 2px #dcdfe6;
}
#menu a {
  color: #ff0000;
  border-top: solid 1px #dcdfe6;
  border-bottom: solid 2px #dcdfe6;
}
.box a {
  color: #6a5acd;
  border-top: solid 1px #dcdfe6;
  border-bottom: solid 2px #dcdfe6;
}

如果在混合类名字后加上括号，则混合类不会被编译输出

.bordered() {
    border-top: solid 1px #dcdfe6;
    border-bottom: solid 2px #dcdfe6;
}
#menu a { 
    color: red;
    .bordered(); 
}
.box a {
    color: blue;
    .bordered(); // 不加()，使用.bordered也ok;
}

编译为

#menu a {
  color: #ff0000;
  border-top: solid 1px #dcdfe6;
  border-bottom: solid 2px #dcdfe6;
}
.box a {
  color: #6a5acd;
  border-top: solid 1px #dcdfe6;
  border-bottom: solid 2px #dcdfe6;
}
4. 嵌套

4.1 基础用法

Less的嵌套用法类似于HTML的层级结构，更加清晰，可读性提升

.container {
    div {
        width: 500px;
        height: 500px;
        border: solid 1px#dcdfe6;
    }
    p {
        font-size: 25px;
        color: #dcdfe6;
    }
}

编译为

.container div {
  width: 500px;
  height: 500px;
  border: solid 1px #dcdfe6;
}
.container p {
  font-size: 25px;
  color: #dcdfe6;
}

4.2 &符号

嵌套规则中可使用&代替父元素（遇见伪类/伪元素/交集选择器时，可以用&代替父元素）

a {
    color: #0c0c07;
    &:hover {
        color: #2e61c0;
        border-bottom: solid 1px #dcdfe6;
    }
}

编译为

a {
  color: #0c0c07;
}
a:hover {
  color: #2e61c0;
  border-bottom: solid 1px #dcdfe6;
}

4.3 @规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）也可以使用嵌套，经过编译后 @ 规则会冒泡到规则集开始的位置，而同一规则集中其它元素的相对顺序保持不变。

.component {
    width: 300px;
    @media (min-width: 768px) {
        width: 600px;
        @media (min-resolution: 192dpi) {
            background-image: url(./img/icon.png);
        }
    }
    @media (min-width: 1280px) {
        width: 800px;
    }
}

编译为

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(img/icon.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
5. 转义

less中可以使用~''或~""将任意一个字符串转义之后作为变量值或属性值(转义之后按原样输出)

@min600: ~"(min-width: 600px)";
.container {
  @media @min600 {
    font-size: 1.2rem;
  }
}

编译为

@media (min-width: 600px) {
  .container {
    font-size: 1.2rem;
  }
}

自Less 3.5 版本开始，可以简写为：

@min600: (min-width: 600px);
.container {
  @media @min600 {
    font-size: 1.2rem;
  }
}
6. 运算

Less语法中支持对数字、变量或颜色进行加减乘除运算，在进行加减运算或比较之前会进行单位换算，通常以运算式中从左至右出现的第一个单位为主。如果单位换算无效或无意义，则忽略单位。无效单位转换例如：cm => px，rad（弧度） => %

// 运算前进行单位换算
@expression-1: 1cm + 5mm; // 结果是1.5cm
@expression-2: 3 - 2m - 20cm; // 结果是0.8m

// 单位换算失效
@expression-3: 2px + 1 + 3cm; // 结果是6cm
// 乘除法不进行单位转换
@expression-4: 2cm * 3mm; // 结果是 6cm

为了兼容css，calc()不直接计算数学表达式的结果，但会去计算嵌套函数中变量和数学公式的值。

@base: 50vh/2;
width: calc(50% + (@base - 20px));

编译为

.box {
  width: calc(50% + (25vh - 20px));
}
7. 命名空间和访问符

如果只想使用混合集中的一部分规则，可以通过命名空间获取，定义一个混合集如下：

#bundle() {
    .button {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
            background-color: white;
        }
    }
    .container {
        background-color: pink;
        .a {
            border: 1px solid gray;
            &:hover {
                color: #0400ff;
            }
        }
     }
}
#header a {
    color: orange;
    #bundle.button();  // 也可以写为 #bundle > .button 形式
}

编译为

#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

如果只想使用.container的.a规则集，可以写为：

#header a {
    color: orange;
    #bundle.container.a();
}
8. 函数

less中内置了许多用于处理字符串、颜色以及算数运算的函数，详情请参阅Less 函数以下列举几种常用的函数类型：

8.1 逻辑函数

  • if() 根据条件返回两个值其中之一
@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}

编译为

div {
  margin: 0;
  color: black;
}
  • boolean() 判断真或假
@bg: black;
@bg-light: boolean(luma(@bg) > 50%); // luma()计算颜色对象的亮度

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

编译为

div {
    background: black;
    color: white;
}

8.2 字符串函数

  • escape() 对字符串中的特殊字符进行URL编码
escape('a=1') // 结果是a%3D1
  • e() 转义函数
@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()";
filter: e(@mscode);

编译为

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

8.3 数学函数

  • ceil() 浮点数最大取整数;

  • floor() 浮点数最小取整数;

  • round() 浮点数四舍五入;

  • percentage() 将浮点数转换为百分比字符串;

  • sqrt() 计算一个数的平方根，保持单位不变;

  • min() 返回一个或多个值中的最小值;

  • max() 返回一个或多个值中的最大值。

8.4 类型函数

  • isnumber() 判断传入值是否是数字，返回true或false
isnumber(#ff0); // false 
isnumber(blue); // false 
isnumber("string"); // false 
isnumber(1234); // true 
isnumber(56px); // true
  • isstring() 判断传入值是否是字符串，返回true或false
isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
  • iscolor() 判断传入值是否是颜色，返回true或false
iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false

8.5 杂项函数

image-size()、 image-width()、 image-height() 分别是获取图片尺寸、宽度、高度的函数

9. 导入

在一个less文件内可以通过import导入其他.less文件，亦可以导入css文件。在导入.less文件时，可以省略扩展名.less。

10. 注释

我们能够在less文件内使用多行注释和单行注释，其中单行注释不会被编译到css中。

avatar
文章
阅读
粉丝