关于Less_CSS语言扩展

---

前言

官方网址 lesscss.cn

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Less是什么？

Less（Leaner Style Sheets 的缩写）是一种向后兼容的 CSS 语言扩展。Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。Less 只对 CSS 语言做了一些方便的补充。

二、Less使用

创建 .less文件
VS Code中添加下图所示的插件，每当less文件保存时生成对应的css文件

1.定义变量

代码如下（示例）：

@color: green;
@font14: 20px;
@hfont: 200px;
@wfont: 200px;

.box {
    background-color: @color;
    height: @hfont;
    width: @wfont;
}

a {
    font-size: @font14;
}

2.Less嵌套

代码如下（示例）：

@color: green;

.header {
    width: 200px;
    height: 200px;
    background-color: @color;

    //less嵌套 子元素的样式直接写到父元素里
    a {
        font-size: 14px;
        color: blue;

        //内层选择器前面没有&符号 则被解析为父选择器的后代
        //如果有&符号 则被解析为父选择器的同级元素或伪类
        &:hover {
            color: red;
        }
    }
}

.nav {
    .logo {
        color: #000;
    }
}

---

更多Less方法见官网lesscss.cn