创新互联less教程：Less混合

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。

创新互联一直通过网站建设和网站营销帮助企业获得更多客户资源。以"深度挖掘，量身打造，注重实效"的一站式服务，以成都网站建设、做网站、移动互联产品、全网营销推广服务为核心业务。10余年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。

下表详细说明了LESS mixin的使用。

S.N.	混合使用及描述
1	不输出mixin 混合可以通过简单地将括号放在输出中消失。
2	Mixins中的选择器 mixin不仅可以包含属性，还可以包含选择器。
3	命名空间命名空间用于在通用名称下对mixin进行分组。
4	保护的命名空间当保护应用于命名空间时，它定义的mixins只有在保护条件返回真时才使用。
5	！important关键字！important 关键字用于覆盖特定属性。

例子

以下示例演示如何在LESS文件中使用 mixins :



  
  LESS Mixins


Welcome to Tutorialspoint
LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.
LESS is a dynamic style sheet language that extends the capability of CSS. 
LESS is cross browser friendly.

接下来，创建文件 style.less 。

style.less

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

您可以使用以下命令将 style.less 编译为 style.css :

lessc style.less style.css

接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件:

style.css

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}

输出

让我们执行以下步骤，看看上面的代码如何工作:

将以上html代码保存在 less_mixins.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

调用mixins时，括号是可选的。在上面的例子中，语句 .p1(); 和 .p1; 都做同样的事情。

文章名称：创新互联less教程：Less混合
网站路径：http://www.csdahua.cn/qtweb/news36/502886.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容