Less 混合（mixin）

Less的混合：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

.border {border: 1px solid red;
}.box {width: 200px;height: 200px;.border;
}

编译成css后：

.border {border: 1px solid red;
}.box {width: 200px;height: 200px;border: 1px solid red;
}

有时候我们需要加一个宽度和高度,但宽度和高度有的是100px的有的是300px的这时候就可以加参数

.border(@width, @height) {width: @width;height: @height;
}.box {.border(100px, 100px);
}.main {.border(300px, 300px);border: 1px solid red;
}

编译成css

.box {width: 100px;height: 100px;
}

.main {width: 300px;height: 300px;border: 1px solid red;
}

还可以使用默认值：

.border(@width: 100px, @height: 100px) {width: @width;height: @height;
}.box {.border;
}.main {.border(300px, 300px);border: 1px solid red;
}

编译成css

.box {width: 100px;height: 100px;
}.main {width: 300px;height: 300px;border: 1px solid red;
}

转载于:https://www.cnblogs.com/qjuly/p/9136096.html

Less 混合（mixin）相关推荐

混合mixin函数_Less 混合
本节我们学习 Less 中的混合(Mixin),混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法.简单一点来说,其实混合就有点类似编程语言中的函数,通过这种方式,可以在代码中实现复用.如 ...
基于指令和混合的前端通用埋点方案
https://zhuanlan.zhihu.com/p/27659302 摘要本文介绍了一种通用的前端埋点方案的设计和实现,具有适配项目广泛,易于使用,与业务逻辑解耦等优点,已经在外卖商业平台进行 ...
vue混合html,VueJS混合
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. 示例 VueJs混合(M ...
Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
Less 常用基础知识
LESS 中的注释也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的. 也可以使用// 注释不会被编译的变量声明变量的话一定要用@开头例如:@变量名称:值: @test_w ...
html5在哪编译,HTML5_提供的新功能_less 编译_
HTML5_提供的新功能 class 操作 ele.classList(注意: 高版本的 IE 都不支持) 获取 ele.classList.add("current"); el ...
css预编译其器,CSS预处理器之——Less
Less,顾名思义,少,在我看来,它有着与jQuery一样的思想--Write Less,Do More,尽管实际上这两者是完全不同的两个东西. Less是一个CSS预处理器,先不管人们为何这样命名, ...
php如何拼接变量名,php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符...
php动态拼接变量名,可变变量,动态变量,使用花括号,使用两个$符方式一:使用花括号,前缀部分不需要用单引号 $nums10 = 100; $xxx*${bcount.$nums10}['m54'] ...
html5嵌套css语言,HTML5和CSS3
html5上新增加了语义化标签(结构标签),表单属性,表单种类,全局属性. css3增加了transition过渡属性,transfrom变形属性,animation帧动画标签语义化:用合理的标签做 ...
python网络编程-socket编程
一.服务端和客户端 BS架构 (腾讯通软件:server+client) CS架构 (web网站) C/S架构与socket的关系: 我们学习socket就是为了完成C/S架构的开发二.OSI七层模 ...

Less 混合（mixin）

Less 混合（mixin）相关推荐

最新文章

热门文章