Less和scss循环函数

$\qquad$身为前端小菜鸡的我就是懒，只想写一个样式全局都能调用(～￣▽￣)～

Less写法

$\qquad$when就跟js中递归循环一样跟在when后边的是条件如果要同时满足两个个条件的话只需加and即可，排除某个条件就使用not，多个条件就是用逗号进行分隔。

例子

1.两个条件必须同时满足,使用 and
// 只有宽度大于100并且颜色为红色才生效
.box(@width, @height, @color) when (@width > 100) and (@color = red){
    width: @width * 1px;
    height: @height * 1px;
    background-color: @color;
}
2.需要排除某个条件,使用not
// 只有颜色不为红色才生效
.box(@width, @height, @color) when not (@color = red){
    width: @width * 1;
    height: @height * 1;
    background-color: @color;
}
3.虽然不满足宽度大于等于100,但是满足为了颜色是red 所以Mixin会执行
.box(@width, @height, @color) when (@width >= 100),(@color = red){
    width: @width * 1px;
    height: @height * 1px;
    background-color: @color;
}

自己在vue项目中常用的

/* 文本-字号 */
/* ---------------------------------------------------------------------- */
/* 以 px 为单位，12px ~ 50px */

.fspx(@size) when ( @size > 11 ) {
    .fs@{size}px {
        font-size: @size * 1px !important;
    }
    .fspx((@size - 1));
}

.fspx(50);

/* 外边距 */
/* ---------------------------------------------------------------------- */
/* 以 px 为单位，5px ~ 40px */

.margin(@direct, @d, @size) when ( @size < 45 ) {
    .m@{d}@{size}px {
        margin-@{direct}: @size * 1px !important;
    }
    .margin(@direct, @d, (@size + 5));
}

.margin(left, l, 5);
.margin(right, r, 5);
.margin(top, t, 5);
.margin(bottom, b, 5);

/* 定位-相对偏移（主要用来进行微调） */
/* ---------------------------------------------------------------------- */
/* 以 px 为单位，1px ~ 10px */

.r-move(@direct, @count) when ( @count > -11 ) {
    .@{direct}@{count}px {
        position: relative;
        @{direct}: (@count * 1px);
    }
    .r-move(@direct, (@count - 1));
}

.r-move(top, 10);
.r-move(right, 10);
.r-move(bottom, 10);
.r-move(left, 10);

Scss

$\qquad$@each...in...和@for...from...through...都是scss的循环现在只是浅学一下

// scss 全局变量
$i: 1;
$directions: (
  "t": "top",
  "r": "right",
  "b": "bottom",
  "l": "left",
);
$dimensions: (
  "m": "margin",
);
/* margin */
/* ---------------------------------------------------------------------- */
@each $dim in $dimensions {
  @each $dir in $directions {
    @for $i from 1 through 50 {
      $size: $i * 1;
      .#{nth($dim, 1)}#{nth($dir, 1)}#{$size}#{$units} {
        #{nth($dim, 2)}-#{nth($dir, 2)}: #{$size}#{$units} !important;
      }
    }
  }
}
/* 宽度 以 px 为单位，10px ~ 400px  */
/* ---------------------------------------------------------------------- */

@for $i from 10 through 400 {
  $size: $i * 1;
  .w#{$size}px {
    width: #{$size}#{$units} !important;
  }
}

/* 宽度 以 em 为单位，1em ~ 60em  */
/* ---------------------------------------------------------------------- */

@for $i from 1 through 60 {
  $size: $i * 1;
  .w#{$size}em {
    width: #{$size}em !important;
  }
}

/* 字号 以 px 为单位，12px ~ 30px  */
/* ---------------------------------------------------------------------- */

@for $i from 1 through 60 {
  $size: $i * 1;
  .fs#{$size}px {
    font-size: #{$size}px !important;
  }
}

/* 定位-相对偏移 */
/* ---------------------------------------------------------------------- */
/* 以 px 为单位，1px ~ 10px */

@each $dir in $directions {
  @for $i from 1 through 10 {
    $size: $i * 1;
    .#{nth($dir, 2)}#{$size}#{$units} {
      position: relative;
      #{nth($dir, 2)}: #{$size}#{$units} !important;
    }
  }
}

$\qquad$本着用到了就学习的态度，不给自己太大的压力，scss和less还得好好研究一下