Less学习

    Less的使用（中文文档https://less.bootcss.com/）

1. 学习怎么使用之前必然要了解一下在什么环境中使用

• node环境

npm install -g less
lessc styles.less styles.css 

• 浏览器环境

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

 

   2. 特点

• 向后兼容
• 变量定义属性值

  3. 使用事例

• 提前定义属性的值，例如：@变量xxx：10px；然后使用即为width：@变量xxx

@width: 10px;
@height: @width + 10px;
#header {
    width: @width;
    height: @height;
}

//等价为
#header {
    width: 10px;
    height: 20px;
}

• 提前定义一部分样式，可理解为抽取公共的部分进行了定义

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered();
}

• 嵌套定义

#header .logo {
    width: 200px;
    height: 200px;
}
//等价为
#header {
    .logo {
        width: 200px;
        height: 200px;
    }
}

• 可以使用表达式进行属性的赋值

   example：@base: 2px * 3;

• 使用函数进行赋值

   函数手册：https://less.bootcss.com/functions/ 

• 导入  @import " style.less "