目錄
命名空间:
关键字!important:
关键字@arguments:
关键字@reset:
模式匹配:
使用表达式:
首頁 web前端 html教學 less语法(二)混合属性_html/css_WEB-ITnose

less语法(二)混合属性_html/css_WEB-ITnose

Jun 24, 2016 am 11:52 AM

摘要:

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

混合:

  在 LESS 中我们可以定义一些通用的属性集为一个选择器,然后在另一个选择器中去调用这些属性. 例如:

1

.a, #b {  color: red;}.mixin-class {  .a();}.mixin-id {  #b();}

登入後複製

编译后

1

.a, #b {  color: red;}.mixin-class {  color: red;}.mixin-id {  color: red;}

登入後複製

注意:在调用混合时,可以加括号也可以不加括号。下面这个也是对的:

1

.a, #b {  color: red;}.mixin-class {  .a;}.mixin-id {  #b;}

登入後複製

如果你只想定义一个混合,则可以再选择器后面加上括号,如下:

1

.my-mixin {  color: black;}.my-other-mixin() {  background: white;}.class {  .my-mixin;  .my-other-mixin;}

登入後複製

编译后,加括号的.my-other-mixin()不会被编译。

1

.my-mixin {  color: black;}.class {  color: black;  background: white;}

登入後複製

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.通用选择器中可以嵌套选择器。

命名空间:

  如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下:

1

#outer {  .inner {    color: red;  }}

登入後複製

如果想使用这个混合属性,你可以这样,下面四个都是等价的

1

.c{    #outer > .inner;}.c{    #outer > .inner();}.c{    #outer.inner;}.c{    #outer.inner();}

登入後複製

你可以将混合属性定义在一个id的下面,这样就避免了与其他混合冲突。

关键字!important:

  在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。例如:

1

.foo (@bg: #f5f5f5, @color: #900) {  background: @bg;  color: @color;}.unimportant {  .foo(1);}.important {  .foo(2) !important;}

登入後複製

编译后

1

.unimportant {  background: #f5f5f5;  color: #900;}.important {  background: #f5f5f5 !important;  color: #900 !important;}

登入後複製

带参数的混合:

  混合属性也可以通过括号传递参数,如下:

1

.border-radius(@radius) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}

登入後複製

我们只需要在使用它的时候传递一个参数即可,如下:

1

#header {  .border-radius(4px);}.button {  .border-radius(6px);}

登入後複製

当然我们也可以给参数一个默认值,这样使用的时候可以传值也可以不传值。如下:

1

.border-radius(@radius: 5px) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}

登入後複製

如果我们没有传值,则会使用默认值5px。

当然我们也可以传递多个参数,如下:

1

.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);}

登入後複製

编译后

1

.some .selector div {  color-1: #008000;  color-2: #008000;  padding-2: 2;}

登入後複製

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

我们不仅可以传多个值,还可以指定属性名传值,如下:

1

.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,他包含了传递给混合属性的所有参数,如下:

1

.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);}

登入後複製

编译后

1

.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包含除指明参数之外的参数,例如:

1

.mixin(@a; @rest...) {   // @rest包含了@a之后的参数   // @arguments包含了所有参数}

登入後複製

模式匹配:

  有时候你想让混合根据你传入的参数做不同的事情,比如:

1

.mixin(dark; @color) {  color: darken(@color, 10%);}.mixin(light; @color) {  color: lighten(@color, 10%);}.mixin(@_; @color) {  display: block;}.class {  .mixin(@switch; #888);}

登入後複製

对于.class你赋给变量@switch不同的值,不同的混合属性会被调用,比如

1

@switch: light;

登入後複製

编译后

1

.class {  color: #a2a2a2;  display: block;}

登入後複製

作为函数使用Mixin:

  当我们把混合当做函数使用时,在调用函数之后,函数中的变量是可以使用的,除非调用混合属性的元素自己定义了同样的变量。比如:

1

.mixin() {  @width:  100%;  @height: 200px;}.caller {  .mixin();  width:  @width;  height: @height;}

登入後複製

编译后

1

.caller {  width:  100%;  height: 200px;}

登入後複製

使用表达式:

1

.average(@x, @y) {  @average: ((@x + @y) / 2);}div {  .average(16px, 50px); // "call" the mixin  padding: @average;    // use its "return" value}

登入後複製

编译后

1

div {  padding: 33px;}

登入後複製

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? < iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?

使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含義是什麼?如何減輕它們?

我如何使用html5< meter> 要在範圍內顯示數值數據的元素? 我如何使用html5< meter> 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

我如何使用html5< meter> 要在範圍內顯示數值數據的元素?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

如何有效地使用HTML鏈接進行導航和SEO? 如何有效地使用HTML鏈接進行導航和SEO? Mar 18, 2025 pm 02:39 PM

如何有效地使用HTML鏈接進行導航和SEO?

See all articles