LESS 混合
LESS 混合
混合与编程语言中的函数很相似。混合是一组CSS属性,允许您对另一个类使用一个类的属性,并包括类名作为其属性。在LESS中,您可以使用类或id选择器与CSS样式相同的方式声明混合。它可以存储多个值,并可以在必要时在代码中重复使用。
下面介绍了混合的细节:
无混合输出:混合后面加括号就可以在输出的时候不显示。
混合中的选择器:混合不仅可以包含属性，它们也可以包含选择器。
命名空间:命名空间是用来分组通用名称的混合类型。
保护命名空间:当保护被施加到命名空间，只有当保护条件返回true，它定义混合类型使用。
!important关键字:!important 关键字是用来覆盖指定的属性。
例子
<html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>LESS Mixins</title> </head> <body> <h1>Welcome to Tutorialspoint</h1> <p class = "p1">LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p> <p class = "p3">LESS is cross browser friendly.</p> </body> </html>
创建style.less文件.
/*style.less*/
.p1 {
color:red;
}
.p2 {
background : #64d9c0;
.p1();
}
.p3 {
background : #LESS520;
.p1;
}使用下面命令编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #LESS520;
color: red;
}输出
执行以下步骤：
保存上面的html代码到extend_syntax.html文件。
在浏览器中打开该HTML文件，输出如下得到显示。
