最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

less的函數(shù)與循環(huán)——使用總結(jié)

標(biāo)簽:
Sass/Less

也是不定期更新吧,具体也没有总结一下:
之前的文章 less的配置安装及语法使用 也介绍了一些less的语法,
这里只是根据我平时会用到的进行一个总结:

函数参数带有类名设置

  • 函数定义

这个根据每个的设计稿和基础适配的font-size决定,我这里只是说传入参数生成对应的rem的值

@base:750 / 720 * 0.01;
.px2rem(@name, @px) {
     @{name}: @px * @base * 1rem;
}
  • 函数调用

.px2rem(margin-top,250);
  • 使用语法

如果是参数,类名参数要加大括号@{name},不是冒号左边的不需要,如果有双引号也要加。

less循环输出类名

  • 目标输出

.a{  background: url("./resource/a.png") top/100% no-repeat;
}.b{  background: url("./resource/b.png") top/100% no-repeat;
}.c{  background: url("./resource/c.png") top/100% no-repeat;
}
  • 实现思路

    • 由于形式上面很类似,所以先定义一个模板函数;

    • 定义一个less列表,把需要的类名都写上;

    • 循环遍历列表,调用函数。

  • 实现步骤

    ```    .backgroundcard(@className,@pngName){
              .@{className}{                background: url("./resource/@{pngName}.png") top/100% no-repeat;
              }
        }
    ```
    @bgcardList:a,b,c,d,e,f,g;
    .loop(@i) when (@i < length(@bgcardList)+1){    .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));    .loop(@i+1);
    }.loop(1);
  1. 循环遍历

  1. 定义一个数组

  1. 定义函数

语法

+ 列表函数
    - 获取列表的长度  length(@bgcardList)  //7
    - 获取列表元素  extract(@bgcardList, 3)  //c+ 循环函数
    - loop定义循环次数,when条件判断,符合进入函数,不符合不进入函数。之后次数+1,形成循环。
    - loop函数调用,直接传值1。

@version1.0——2018-8-3——创建《less的函数与循环——使用总结》
分割线


之后将不定期更新...



作者:顽皮的雪狐七七
链接:https://www.jianshu.com/p/6d412130fa53


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消