less、scss中使用循环实现动态样式

3 篇文章 0 订阅

场景:在写页面时,有很多重复的css样式,想要写一个公共的样式文件来实现,比如margin-top:10px

使用less:

// margin-left:20px
<div class="m-l-20"></div>
@list: {
//我用的是vue框架,这里的label直接写数字代码可能会标红,但是可以正常使用,
//如果介意的朋友可以替换为:xs:6px; s:10px; m:15px这样子
  6: 6px;
  10: 10px;
  15: 15px;
  20: 20px;
  25: 25px;
  30: 30px;
  35: 35px;
  40: 40px;
  50: 50px;
}
//外边距or内边距
@type: {
  m: margin;
  p: padding
};
//方向
@direction:{
  t: top;
  r: right;
  b: bottom;
  l: left;
}
// eg:  m-t-10 = margin-top:10px
each(@type, .(@typeVal, @typeKey, @typeIdx) {
  each(@direction, .(@dirVal, @dirKey, @dirIdx) {
    each(@list, {
      .@{typeKey}-@{dirKey}-@{key} {
          @{typeVal}-@{dirVal}: @value * 1px!important;
      }
    })
  })
})

使用scss (感觉这个比less更方便)

// margin-left:20px;font-size:24px
<div class="m-l-20 f-s-24"></div>

//内外边距
@for $i from 1 through 300 {
  .m-t-#{$i} {
    margin-top: #{$i}px !important;
  }
  .m-r-#{$i} {
    margin-right: #{$i}px !important;
  }
  .m-b-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .m-l-#{$i} {
    margin-left: #{$i}px !important;
  }
  .p-t-#{$i} {
    padding-top: #{$i}px !important;
  }
  .p-r-#{$i} {
    padding-right: #{$i}px !important;
  }
  .p-b-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .p-l-#{$i} {
    padding-left: #{$i}px !important;
  }
}

//字体大小全局样式
@for $i from 10 through 32 {
  .f-s-#{$i} {
     font-size: #{$i}px !important;
   }
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值