Less简介

一、概念

Less是一门向后兼容的 CSS 扩展语言。

二、特性

1、变量

(1).属性值作为变量。这样需要修改时，只需修改变量值。

.less文件

        @titleColor: #f76bdb;

        h1 {
            color: @titleColor;
        }

对应的.css文件

h1 {
  color: #f76bdb;
}

(2).字符串作为变量。插入到相应位置。

.less文件

        @imgurl: "../static/images/romantic/";

        .div1 {
            background-image: url("@{imgurl}romantic1.png");
        }

        .div2 {
            background-image: url("@{imgurl}romantic2.png");
        }

        .div3 {
            background-image: url("@{imgurl}romantic3.png");
        }

对应的.css文件

.div1 {
  background-image: url("../static/images/romantic/romantic1.png");
}
.div2 {
  background-image: url("../static/images/romantic/romantic2.png");
}
.div3 {
  background-image: url("../static/images/romantic/romantic3.png");
}

---

2、混合

将一组属性从一个规则集混入另一个规则集。

.less文件

        .bordered {
            border: dotted 3px gray;
            border-radius: 20%;
        }

        .small {
            width: 50px;
            height: 50px;
        }

        .big {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: pink;
            .small();
            .bordered();
        }

        .box2 {
            background-color: yellowgreen;
            .big();
            .bordered();
        }

对应的.css文件

.bordered {
  border: dotted 3px gray;
  border-radius: 20%;
}
.small {
  width: 50px;
  height: 50px;
}
.big {
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: pink;
  width: 50px;
  height: 50px;
  border-top: dotted 1px gray;
  border-radius: 20%;
}
.box2 {
  background-color: yellowgreen;
  width: 100px;
  height: 100px;
  border-top: dotted 1px gray;
  border-radius: 20%;
}

---

3、嵌套

(1).嵌套代替层叠

.less文件

        .context {
            font-family: Verdana, Geneva, Tahoma, sans-serif;

            .title {
                font-size: 20px;
                font-weight: 700;
            }

            .main {
                color: red;
            }
        }

对应的.css文件

.context {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.context .title {
  font-size: 20px;
  font-weight: 700;
}
.context .main {
  color: red;
}

(2).规则嵌套和冒泡

.less文件

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

对应的.css文件

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

三、html使用less的简易方法

1、vscode下载“easy less”插件

2、新建.less文件，书写less代码并保存，vscode会自动生成对应的.css文件

3、在html文件中引入css文件

    <link rel="stylesheet" href="../less/变量.css">

4、运行html