less的嵌套规则对于有效组织你的css代码有较好的作用。其中使用mixin或者class都可以作为被嵌套的实体,但是二者还是有区别的:

  • mixin必须由.name+(){}的pattern来定义,而class则只需.name{}来定义(注意:class依然可以通过.name直接在less源文件中引入该class的所有rule)
  • mixin本身并不会在最终编译输出的css文件中以类出现,而class最终会以.name{}输出该class
.class-1{
property-1: a;
}
.class-2{
.class-1;
property-2: b;
}

上面的less代码最终将输出以下的css代码:

.class-1 {
property-1: a;
}
.class-2 {
property-1: a;
property-2: b;
}

再来看看下面的less代码:

.class-1-mixin(){
property-1: a;
}
.class-2{
.class-1-mixin();
property-2: b;
}

上面这段代码由于.class-1-mixin只是一个mixin,被调用编译后并不输出.class-1-mixin这个class!!!

.class-2 {
property-1: a;
property-2: b;
}

LESS嵌套中的Mixins和classes的更多相关文章

  1. 在小程序中实现 Mixins 方案

    摘要: 小程序开发技巧 作者:jrainlau 原文:在小程序中实现 Mixins 方案 Fundebug经授权转载,版权归原作者所有. 在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的 ...

  2. Dart中的mixins

    /* mixins的中文意思是混入,就是在类中混入其他功能. 在Dart中可以使用mixins实现类似多继承的功能,with关键字 因为mixins使用的条件,随着Dart版本一直在变,这里讲的是Da ...

  3. Java 从多层嵌套中访问内部类的成员

    一个内部类被嵌套多少层并不重要--它能透明地访问所有它能嵌入的外围类的所有成员 //: innerclasses/MultiNestingAccess.java // Nested classes c ...

  4. Selenium定位多个iframe嵌套中的元素

    在公司boss系统中,经常会遇到多层iframe嵌套的情况,导致无法定位最里面那层iframe的元素. 其实很简单,只要一层层定位iframe,定位到你想要的那层iframe即可: 如果操作完需要返回 ...

  5. vue中使用mixins

    Mixins (混合或混入)——定义的是一个对象 1.概念:一种分发Vue组件可复用功能的非常灵活的方式.混入对象可以包含任意组件选项(组件选项:data.watch.computed.methods ...

  6. ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签

    今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...

  7. WPF中Expander与ListBox(ItemsControl)嵌套中的问题

    1. 当ListBox放在Expander中时,为了要实现实时更新数据的效果,这里使用了 ObservableCollection类型来作为数据源, 初始的简单例子如下:只有一个ListBox xam ...

  8. 在css嵌套中的html的table里的字左右不对齐

    [现象]AAAA与天数的数字左右不居中 <table border=1 align="center"> <tr> <td width="20 ...

  9. Java中的Nested Classes和Inner Classes

    Java中的Nested Classes和Inner Classes Java有嵌套类(Nested Classes)和内部类(Inner Classes)的概念. 嵌套类(Nested Classe ...

随机推荐

  1. python 中mysql数据库的读写

    1.读取数据库 import pymysql id=[] name=[] explain=[] db=pymysql.Connection(host=,user="root", p ...

  2. 如何应用前端技术唤起app及判断用户来源及与原生交互的原理

    做唤起时需要native端进行配合, h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用. 目前我们采用的唤起方式是url scheme(iOS,Android平台都 ...

  3. CoreJava基础之构造器

    类的基本语法: 修饰词 class 类名{ 修饰词 类型 属性名: } 实例:public class Book{ int id; String name; String[] authors ={&q ...

  4. 【linux】虚拟机内装Linux系统的ssh访问

    一般在虚拟机内安装一个Linux系统,虚拟机网络设置为桥接后,Linux系统会在安装的过程中自动设置其为dhcp配置,会给其随机分配一个ip,这个ip可以用命令 "ifconfig" ...

  5. npm 配置

    设置代理 $ npm config set proxy http://server:port $ npm config set https-proxy https://server:port 如果代理 ...

  6. 在浏览器中输入URL并回车后都发生了什么?

    1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...

  7. Java - 网络IO的阻塞

    最近学习时碰到事件驱动和非阻塞的相关知识,随之想到了Java中的Reactor.io与nio的一些东西:在前辈的博客上翻了翻.复习复习,在此记录一番. 实在找不到比较大点的东西,于是随便弄了个压缩包, ...

  8. 《MySQL 基础课程》笔记整理(进阶篇)(未完)

    一.MySQL服务安装及命令使用 安装过程就不写了,毕竟百度经验一大把 MySQL 官方文档 MySQL 参考手册中文版 1.MySQL简介 ​ RDBMS(Relational Database M ...

  9. spring-boot-starter-data-elasticsearch实现es的增删查改

    首先,必须吐槽一下,springboot这个elasticsearch包对于elasticsearch的支持十分不友好,目前只支持很低版本的elasticsearch,如果有哪位大牛知道如何兼容更高版 ...

  10. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...