Less Less基础

        1.less

         less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。Less既可以在客户端上运行，也可以借助Node.js在服务端运行。

        2.Less中的注释

                (1).以//开头的注释，不会被编译到css文件中

                (2).以/**/包裹的注释会被编译到css文件中

        3.Less中的变量

                (1).使用@来声明一个变量：@pink：pink，@selector:#box;

                (2).作为普通属性值来使用：直接使用@pink

                (3).作为选择器、属性名和url：使用@{selector}的形式

              @color:deeppink;

              @idname:#box;

              @optionName:width;

              .......................

              @{idname}{

                  position: relative;

                  @{optionName}: 300px;

                  ..........................

                  .inner{

                      ..........................

                      background-color: @color;

                      ...........................

                  }

              }

                (4).变量的延迟加载

        @color:deeppink;

        @idname:#box;

        @optionName:width;

        @var:1;

       

        @{idname}{

            ...........................

            .inner{

                ...........................

                background-color: @color;

                @var:0.5;

                opacity: @var; // opacity: 0.3;

                @var:0.3;

            }

            opacity: @var; // opacity: 1;

        }

         4.less的嵌套规则

                (1).基本嵌套规则

                        LESS 嵌套遵循 “父级选择器包含子级选择器” 的逻辑，对应 HTML 中的父子元素关系。

                (2).&的使用

                        用 & 避免生成后代选择器。

@color:deeppink;

@idname:#box;

@optionName:width;

@var:1;

@{idname}{

    position: relative;

    @{optionName}: 300px;

    height: 400px;

    border: 1px solid #000;

    margin: auto;

    .inner{

       ..........................

        background-color: @color;

        ..........................

        &:hover{        // 生成#box .inner:hover,不使用&则生成#box .inner :hover

            background-color: pink;

        }

    }

         5.避免编译

#box{

    width: ~"calc(100px + 100px)"; //提示less这里不用编译，让原生css计算

    // height: 100px + 100px; //less编译过后为200px

    height: 100px + 100em; //less编译过后为200px,less运行出的单位是less遇到的第一个单位，是纯数值运算，不考虑单位转换

    background: red;

}

@color:deeppink;
@idname:#box;
@optionName:width;
@var:1;
*{
	margin: 0;
	padding: 0;
}
@{idname}{
	position: relative;
	@{optionName}: 300px;
	height: 400px;
	border: 1px solid #000;
	margin: auto;
	background-color: skyblue;
	.inner{
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: @color;
		margin: auto;
		@var:0.5;
		opacity: @var;
		@var:0.3;
		
		&:hover{
			background-color: pink;
		}
	}
	opacity: @var;
}