less 循环 让公用样式变的更简单

工作中的公用样式代码比如: 

不需要重复定义 一次定义重复使用

需要的话自取

 

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   @c:5 * @count;
   @d:(5px * @count);
   .g-mb@{c}{
      margin-bottom: @d;
   }
   .g-ml@{c}{
       margin-left: @d;
   }
   g-mr@{c}{
       margin-right: @d;
   }
    g-mt@{c}{
       margin-top: @d;
   }
}

  .cont(4); 

  

 

  结果

 

 

.g-mb5 {
  margin-bottom: 5px;
}
.g-ml5 {
  margin-left: 5px;
}
g-mr5 {
  margin-right: 5px;
}
g-mt5 {
  margin-right: 5px;
}
.g-mb10 {
  margin-bottom: 10px;
}
.g-ml10 {
  margin-left: 10px;
}
g-mr10 {
  margin-right: 10px;
}
g-mt10 {
  margin-right: 10px;
}
.g-mb15 {
  margin-bottom: 15px;
}
.g-ml15 {
  margin-left: 15px;
}
g-mr15 {
  margin-right: 15px;
}
g-mt15 {
  margin-right: 15px;
}
.g-mb20 {
  margin-bottom: 20px;
}
.g-ml20 {
  margin-left: 20px;
}
g-mr20 {
  margin-right: 20px;
}
g-mt20 {
  margin-right: 20px;
}

 

  

 

上一篇:栈的基本操作(顺序栈)


下一篇:外边距重叠