less入门

约定不等于承诺〃 2022-03-09 12:58 451阅读 0赞

Less 的出现是为了解决 CSS 中过于呆板的写法。[Less 官方文档][Less] 中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。

下面我就用实际案例来具体介绍less

首先，我介绍一下在webstorm中配置less文件自动生成css；

## 一、配置webstorm ##

1.使用 Npm 全局安装 Less

$ npm install less -g

2.配置webstorm

打开webstorm, File——Settings——Tools——File Watchers——点击 加号——选择less

默认设置即可，点击ok ,就可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

创建less文件，直接创建文件添加后缀名为.less的文件即可。

或者创建css文件，选择less也就可以了。

创建成功后，同时在less中生成css同名文件。配置即完成。

![20190313103857858.png][]

##  二、使用less ##

### 1.使用less写样式 ###

1.1创建一个空文件夹，这里命名为：`less`

在根目录下创建 index.html 文件，复制内容如下：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初识 Less</title>
        <link href="./main.css" rel="stylesheet">
    </head>
    <body>
    <div class="container">1</div>
    <div class="container2">2</div>
    <div class="container3">3</div>
    <div id="menu">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi atque debitis eius error est, ex, laboriosam libero modi natus nihil nisi officiis pariatur provident quis quisquam tempore? Accusamus, sed?</p>
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi tempora veniam? Consectetur, dignissimos impedit itaque nisi provident tempore totam vero. Alias consequatur consequuntur doloribus dolorum nam nulla sint unde.</span>
        <a href="#">这是连接</a>
    </div>
    <div class="section">这是引入测试</div>
    </body>
    </html>

1.2 在根目录下创建 main.less 文件，复制内容如下：

// main.less
    
    @width: 100%;
    @height: 100px;
    @color: red;
    
    
    .container{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container2{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container3{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }

webstorm会自动将less文件转换为对应的CSS，main.less中的main.css内容如下：

/*main.css*/
    .container {
      width: 100%;
      height: 100px;
      background-color: red;
      margin-bottom: 5px;
    }
    .container2 {
      width: 100%;
      height: 100px;
      background-color: red;
      margin-bottom: 5px;
    }
    .container3 {
      width: 100%;
      height: 100px;
      background-color: red;
      margin-bottom: 5px;
    }

打开浏览器查看，效果已经实现

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][]

1.3感受less的便利

现在有一个新的需求，需要将三个 div 的背景颜色改成蓝色（blue），如果是之前 css 的写法需要依次找到 container、container2、container3，对应修改里面的 background-color 属性，但是使用 less 我们仅仅修改前面定义过的变量值即可。

// main.less
    
    @width: 100%;
    @height: 100px;
    @color: blue;
    
    
    .container{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container2{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container3{
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }

刷新页面，背景颜色已经更改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2][]

### 2.变量 ###

2.1在前面介绍的案例中已经使用了“变量”的概念，是不是感觉和 js 很像，事实上 less 就是用 js 的写法来写 css。

官网在介绍变量的时候会给出很多应用场景，总结一下就是使用 @ 符号定义变量，使用 @ 符号获取变量，仅仅将 `@变量名` 看成是一个字符串。

从上面例子中可以看到，变量不仅仅可以作为样式属性值：`background-color: @color;`，还可以作为类名：`.@classname` 表示的就是 `.main`。这也就是为什么说`仅仅将 @变量名 看成是一个字符串。`

### `3.混合` ###

在项目开发中，我们一定遇到过一下场景

#menu a {
        color: #111;
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
    
    #menu span {
        height: 16px;
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }
    
    #menu p {
        color: red;
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
    }

可以看到上面三个样式中都有 `border-top` 和 `border-bottom` 两个属性，并且内容完全相同；在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容，在 Less 中通过`将公共属性抽取出来作为一个公共类`的方式规避这一点。

// main.less
    
    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    
    
    #menu a {
      color: #111;
      .bordered;
    }
    
    #menu span {
      height: 16px;
      .bordered;
    }
    
    #menu p {
      color: red;
      .bordered();
    }

/*main.css*/
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu span {
      height: 16px;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu p {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

可以看到，main.css内的内容和示例中的一摸一样；

总结：

*  混合也是减少代码书写量的一个方法；
 *  混合的类名在定义的时候加上`小括弧 ()`，那么在转译成 css 文件时就不会出现；
 *  混合的类名在被调用的时候加上`小括弧 ()`和不加上`小括弧 ()`是一样的效果，看个人习惯，如：第三行和第八行转译成 css 是一样的。

### 4.函数  ###

新建func.less,内容如下

// func.less
    .border-radius(@radius) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
    }
    
    #header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);
    }

