19 LESS

less

简介：

• less是一门css的预处理语言

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

• 在less中添加了许多的新特性：像对变量的支持，对mixin的支持

• less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

1.安装插件

在vscode中搜索less，点击直接安装

2.编写less

快捷创建三个盒子的方法

box$*3/*按下回车键可生成*/
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

---

这就开始尝试编写less，感觉有点像函数名重载加变量函数

以下是没有用此插件的方式，有些浏览器例如ie并不支持

    <style>
        html{
            /* css原生也支持变量的设置 */
            --color:#ff0;
            --length:200px;
        }

        .box1{
            /* calc()计算函数 */
            width: calc(200px*2);
            height: var(--length);
            background-color: var(--color);
        }

        .box2{
            width: var(--length);
            height: var(--length);
            color: var(--color);
        }

        .box3{
            width: var(--length);
            height: var(--length);
            border: 10px solid var(--color);
        }
    </style>

以下是用less进行封装的思想，有点类似面向对象的过程

创建style.less文件，编写less代码

保存style.less的同时会生成一个style.css文档

注释

// less中的单行注释，注释中的内容不会被解析到css中

/*

css中的注释，内容会被解析到css文件中

*/

---

接下来通过例题来感受具体语法以及less插件带来的乐趣吧~嘿嘿

例题1

body{
    width: 100px;
    height: 100px;
    
    div{
        color: red;
    }
}

插件翻译成如下

body {
  width: 100px;
  height: 100px;
}
body div {
  color: red;
}

想直接实时同步看编译效果需要在HTML中添加

<link rel="stylesheet" href="/css/style.css">

例题2

.box1{
    background-color: #bfa;

    .box2{
        background-color: #ff0;

        .box4{
            color: red;
        }
    }

    .box3{
        background-color: orange;
    }
}

翻译如下

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  color: red;
}
.box1 .box3 {
  background-color: orange;
}

例题3

//变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法： @变量名
@a:200px;
@b:#bfa;
@c:box6;

.box5{
    //使用变量是，如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color:@b;
}

//作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width: @d;
    height: @e;
}

//可以在变量声明前就使用变量
@e:335px;


div{
    width: 300px;
    // 新版的语法
    // height: $width;
}

翻译如下：

.box5 {
  width: 200px;
  color: #bfa;
}
.box6 {
  width: 200px;
  background-image: url("box6/1.png");
}
div {
  width: 115px;
  height: 335px;
}
div {
  width: 300px;
}

例题4

.box1{
    .box2{
        color: red;
    }

    >.box3{
        color: red;

        &:hover{
            color: blue;
        }
    }

    //为box1设置一个hover
    //& 就表示外层的父元素
    &:hover{
        color: orange;
    }
    div &{
        width: 100px;
    }
}

翻译如下：

.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}
div .box1 {
  width: 100px;
}

例题5

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

//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    //直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin 混合
    .p1();
}

翻译如下：

.p1,
.p2 {
  width: 100px;
  height: 200px;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}

例题6

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4;
}

翻译如下：

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

例题7

//混合函数 在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(300px);
    // .test(@bg-color:red, @h:100px, @w:300px);
}

span{
    color: average(red,blue);
}

html{
    width: 100%;
    height: 100%; 
}
body {
    width: 100%;
    height: 100%;
    background-color: #bfa;
}

body:hover{
    background-color: darken(#bfa,50%);
}

翻译如下

div {
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #800080;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover {
  background-color: #22aa00;
}

3.补充

//import用来将其他的less引入到当前的less
//可以通过import来将其他的less引入到当前的less中
@import "syntax2.less";

.box1{
    // 在less中所有的数值都可以直接进行运算
    // + - * /
    width: 100px + 100px;
    height: 100px/2;
    background-color: #bfa;
    
}

LESS地图

通过什么来调用呢？首先在less插件中复制一段代码

"less.compile": {

    "compress": true, // true => remove surplus whitespace

    "sourceMap": true, // true => generate source maps (.css.map files)

    "out": true // false => DON'T output .css files (overridable per-file, see below)

}

将其粘贴到设置中的easy less中的settings.json文件中，改为true

翻译如下，自动生成：

.box1 .box2{color:red}.box1>.box3{color:red}.box1>.box3:hover{color:blue}.box1:hover{color:orange}div .box1{width:100px}.p1,.p2{width:100px;height:200px}.p2{color:red}.p3{width:100px;height:200px}.p5{width:100px;height:100px}div{width:300px;height:200px;border:1px solid red}span{color:#800080}html{width:100%;height:100%}body{width:100%;height:100%;background-color:#bfa}body:hover{background-color:#2a0}.box1{width:200px;height:50px;background-color:#bfa}/*# sourceMappingURL=./other.css.map */