less混合

html-css011

less混合,第1张

混合就是一种或者一系列属性从一种规则集引入(混合)到另一种规则集的方法

1. 普通混合

一个普通的css样式

我们发现 h1,h2的样式中有很多重复的,而解决方式如下,将重复的放在一个类中:

定义一个.font_h类,在HTML文件对应的元素山添加class="font_h"属性

less可以不这么写,less写法如下:

将定义好的类混入css样式中,这样就不用在HTML的元素中写类了

编译后的css,和下面不带输出的混合做对比

2. 不带输出的混合

编译后的css文件,从中发现.font_h不见了

3. 带选择器的混合

编译之后的css文件

其中, .my-hover-mixin():hover == &:hover

4. 带参数的混合

编译后的css文件

5. 带参数并且有默认值

编译后的css文件

调用后如果 .border_have()不带参数,就用默认的参数;如果传递了参数,就用传入的参数。而上边带参数但没有默认值时,如果调用时不传入参数就会报错。

6. 带多个参数的混合

编译后的css文件

less文件(定义具有多个相同名称和参数数量的混合)

编译后的css文件

less文件

编译后的css文件

如果使用mixin的时候只带一个参数,比如.mixin(red),这个属性会导致所有的mixin都会强制使用这个明确的参数

7. 命名参数

编译后的css文件

8. @arguments变量

编译后的css文件

less文件

编译后的css文件

这里的solid是默认值,但也必须写上,否则会报错。

9. 匹配模式

编译后的css文件

注意:中间用逗号分割开

10. 得到混合中变量的返回值

编译后的css文件

在浏览器中使用less.js开发是很好的,但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中,尤其是对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。

注意:

确保包涵.less样式表在less.js脚本之前

当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

必须通过服务器环境访问页面,否则报错

浏览器选项:

你可以引入<script

src="less.js"></script>之前通过创建一个全局less对象的方式来指定参数!