编译之后的func.css的内容如下

/*func.css*/
    #header {
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .button {
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
    }
    /*# sourceMappingURL=func.css.map */

可以看到，这里就用到了函数的概念，在 `#header` 和 `.button` 中分别传入不同的参数，结果也就生成不同的代码。

关于 less 中函数的写法还有以下几种：

// 函数的参数设置默认值：
    .border-radius(@radius: 5px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
    }
    
    // 函数有多个参数时用分号隔开
    .mixin(@color; @padding:2) {
      color-2: @color;
      padding-2: @padding;
    }
    
    // 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例
    .wrap() {
      text-wrap: wrap;
    }
    
    // 函数参数如果有默认，调用时就是通过变量名称，而不是位置
    .mixin(@color: black; @margin: 10px; @padding: 20px) {
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    .class1 {
      .mixin(@margin: 20px; @color: #33acfe);
    }
    
    // 函数参数有个内置变量 @arguments，相当于 js 中的 arguments
    .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
      -webkit-box-shadow: @arguments;
         -moz-box-shadow: @arguments;
              box-shadow: @arguments;
    }
    
    // 函数名允许相同，但参数不同，类似于 java 中多态的概念
    .mixin(@color: black) {      
    .mixin(@color: black; @margin: 10px) {

Less 也为我们定义了很多好用的内置函数。关于内置函数，如果掌握，可以在开发过程中节约很多时间，由于内置函数数量很多，这里就不一一介绍，大家可以去官网查看：[less内置函数官方文档][less]

### 5.父元素和子元素的写法 ###

通常我们在CSS中的父元素和子元素的写法如下：

#menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu span {
      height: 16px;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu p {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

在 Less 写法如下，父子嵌套关系一目了然。

#menu {
      a {
        color: #111;
        .bordered;
      }
    
      span {
        height: 16px;
        .bordered;
      }
    
      p {
        color: red;
        .bordered();
      }
    
    }

当然，父子元素还要一种是伪类的写法，在 css 中写法如下：

#menu :after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }

在 less 中写法如下，可以看到引入了新的符号 `&`，以 `&` 来代替主类 `#menu`。

#main {
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

### 6.import  ###

在传统 css 文件中，每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。

/*one.less*/
    .section{
      width: 300px;
      height: 400px;
    }

在main.less中引入

@import "one";

// main.less
    @import "one";
    @width: 100%;
    @height: 100px;
    @color: blue;
    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    
    
    .container {
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container2 {
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }
    
    .container3 {
      width: @width;
      height: @height;
      background-color: @color;
      margin-bottom: 5px;
    }

编译后我们发现在main.css中已经有了one.less中的样式

/*main.css*/
    .section {
      width: 300px;
      height: 400px;
    }
    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .container {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }
    .container2 {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }
    .container3 {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }

那么如果 two.less 中也有一个类名叫 container 的，使用 @import 之后会变成什么样子呢？

我们在main.less的末尾添加如下样式

.section{
      width: 100px;
      height: 200px;
    }

编译后我们发现main.css中，两个样式都出现了，

.section {
      width: 300px;
      height: 400px;
    }
    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .container {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }
    .container2 {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }
    .container3 {
      width: 100%;
      height: 100px;
      background-color: blue;
      margin-bottom: 5px;
    }
    #menu:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu span {
      height: 16px;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    #menu p {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .section {
      width: 100px;
      height: 200px;
    }

只是在显示时，后面的样式会将前面的样式覆盖掉

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3][]

那如果我们需要one.less中的样式生效应该怎么做呢；

只需要调整引入位置在main.less中的.section样式之后即可

.section{
      width: 100px;
      height: 200px;
    }
    @import "one";

这时候，编译后的样式位置也发生了变化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4][]

页面显示样式也发生了变化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 5][]

[Less]: https://link.jianshu.com/?t=http://less.bootcss.com/usage/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220309/fd539b1a274c4eada5a060564a016cf6.png
[20190313103857858.png]: /images/20220309/6d0612e2c26249b0b3c68ef941facc24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220309/a68b2f4207114b2c96ccf3c22688d598.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2]: /images/20220309/8eb483fa96ce4154bae468c2f65770a6.png
[less]: https://less.bootcss.com/functions/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3]: /images/20220309/af8b9540d87a4df987c1a9d9a654f58a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 4]: /images/20220309/426ecb91b3954cc5b621007eae326c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 5]: /images/20220309/cdda3c47e6394a80b1c6ae735a9f6cef.png