Less学习-语法详解

一、Less是什么

-less(less is more, than css) - 少即是多，比css

-less类似于js的jQuery，less css的一种动态语言，属于css预处理语言的一种，它使用类似css的语法，为css的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护。

-less css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

二、编译工具

-首推：Koala编译国人开发的（less/sass编译工具）

-Node.js库

-浏览器端使用

三、Less语法

1、注释

-可以使用css中的注释（/**/）             //使用css里面的注释，注释也会出现在相应的css文件里

-也可以用//注释                                       //编译时会自动过滤掉，不会出现在css文件里

2、变量

-less中变量用@符号定义

@test_width:300px;

.box{width:@test_width;}

3、混合

-可以直接把定义的类直接写在其他类的样式里面，实现样式重用

.border{border:solid 1px red;}

.box{width:@test_width; .border;}   //box就有了border的样式了

-混合是可以带参数的

.border_02(@border_width){border:solid yellow @border_width;}

-混合带参数是可以使用默认值的

border_03(@border_width:10px){border:solid gree @border_width;}

4、匹配模式

-相当于js的if

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color:red transparent transparent transparent;border-style:dashed dashed solid dashed}  //css写三角

.triangle(top,@w:5px;@c:#ccc){border-width:@w;border-color:red transparent @c transparent;border-style:dashed dashed solid dashed}

.triangle(bottom,@w:5px;@c:#ccc){border-width:@w;border-color:red transparent @c transparent;border-style:solid dashed dashed dashed}

.triangle(left,@w:5px;@c:#ccc){border-width:@w;border-color:red transparent @c transparent;border-style:dashed solid dashed dashed}

.triangle(right,@w:5px;@c:#ccc){border-width:@w;border-color:red transparent @c transparent;border-style:dashed dashed dashed solid}

.sanjiao(.triangle(bottom,100px);           //可以根据bottom匹配对应的类的样式

-@_ 表示通用的或者说是默认的

.triangle(@_,@w：5px,@c:#ccc){width:0;height:0;over:hidden;}

5、运算

-任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中。

.box_04{width:(@test_width-20)*5}

6、嵌套规则

-最优意思的小东西

-两种用法

-&对尾类使用(hover或focus)   &代表上一层的选择器

-对连接的使用(&-item)

.list{}  .list p{} list span{} //css写法

list{width:600px; li{line-height:30px; span{color:red;}} a{float:left; &:hover{color:green;}}}

7、@arguments变量

-@arguments包含了所有传递进来的参数。

-如果你不想单独处理每一个参数的话就可以像这样写：

.border_arg(@w:30px;@c:red;@x:solid){border:@arguments;}

.border{.border_arg(50px);}  //直接会将@w:30px;改成@w:50px;

8、避免编译、!important

-有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们可以在字符前加一个~

例如：width:~' calc(100% - 35)'

-！important关键字。会为所有混合所带来的样式，添加上!important，在css中表示让某个样式的层级或者说优先级最高

test_important{.border_radius() !important}  //会将.border_radius下所有的样式后面全部加上 !important