什么是Mixin

Less中,允许你将一个类嵌入到另一个类中,被嵌入的类也可以看作变量。换句话说,你可以用一个类定义样式,然后把它当作变量,在另一个类中,只要引用变量的名字,就能使用它的所有属性,

Less把这种特性称作 mixin,中文把翻译为“混入”或“混合”,其目的就是从现有的样式中添加属性。请看以下Less代码:

  1. .bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }

上述代码中,.bordered 定义了一个属性集。然后,在任何需要使用 .bordered 属性集的选择器中,只需像下面这样调用就可以了:

  1. #menu a {
  2.   color: #111;
  3.   .bordered;
  4. }
  5. .post  a {
  6.   color: red;
  7.   .bordered;
  8. }

这样一来,.bordered中定义的属性集,就会在 #menu a 和 .post a 中体现出来。编译后的CSS代码为:

  1. .bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }
  5. #menu a {
  6.   color: #111;
  7.   border-top: dotted 1px black;
  8.   border-bottom: solid 2px black;
  9. }
  10. .post  a {
  11.   color: red;
  12.   border-top: dotted 1px black;
  13.   border-bottom: solid 2px black;
  14. }

从上面的代码可以看出:mixin 其实就是一种嵌套,简单的讲,mixin 就是规则级别的复用。除了类选择器外,你也可以使用 id 选择器来定义 mixin。如:

  1. #bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }
  5. #menu a {
  6.   color: #111;
  7.   #bordered;
  8. }

编译后的CSS代码为:

  1. #bordered {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }
  5. #menu a {
  6.   color: #111;
  7.   border-top: dotted 1px black;
  8.   border-bottom: solid 2px black;
  9. }

从上面的代码可以看出,使用 class、id 定义mixin 时,mixin的定义会被原封不动的输出到编译生成的CSS代码中。

如果希望编译生成的CSS代码中不包含mixin的定义,在定义 mixin时,只需在 class、id 的后面添加一对小括号即可。而在调用时,小括号是可选的。如:

  1. #x() {
  2.   border-top: dotted 1px black;
  3.   border-bottom: solid 2px black;
  4. }
  5. #menu a {
  6.   color: #111;
  7.   #x;
  8. }

编译后的CSS代码为:

  1. #menu a {
  2.   color: #111;
  3.   border-top: dotted 1px black;
  4.   border-bottom: solid 2px black;
  5. }

Less的Mixin的更多相关文章

  1. vue.mixin与vue.extend

    vue.mixin 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例.谨慎使用全局混合对象,因为会影响到每个单独创建的 Vue 实例(包括第三方模板).大多数情况下,只应当应用于自定义选项, ...

  2. 用mixin引入模块后, 方法重名的解析方法

    关于mixin, 经常被问到一个问题是, 方法查找是如何处理的? 特别地, 如果类, 父类, 以及类所包含的mixin中, 都定义有相同名字的方法时, 会发生什么? 答案是, ruby首先会从对象的直 ...

  3. 组件嵌套+Mixin函数demo

    非DOM属性:1.dangerouslysetInnerHTML(xxs跨站攻击) 2.key 3.ref 编写组件嵌套 <!DOCTYPE html><html>  < ...

  4. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  5. sass揭秘之@mixin,%,@function

    因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你 ...

  6. 你的 mixin 兼容 ECMAScript 5 吗

    原文:Are your mixins ECMAScript 5 compatible? 作者:Nicholas C. Zakas 我最近在与客户合作的项目中,需要充分利用的 ECMAScript 5, ...

  7. Design Pattern: Not Just Mixin Pattern

    Brief 从Mix-In模式到Mixin模式,中文常用翻译为“混入/织入模式”.单纯从名字上看不到多少端倪,而通过采用Mixin模式的jQuery.extend我们是否可以认为Mixin模式就是深拷 ...

  8. mixin设计模式

    mixin可以轻松被一个子类或者一组子类继承,目的是函数复用.在js中,我们可以将继承MiXin看作为一种通过扩展收集功能的方式. e.mixin = function(t) { for (var i ...

  9. Ruby学习之mixin

    直接上代码: module Action def jump @distance = rand(4) + 2 puts "I jumped forward #{@distance} feet! ...

  10. 我的常用mixin 之 lines

    /** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...

随机推荐

  1. Nexus配置

    1.可以为maven项目单独配置nexus路径 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  2. 解决Cannot find or open the PDB file问题

    今天使用opencv里的mat想要保存数据里边的像素的平均值和标准差: 但是编程好了之后会出现下面的问题,不能找到pdb file .下面将提供三种解决方法以及产生问题的原因. 程序也运行不出来,整个 ...

  3. *EditPlus注册码在线生成

    http://www.jb51.net/tools/editplus/

  4. Transport layer and Network layer

    http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...

  5. PhpStorm (强大的PHP开发环境)2017.2.4 附注册方法

    http://www.oyksoft.com/soft/40722.html?pc=1 最新版PhpStorm 2017正式版改进了PHP 7支持,改进代码完成功能. PhpStorm 是最好的PHP ...

  6. input框中修改placeholder的样式

    有时间input标签的placeholder属性会出现问题,下面是修改placeholder的样式demo input::-webkit-input-placeholder{ color:red; f ...

  7. 微信小程序开发(2) 计算器

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...

  8. H5地理位置定位

    一:介绍使用的知识点 1.地理定位的原理 2.geolocation对象 3.Geolocation Api 4.getCurrentPosition的第一个参数 5.getCurrentPositi ...

  9. 编译Boost库

    VS版本: 虽然网络上有,但是还是记录下,找到VS的command prompt,然后切换到boost的根目录: 1.运行 bootstrap.bat 它在当前目录下会生成b2.exe2. 2.运行b ...

  10. scrapy爬虫,爬取图片

    一.scrapy的安装: 本文基于Anacoda3, Anacoda2和3如何同时安装? 将Anacoda3安装在C:\ProgramData\Anaconda2\envs文件夹中即可. 如何用con ...