CSS动态样式语言less语法混合属性怎么用


这篇文章主要介绍CSS动态样式语言less语法混合属性怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!混合:
在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:复制代码代码如下:
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}编译后复制代码代码如下:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:复制代码代码如下:
.a, #b {
color: red;
}
.mixin-class {
.a;
}
.mixin-id {
#b;
}如果你只想定义一个混合,则可以再选择器后面加上括号,如下:复制代码代码如下:
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}编译后,加括号的.my-other-mixin()不会被编译。复制代码代码如下:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。命名空间:
如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:复制代码代码如下:
#outer {
.inner {
color: red;
}
}如果想使用这个混合属性,你可以这样,下面四个都是等价的复制代码代码如下:
.c{
#outer > .inner;
}.c{
#outer > .inner();
}.c{
#outer.inner;
}.c{
#outer.inner();
}你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。关键字!important:
在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:复制代码代码如下:
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo(1);
}
.important {
.foo(2) !important;
}编译后复制代码代码如下:
.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}带参数的混合:
混合属性也可以通过括号传递参数,如下:复制代码代码如下:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}我们只需要在使用它的时候传递一个参数即可,如下:复制代码代码如下:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:复制代码代码如下:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}如果我们没有传值,则会使用默认值5px。当然我们也可以传递多个参数,如下:复制代码代码如下:
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}编译后复制代码代码如下:
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。我们不仅可以传多个值,还可以指定属性名传值,如下:复制代码代码如下:
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}关键字@arguments:
@arguments有特殊的含义,类似于js的arguments,他包含了传递给混合属性的所有参数,如下:复制代码代码如下:
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}编译后复制代码代码如下:
.big-block {
-webkit-box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
}关键字@reset:
与@arguments不同的是@reset包含除指明参数之外的参数,例如:复制代码代码如下:
.mixin(@a; @rest…) {
// @rest包含了@a之后的参数
// @arguments包含了所有参数
}模式匹配:
有时候你想让混合根据你传入的参数做不同的事情,比如:复制代码代码如下:
.mixin(dark; @color) {
color: darken(@color, 10%);
}免费云主机域名
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
.class {
.mixin(@switch; #888);
}对于.class你赋给变量@switch不同的值,不同的混合属性会被调用,比如@switch: light;编译后复制代码代码如下:
.class {
color: #a2a2a2;
display: block;
}作为函数使用Mixin:
当我们把混合当做函数使用时,在调用函数之后,函数中的变量是可以使用的,除非调用混合属性的元素自己定义了同样的变量。比如:复制代码代码如下:
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}编译后复制代码代码如下:
.caller {
width: 100%;
height: 200px;
}使用表达式:复制代码代码如下:
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // “call” the mixin
padding: @average; // use its “return” value
}编译后复制代码代码如下:
div {
padding: 33px;
}LESS VS SASS

同类框架还有 SASS :http://sass-lang.com/, 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。以上是“CSS动态样式语言less语法混合属性怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注百云主机行业资讯频道!

相关推荐: 实体门店小程序开发有什么优势呢

这篇文章主要介绍了实体门店小程序开发有什么优势呢,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1。低成本开发从每个软件开发市场的角度来看,开发一组小型商店该程序的成本比开发应用程序的成本低得多。…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 09/24 09:11
下一篇 09/24 09:11

相关推荐