如何理解动态的样式语言less语法中混合属性-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

如何理解动态的样式语言less语法中混合属性-创新互联

这篇文章主要介绍“如何理解动态的样式语言less语法中混合属性”,在日常操作中,相信很多人在如何理解动态的样式语言less语法中混合属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解动态的样式语言less语法中混合属性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联建站专注于企业全网整合营销推广、网站重做改版、平潭网站定制设计、自适应品牌网站建设、H5开发商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为平潭等各大城市提供网站开发制作服务。

混合:
在 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


到此,关于“如何理解动态的样式语言less语法中混合属性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


本文题目:如何理解动态的样式语言less语法中混合属性-创新互联
标题链接:http://kswsj.cn/article/cceooc.html

其他资讯