Less的概念和用法

目录

1.Less是什么

2.Less的特点

3.Less的安装

4.Less的使用

less文件编译

less语法

1.嵌套

2.变量

3.混入

不带参数 

带参数混入

给参数设置默认值

定义不带参数属性集合

使用@arguments

4.模式匹配

5.表达式

6.运算

7.Color函数

8.Math函数

9.（命名空间）将一些变量或者混合模块打包起来

---

1.Less是什么

less是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。

2.Less的特点

less是基于JavaScript的，是超集的CSS。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。我们可以定义样式，它可以在整个代码中重复使用。

3.Less的安装

$ npm install -g less

4.Less的使用

less文件编译

lessc style.less style.css

 可以在控制台看到文件编译成功

less语法

1.嵌套

语法：父级{ 子级{ } }

.nav{
    width:100%;
    height:50px;
    border-bottom:1px solid #ccc;
    ul{
        text-align: center;
        list-style:none;
        font-size:17px;
        li{
            float: left;
            width:22%;
            line-height:36px;
                a{
                    text-decoration: none;
                    color:#000;
                    &:hover{ color:#FBA800; }
                }
        }
    }
}

其中&用于写串联选择器，而不是写后代选择器，对伪类比较有用，如:hover和:focus等。

#navclass {
  &.nav {
    background:#fff; 
  }
  .logoclass{
    color:#ccc; 
  }
}
/**相当于**/
#navclass.nav{  /**此处没有空格**/
    background:#fff;
} 
#navclass .logoclass{  /**此处有空格**/
    color:#ccc; 
}

2.变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
li{
    float: left;
    width:22%;
    line-height:36px;
        a{
            text