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

原创已于 2022-12-23 16:15:23 修改 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#less #javascript #前端

于 2022-11-28 15:11:20 首次发布

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了如何利用预处理器Less和SCSS来编写CSS公共样式文件，提高代码复用效率。通过示例展示了如何定义和使用变量、嵌套规则以及循环，创建如m-t-10 (margin-top:10px) 这样的简洁选择器，简化CSS代码维护。

场景：在写页面时，有很多重复的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;
   }
}