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 ...
随机推荐
- maxscript批量设置摄像机并保存渲染图
代码可直接运行 fn renderr = ( a=box() --新建一个立方体 ambientcolor = (color ) --设置环境光(搞不太懂,白的不出错就行) to do ( dis = ...
- SQL数据库正在恢复 查看进度
在使用SQL的过程中.. 开启一个事务..进行大计算量..在中间出错或者强制杀死SQL服务进程..总之事务没有提交.. 再次开启时sql会进入自动检查的过程.. 数据库小的话问题不大..会比较快.. ...
- (转)linux基本变量学习:位置变量$0 、$1 shift轮替、本地变量、环境变量、特殊变量
原文:http://blog.51cto.com/woyaoxuelinux/1863045 shell: 弱类型编程语言 强:变量在使用前,必须事先声明,甚至还需要初始化: 弱:变量用时声明,甚至不 ...
- 【linux】虚拟机内装Linux系统的ssh访问
一般在虚拟机内安装一个Linux系统,虚拟机网络设置为桥接后,Linux系统会在安装的过程中自动设置其为dhcp配置,会给其随机分配一个ip,这个ip可以用命令 "ifconfig" ...
- 【debian】给用户添加sudo权限
新装的debian系统默认是没有sudo功能的. 于是,在root用户权限下: apt-get install sudo 然后再修改文件 /etc/sudoers : chmod +w /etc/su ...
- p2p的UDP打洞原理
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- GIT 恢复单个文件到历史版本
首先查看该文件的历史版本信息:git log <file> 恢复该文件到某个历史版本:git reset 版本号 <file> 检出改文件到工作区:git checkout - ...
- linux diff(differential) 命令
功能说明:比较文件的差异. 语法:diff [OPTION]... FILES 实例: diff -ur temp1 temp2 diff -ur temp1 temp2 > temp.diff ...
- Java Collection.Map
/** * Map集合的特点: * 将键映射到值的对象,一个映射不能包含重复的键,每个键最多只能映射到一个值. * * Map集合的功能和概述: * 1.添加功能 * V put(K key , V ...
- VMware workstation 虚拟机安装Windows Server 2008 r2
问题秒速: VMware workstation 虚拟机安装Windows Server 2008 r2,配置好参数后,选择开机,报错,错误如图: