LESS嵌套中的Mixins和classes
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的更多相关文章
- 在小程序中实现 Mixins 方案
摘要: 小程序开发技巧 作者:jrainlau 原文:在小程序中实现 Mixins 方案 Fundebug经授权转载,版权归原作者所有. 在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的 ...
- Dart中的mixins
/* mixins的中文意思是混入,就是在类中混入其他功能. 在Dart中可以使用mixins实现类似多继承的功能,with关键字 因为mixins使用的条件,随着Dart版本一直在变,这里讲的是Da ...
- Java 从多层嵌套中访问内部类的成员
一个内部类被嵌套多少层并不重要--它能透明地访问所有它能嵌入的外围类的所有成员 //: innerclasses/MultiNestingAccess.java // Nested classes c ...
- Selenium定位多个iframe嵌套中的元素
在公司boss系统中,经常会遇到多层iframe嵌套的情况,导致无法定位最里面那层iframe的元素. 其实很简单,只要一层层定位iframe,定位到你想要的那层iframe即可: 如果操作完需要返回 ...
- vue中使用mixins
Mixins (混合或混入)——定义的是一个对象 1.概念:一种分发Vue组件可复用功能的非常灵活的方式.混入对象可以包含任意组件选项(组件选项:data.watch.computed.methods ...
- ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签
今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <voli ...
- WPF中Expander与ListBox(ItemsControl)嵌套中的问题
1. 当ListBox放在Expander中时,为了要实现实时更新数据的效果,这里使用了 ObservableCollection类型来作为数据源, 初始的简单例子如下:只有一个ListBox xam ...
- 在css嵌套中的html的table里的字左右不对齐
[现象]AAAA与天数的数字左右不居中 <table border=1 align="center"> <tr> <td width="20 ...
- Java中的Nested Classes和Inner Classes
Java中的Nested Classes和Inner Classes Java有嵌套类(Nested Classes)和内部类(Inner Classes)的概念. 嵌套类(Nested Classe ...
随机推荐
- js复习知识点
null和undefined具体在什么时候使用? 如果定义的变量准备用来保存对象,那么最好用将改变量初始化为null而不是其他值 如果未定义的值可以用空字符 undefined是null派生出来的,所 ...
- Kong在windows10的hyperV CentOS上安装
1.启用hyperV manager 2.下载CentOS 3.给CentOS共享网络,添加Legacy NetWork Adapter 4.启动CentOS后安装kong(官网可查) 5.安装Pos ...
- 溶解shader
玩神界原罪2,感觉人物被建筑遮挡时,建筑的“溶解”效果很有意思,想实现一下.然后发现连溶解都没实现过,emmmmm....先来把溶解实现了~ 原理就是根据一张噪声图的值是否大于某个阈值,来判断是否丢弃 ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- UML 依赖\泛化\关联\实现\聚合\组合的 Java实现
在类图中,类与类之间的关系主要有一下几种: 泛化关系:(就是继承) public class Employee { } public class SaleEmployee extends Employ ...
- Linux中常用头文件的作用--转
http://blog.sina.com.cn/s/blog_5c93b2ab0100q62k.html 1. Linux中一些头文件的作用: <assert.h>:ANSI C.提供断言 ...
- NPM 与前端包管理
我们很清楚,前端资源及其依赖管理一直是 npm 的重度使用场景,同时这也一直是 Node.js 普及的重要推动力.但这类应用场景到底有多重度?这是一个很难回答的问题.这份 “npm 最常下载的包的清单 ...
- java 并发(三)---Thread 线程
Thread 的状态 线程共有五种状态.分别是: (1)新建 (2)就绪 (3)运行 (4)阻塞 (5)死亡 ,下面列列举的状态需要结合状态示意图更好理解. 新建状态(New): 新创建了一个线程对 ...
- Java生成验证码(一)
一.为什么要使用验证码 我们要通过验证码,由用户肉眼识别其中的验证码信息,从而区分用户是人还是计算机. 二.什么是验证码 验证码:是一种区分用户是计算机还是人的公共全自动程序. ...
- 实例化geoserver wms服务
var vectorWmsJHdataLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ //地址 url:'http://loca ...