标签：26 less color height width background 200px

一、什么是less

less 是一门 CSS 的预处理语言。less 是 CSS 的增强版，通过 less 可以实现编写更少的代码实现更强大的样式。在 less 中添加了许多的新特性，像对变量的执行、对 mixin 的支持... less的语法大体上和 CSS 一致，但是 less 中添加了许多对 CSS 的扩展，所以浏览器无法直接执行 less 代码，要执行必须先将 less 转换为 CSS，然后再由浏览器执行。

原生的 CSS：

<!DOCTYPE html>
<html>
    <head>
        <title>less</title>
        <meta charset="UTF-8">

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

            div{
                /* calc()：计算函数 */
                width: calc(200px/2);
                height: calc(100px);
            }

            .box1{
                background-color: var(--color);
            }

            .box2{
                color: var(--color);
            }

            .box3{
                border: 10px solid var(--color);
            }
        </style>
    </head>
    <body>
        <div class="box1">hello</div>
        <div class="box2">hello</div>
        <div class="box3">hello</div>
    </body>
</html>

HTML 页面：

<!DOCTYPE html>
<html>
    <head>
        <title>less</title>
        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <div class="box4"></div>
            </div>
            <div class="box3"></div>
        </div>
    </body>
</html>

使用 less：

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

/*
    CSS中的注释，内容会被解析到CSS文件中
*/

.box1{
    width: 500px;
    height: 500px;
    background-color: #bfa;

    .box2{
        width: 200px;
        height: 200px;
        background-color: bisque;

        .box4{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    }

    .box3{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
}

less 编译为 CSS 的代码：

/*
    CSS中的注释，内容会被解析到CSS文件中
*/
.box1 {
  width: 500px;
  height: 500px;
  background-color: #bfa;
}
.box1 .box2 {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
.box1 .box2 .box4 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box1 .box3 {
  width: 200px;
  height: 200px;
  background-color: blueviolet;
}

HTML 页面中无法直接引用 less 编写的代码，需要引用 less 生成的 CSS 代码；

在 VSCode 中，可以使用一个名为 Easy LESS 的插件编译 less 文件，编译生成的 CSS 文件的名字与 less 文件的名字一致；

二、变量

变量，在变量中可以存储一个任意的值，并且可以在需要时，任意修改变量的值；

定义变量的语法格式如下：@变量名

使用 less：

// 变量的语法：@变量名
@a:500px;
@b:#bfa;
@c:box3;
@d:image;

.box1{
    // 使用变量时，如果使直接使用，则以 @变量名 的形式使用即可
    width: @a;
    height: $width;
    background-color: @b;

    .box2{
        width: 200px;
        height: 200px;
        background-color: bisque;

        .box4{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    }

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

less 编译成 CSS 的代码：

.box1 {
  width: 500px;
  height: 500px;
  background-color: #bfa;
}
.box1 .box2 {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
.box1 .box2 .box4 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box1 .box3 {
  width: 200px;
  height: 200px;
  background-image: url("image/1.jpg");
}

三、父元素和扩展

使用 less：

.box1{
    width: 500px;
    height: 500px;
    background-color: #bfa;

    .box2{
        width: 200px;
        height: 200px;
        background-color: red;
        >.box4{
            width: 100px;
            height: 100px;
            background-color: blue;
            // 为 .box4 设置一个hover
            // & 就表示外层的父元素，&写前后还是写后面都行
            &:hover{
                background-color: aquamarine;
            }
        }
    }

    // :extend()对当前选择器扩展指定选择器的样式（选择器分组）
    .box3:extend(.box1 > .box2){
        background-color: yellow;
    }

    // 使用类选择器时，可以在选择器后面添加一个括号
    // 这是我们实际山创建了一个 mixins
    //.box3{
    //    // 直接对指定的样式进行引用，
    //    // 这里就相当于将 .box2 的样式在 .box3 中进行了复制
    //    .box2();
    //    background-color: yellow;
    //}
}

less 编译成 CSS 的代码：

.box1 {
  width: 500px;
  height: 500px;
  background-color: #bfa;
}
.box1 .box2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
.box1 .box2 > .box4 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.box1 .box2 > .box4:hover {
  background-color: aquamarine;
}
.box1 .box3 {
  background-color: yellow;
}

四、混合函数

使用 less：

// 混合函数 在混合函数中可以直接设置变量
.test(@a,@bg-color:#bfa){
    width: @a;
    height: @a;
    background-color: @bg-color
}

.box1{
    // 调用混合函数，按顺序传递参数
    //.test(500px,#bfa);
    //.test(@bg-color:#bfa, @a:500px)
    .test(500px);
}

less 编译成 CSS 的代码：

.box1 {
  width: 500px;
  height: 500px;
  background-color: #bfa;
}

五、less的其它使用

使用 less：

// 可以使用@import将其它的less引入到当前的less
@import "style.less";

.box1{
    // 在less中所有的数值都可以直接进行计算
    width: 300px + 200px;
    height: 700px - 200px;
}

less 编译成 CSS 的代码：

.box1 {
  width: 500px;
  height: 500px;
}
.box1 {
  width: 500px;
  height: 500px;
}

如果我们向把生成的 CSS 文件与 less 源文件进行关联，我们可以在 Easy LESS 插件的配置文件 settings.json 文件中的 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)

标签：26,less,color,height,width,background,200px
From： https://www.cnblogs.com/nanoha/p/17023607.html

26. less

一、什么是less

二、变量

三、父元素和扩展

四、混合函数

五、less的其它使用

相关文章

赞助商

阅读排行