【问题标题】:How to reduce this css code [duplicate]如何减少这个css代码[重复]
【发布时间】:2015-03-30 17:40:15
【问题描述】:

我正在为我的项目使用这个 css 代码,现在我计划将所有这些移动到 sass 文件我不知道如何减少这个代码我是 sass 的新手 :( 有什么方法可以减少以下 css 代码.

.push-bottom-0 {
  padding-bottom: 0px;
}
.push-bottom-3 {
  padding-bottom: 3px;
}
.push-bottom-5 {
  padding-bottom: 5px;
}
.push-bottom-10 {
  padding-bottom: 10px;
}
.push-bottom-13 {
  padding-bottom: 10px;
}
.push-bottom-20 {
  padding-bottom: 20px;
}
.push-bottom-30 {
  padding-bottom: 30px;
}
.push-bottom-40 {
  padding-bottom: 40px;
}
.push-bottom-50 {
  padding-bottom: 50px;
}
.push-bottom-60 {
  padding-bottom: 60px;
}
.push-bottom-70 {
  padding-bottom: 70px;
}
.push-bottom-80 {
  padding-bottom: 80px;
}
.push-bottom-90 {
  padding-bottom: 90px;
}
.push-bottom-100 {
  padding-bottom: 100px;
}

【问题讨论】:

    标签: css sass


    【解决方案1】:

    你可以试试 sass 循环

    @list 0 3 5 10 13 20 30 40 50 60 70 80 90 100
    
    @each $number in $list
    .push-bottom-#{$number} {
      padding-bottom: $number;
    }
    

    http://thesassway.com/intermediate/if-for-each-while

    【讨论】:

      【解决方案2】:

      你可以使用each循环。

      SASS Example

      @each $i in 0 3 5 10 13 20 30 40 50 60 70 80 90 100
        .push-bottom-#{$i}
          padding-bottom: #{$i}px
      

      SCSS Example

      @each $i in 0, 3, 5, 10, 13, 20, 30, 40, 50, 60, 70, 80, 90, 100 {
        .push-bottom-#{$i} {
          padding-bottom: #{$i}px;
        }
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多