html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

动态的样式语言less语法详解之混合属性_CSS365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户_CSS_网页制作

[ ] 已经帮助:人解决问题
这篇文章主要介绍了动态的样式语言less语法详解之混合属性,需要的朋友可以参考下

前面介绍了less的变量和extend语法,今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征,你可以将通用属性定义在一块,然后使用时直接调用此混合属性。J2FHTML5中文学习网 - HTML5先行者学习网

混合:J2FHTML5中文学习网 - HTML5先行者学习网
  在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.a, #b {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-class {J2FHTML5中文学习网 - HTML5先行者学习网
.a();J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-id {J2FHTML5中文学习网 - HTML5先行者学习网
#b();J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.a, #b {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-class {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-id {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.a, #b {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-class {J2FHTML5中文学习网 - HTML5先行者学习网
.a;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin-id {J2FHTML5中文学习网 - HTML5先行者学习网
#b;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

如果你只想定义一个混合,则可以再选择器后面加上括号,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.my-mixin {J2FHTML5中文学习网 - HTML5先行者学习网
color: black;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.my-other-mixin() {J2FHTML5中文学习网 - HTML5先行者学习网
background: white;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.class {J2FHTML5中文学习网 - HTML5先行者学习网
.my-mixin;J2FHTML5中文学习网 - HTML5先行者学习网
.my-other-mixin;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后,加括号的.my-other-mixin()不会被编译。J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.my-mixin {J2FHTML5中文学习网 - HTML5先行者学习网
color: black;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.class {J2FHTML5中文学习网 - HTML5先行者学习网
color: black;J2FHTML5中文学习网 - HTML5先行者学习网
background: white;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。J2FHTML5中文学习网 - HTML5先行者学习网

命名空间:J2FHTML5中文学习网 - HTML5先行者学习网
  如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
#outer {J2FHTML5中文学习网 - HTML5先行者学习网
.inner {J2FHTML5中文学习网 - HTML5先行者学习网
color: red;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

如果想使用这个混合属性,你可以这样,下面四个都是等价的J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.c{J2FHTML5中文学习网 - HTML5先行者学习网
#outer > .inner;J2FHTML5中文学习网 - HTML5先行者学习网
}

.c{J2FHTML5中文学习网 - HTML5先行者学习网
#outer > .inner();J2FHTML5中文学习网 - HTML5先行者学习网
}

.c{J2FHTML5中文学习网 - HTML5先行者学习网
#outer.inner;J2FHTML5中文学习网 - HTML5先行者学习网
}

.c{J2FHTML5中文学习网 - HTML5先行者学习网
#outer.inner();J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网

J2FHTML5中文学习网 - HTML5先行者学习网

你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。J2FHTML5中文学习网 - HTML5先行者学习网

关键字!important:J2FHTML5中文学习网 - HTML5先行者学习网
  在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.foo (@bg: #f5f5f5, @color: #900) {J2FHTML5中文学习网 - HTML5先行者学习网
background: @bg;J2FHTML5中文学习网 - HTML5先行者学习网
color: @color;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.unimportant {J2FHTML5中文学习网 - HTML5先行者学习网
.foo(1);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.important {J2FHTML5中文学习网 - HTML5先行者学习网
.foo(2) !important;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.unimportant {J2FHTML5中文学习网 - HTML5先行者学习网
background: #f5f5f5;J2FHTML5中文学习网 - HTML5先行者学习网
color: #900;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.important {J2FHTML5中文学习网 - HTML5先行者学习网
background: #f5f5f5 !important;J2FHTML5中文学习网 - HTML5先行者学习网
color: #900 !important;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

带参数的混合:J2FHTML5中文学习网 - HTML5先行者学习网
  混合属性也可以通过括号传递参数,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.border-radius(@radius) {J2FHTML5中文学习网 - HTML5先行者学习网
-webkit-border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
-moz-border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

我们只需要在使用它的时候传递一个参数即可,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
#header {J2FHTML5中文学习网 - HTML5先行者学习网
.border-radius(4px);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.button {J2FHTML5中文学习网 - HTML5先行者学习网
.border-radius(6px);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.border-radius(@radius: 5px) {J2FHTML5中文学习网 - HTML5先行者学习网
-webkit-border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
-moz-border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
border-radius: @radius;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

如果我们没有传值,则会使用默认值5px。J2FHTML5中文学习网 - HTML5先行者学习网

当然我们也可以传递多个参数,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@color) {J2FHTML5中文学习网 - HTML5先行者学习网
color-1: @color;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@color; @padding:2) {J2FHTML5中文学习网 - HTML5先行者学习网
color-2: @color;J2FHTML5中文学习网 - HTML5先行者学习网
padding-2: @padding;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@color; @padding; @margin: 2) {J2FHTML5中文学习网 - HTML5先行者学习网
color-3: @color;J2FHTML5中文学习网 - HTML5先行者学习网
padding-3: @padding;J2FHTML5中文学习网 - HTML5先行者学习网
margin: @margin @margin @margin @margin;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.some .selector div {J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(#008000);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.some .selector div {J2FHTML5中文学习网 - HTML5先行者学习网
color-1: #008000;J2FHTML5中文学习网 - HTML5先行者学习网
color-2: #008000;J2FHTML5中文学习网 - HTML5先行者学习网
padding-2: 2;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。J2FHTML5中文学习网 - HTML5先行者学习网

我们不仅可以传多个值,还可以指定属性名传值,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@color: black; @margin: 10px; @padding: 20px) {J2FHTML5中文学习网 - HTML5先行者学习网
color: @color;J2FHTML5中文学习网 - HTML5先行者学习网
margin: @margin;J2FHTML5中文学习网 - HTML5先行者学习网
padding: @padding;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.class1 {J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@margin: 20px; @color: #33acfe);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.class2 {J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(#efca44; @padding: 40px);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

关键字@arguments:J2FHTML5中文学习网 - HTML5先行者学习网
  @arguments有特殊的含义,类似于js的arguments,他包含了传递给混合属性的所有参数,如下:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {J2FHTML5中文学习网 - HTML5先行者学习网
-webkit-box-shadow: @arguments;J2FHTML5中文学习网 - HTML5先行者学习网
-moz-box-shadow: @arguments;J2FHTML5中文学习网 - HTML5先行者学习网
box-shadow: @arguments;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.big-block {J2FHTML5中文学习网 - HTML5先行者学习网
.box-shadow(2px; 5px);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.big-block {J2FHTML5中文学习网 - HTML5先行者学习网
-webkit-box-shadow: 2px 5px 1px #000;J2FHTML5中文学习网 - HTML5先行者学习网
-moz-box-shadow: 2px 5px 1px #000;J2FHTML5中文学习网 - HTML5先行者学习网
box-shadow: 2px 5px 1px #000;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

关键字@reset:J2FHTML5中文学习网 - HTML5先行者学习网
  与@arguments不同的是@reset包含除指明参数之外的参数,例如:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@a; @rest...) {J2FHTML5中文学习网 - HTML5先行者学习网
// @rest包含了@a之后的参数J2FHTML5中文学习网 - HTML5先行者学习网
// @arguments包含了所有参数J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

模式匹配:J2FHTML5中文学习网 - HTML5先行者学习网
  有时候你想让混合根据你传入的参数做不同的事情,比如:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(dark; @color) {J2FHTML5中文学习网 - HTML5先行者学习网
color: darken(@color, 10%);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(light; @color) {J2FHTML5中文学习网 - HTML5先行者学习网
color: lighten(@color, 10%);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@_; @color) {J2FHTML5中文学习网 - HTML5先行者学习网
display: block;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.class {J2FHTML5中文学习网 - HTML5先行者学习网
.mixin(@switch; #888);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

对于.class你赋给变量@switch不同的值,不同的混合属性会被调用,比如J2FHTML5中文学习网 - HTML5先行者学习网

@switch: light; J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.class {J2FHTML5中文学习网 - HTML5先行者学习网
color: #a2a2a2;J2FHTML5中文学习网 - HTML5先行者学习网
display: block;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

作为函数使用Mixin:J2FHTML5中文学习网 - HTML5先行者学习网
  当我们把混合当做函数使用时,在调用函数之后,函数中的变量是可以使用的,除非调用混合属性的元素自己定义了同样的变量。比如:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.mixin() {J2FHTML5中文学习网 - HTML5先行者学习网
@width: 100%;J2FHTML5中文学习网 - HTML5先行者学习网
@height: 200px;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
.caller {J2FHTML5中文学习网 - HTML5先行者学习网
.mixin();J2FHTML5中文学习网 - HTML5先行者学习网
width: @width;J2FHTML5中文学习网 - HTML5先行者学习网
height: @height;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.caller {J2FHTML5中文学习网 - HTML5先行者学习网
width: 100%;J2FHTML5中文学习网 - HTML5先行者学习网
height: 200px;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

使用表达式:J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
.average(@x, @y) {J2FHTML5中文学习网 - HTML5先行者学习网
@average: ((@x + @y) / 2);J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
div {J2FHTML5中文学习网 - HTML5先行者学习网
.average(16px, 50px); // "call" the mixinJ2FHTML5中文学习网 - HTML5先行者学习网
padding: @average; // use its "return" valueJ2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

编译后J2FHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
J2FHTML5中文学习网 - HTML5先行者学习网
div {J2FHTML5中文学习网 - HTML5先行者学习网
padding: 33px;J2FHTML5中文学习网 - HTML5先行者学习网
}J2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网

LESS VS SASSJ2FHTML5中文学习网 - HTML5先行者学习网
J2FHTML5中文学习网 - HTML5先行者学习网
同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。J2FHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助