2.Less学习笔记第二篇

1.less里面的注释

less里面的注释分为两种,看下图所示:

编译之后的效果图:

我们可以发现在编译之后的css 文件里面只有一个注释,也就是说//注释不会被编译到CSS文件中去.其实我们以后维护的是less文件,CSS文件里面有没有注释其实也无关紧要了..

2.变量

less里面也是有变量滴.声明变量要用"@"

而且当你的less 语法有问题的时候,她会进行报错的.非常的好!见下图所示:

a=12;这样写是错的

错误信息

这样就很直观的告诉我们,程序那里有问题.

在less的变量是这样写的

@div_width:300px;

看下面的一个例子:

这里我们写了一个less 文件.写了一个变量,我们可以很方便的将这些变量保存的样式赋值给任意的一个元素的属性.

less文件:

less代码

编译之后的css 文件:

编译之后的CSS代码

非常的爽,而且还是同步的!

3.混合

混合的意思其实就是样式的复用,假如多个元素的样式是一样的,或者是有大部分的相同,小部分的不同,我们可以直接定义好的样式放置另一个元素中,这样她也具有了当前的一个属性,这就是less中的混合.

看下面的一个代码所示:

1.混合不带参数

less混合代码

生成的CSS代码就是下面的这个样子:

css代码

2.混合带参数

混合带参数

编译之后生成的代码:

编译之后的CSS代码

3.混合带默认值

如果没有默认值,那么必须要给一个值.如果有默认值,可以为空.

混合的作用其实就是样式的复用,当几个元素的样式差不多的时候就可以用混合来实现快速的复用.混合还是很爽的.混合很像是一个预先定义好的函数,当默某些元素的某些属性要改变的时候就在混合中设置为一个形式参数,然后在样式复用的时候传递参数过去就可以了.

//测试