Less的简单操作

两种注释： /*  */    ，  / / 

        /* */注释，但是会映射到对应的css文件中 。  //这种注释则不会映射到对应的CSS文件中

文件导入：

        导入css，会直接在css文件中添加导入语句。如：@import“04.css”；

        导入Less，则会将Less文件中的内容编译后再导入css文件中。如：@import“05.less”；

--------------------------------------------变量------------------------------------------

变量的定义：

        @变量名称：变量的值。如：@LIghtColor:red;  @LayoutWidht:1200px;

        在字符串中使用：@{变量名称}。如：@imgPath:"./img";

less定义字符串

变量的使用：

        @变量的名称。如：li{ color:@LIghtColor; border-color:@LIghtColor} 然后在对应css里面就会直接出现red

-------------------------------------------代码混入----------------------------------------------

样式可以引用。如： .clearMagin{margin:0px; padding:0px}  

                                    ul{ .clearMagin }

同时样式可以定义参数。如：.clearMagin（@num）{margin:@num;  padding:@num} 

                                                ul{ .clearMagin( 10px ) }

同时不止可以定义参数还可以设置默认值参数。如.clearMagin（@num：5px）{margin:@num;  padding:@num} 

                                                                                 ul{ .clearMagin }

同时参数可以设置多个参数，中间用逗号隔开，注意使用时一一对应。

----------------------------------------------选择器嵌套-------------------------------------------

样式编写层级可以对应html代码：

如：

html的代码样式

less中的样式代码写法

在less中编写样式清晰明了，并且伪类这类都很好用。

-------------------------------------------------继承-----------------------------------------------

样式的继承通过extend伪类来实现。混合可以将一个定义好的class A引入到另一个class B中，从而实现class B继承class A的所有属性。

   如：                                    

继承样式

----------------------------------------------------运算------------------------------------------------

任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中；以（)进行优先级运算+，-，*，/，()

less代码

编译后：

显示在css的代码