less和scss 循环以及常用公共样式

72 阅读 0 评论 48 点赞

我是靠谱客的博主慈祥秋天，最近开发中收集的这篇文章主要介绍less和scss 循环以及常用公共样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.less 循环padding和margin

//less
@values: 5,8, 10, 12, 15,17,18, 20,25,28,30,40,45,50,60,70,80,123,140,150;
// class的key和对应的属性
.enums() {
    pt: padding-top;
    pr: padding-right;
    pb: padding-bottom;
    pl: padding-left;
    mt: margin-top;
    mr: margin-right;
    mb: margin-bottom;
    ml: margin-left;
}
// 遍历生成，比如.pl10{padding-left: 10px;}
each(.enums(), .(@v1, @k1) {
    each(@values, {
        .@{k1}@{value} {
            @{v1}: (@value * 1px);
        }
    }
    )
})

2.less的继承和scss继承


//less
.flex{
    display: flex;
  }
  
  .flex-center:extend(.flex){
    justify-content: center;
    align-items: center;
  }
  .flex-end:extend(.flex){
    justify-content: flex-end;
    align-items: center;
  }
  .flex-between:extend(.flex){
    justify-content: space-between;
    align-items: center;
  }
  
  .flex-around:extend(.flex){
    justify-content: space-around;
    align-items: center;
  }
  
  .flex-align:extend(.flex){
    align-items: center;
  }
  
  .flex-column:extend(.flex){
    flex-direction: column;
  }
//scss
.flex{
  display: flex;
}

.flex-center{
  @extend .flex;
  justify-content: center;
  align-items: center;
}
.flex-end{
  @extend .flex;
  justify-content: flex-end;
  align-items: center;
}
.flex-between{
  @extend .flex;
  justify-content: space-between;
  align-items: center;
}

3.less字体循环

@fontList: 10, 12, 14, 16,18,20,24,26,28,30,32,34,36;
each(@fontList, {
  .font@{value} {
    font-size: @value*1px;
  }
});

@aligns:center,left,right,justify;
each(@aligns, {
  .align-@{value}{
    text-align: @value;
  }
})

4.scss 循环字体

$colorList:(primary:$primary,success:$success,warning:$warning,danger:$danger,info:$info,blue:$blue,black:$black,white:$white,gray:$gray,gray2:$gray2);

$edge-distances:(3:3px,5:5px,6:6px,8:8px,10:10px,15:15px,17:17px,20:20px,24:24px,25:25px,30:30px,40:40px,50:50px,70:70px);

$aligns:center,left,right,justify;

@for $i from 10 through 36 {
  .font-#{$i}{
    font-size: 1px*$i;
  }
}

@each $name,$color in $colorList{
  .font-#{$name}{
    color: $color;
  }
}

@each $align in $aligns {
  .align-#{$align}{
    text-align: $align;
  }
}

5.scss pading和marging

@each $type,$size in $edge-distances{
  .m#{$type}{
    margin: $size;
  }
  .p#{$type}{
    padding: $size;
  }
  .mt#{$type}{
    margin-top: $size;
  }
  
  .ml#{$type}{
    margin-left: $size;
  }
  .mr#{$type}{
    margin-right: $size;
  }
  .mb#{$type}{
    margin-bottom: $size;
  }
  .pt#{$type}{
    padding-top: $size;
  }
  .pl#{$type}{
    padding-left: $size;
  }
  .pr#{$type}{
    padding-right: $size;
  }
  .pb#{$type}{
    padding-bottom: $size;
  }
}

@for $i from 1 through 5 {
  .radius-#{$i} {
    border-radius: 2px*$i;
  } 
}