在 Sass 中动态生成 Class 名称和 CSS 属性

Question

我想在 SCSS Sass 版本 3 中使用迭代器和条件检查器动态生成非常具体的 class 名称和属性。

如果能被一半整除，在末尾加一半。如果只有 .25 后缀，则后缀为“1q” 如果是.75后缀，后缀加上'3q'

示例：

// margin classes
// classes m-a-0 to m-a-5, 1/4 rems specified by 1q, half, 3q   
// // m-a-1q is 1/4 rem, m-a-1-1q is i.25rem

.m- {
   &a-0 {
       margin: 1rem * 0;
   }
   &a-1q {
       margin: 1rem * 0.25;
   }
   &a-half {
       margin: 1rem * 0.5;
   }
   &a-3q {
       margin: 1rem * 0.75;
   }
   &a-1 {
       margin: 1rem * 1;
   }
   &a-1-1q {
       margin: 1rem;
   }
   &a-1half {
       margin: 1rem * 1.5;
   } 
   &a-1-3q {
       margin: 1rem * 1.75;
   }
   &a-2 {
       margin: 1rem * 2;
   }
   &a-2-1q {
       margin: 1rem * 2.25;
   }
   &a-2half {
       margin: 1rem * 2.5;
   }
   &a-2-3q {
       margin: 1rem * 2.75;
   }
}

应该生成：

.m-a-0{margin:0rem}.m-a-1q{margin:0.25rem}.m-a-half{margin:0.5rem}.m-a-3q{margin:0.75rem}.m-a-1{margin:1rem} ...

Answer 1

如果您允许稍微更改命名，您可以这样做：

$count: 2;  
@for $i from 0 through $count * 4 {
  .m-a-#{ floor($i / 4) }#{ nth(null -1q -half -3q, $i % 4 + 1) } { 
    margin: $i / 4 * 1rem; 
  }
}

//  output
.m-a-0      { margin: 0rem;    }  
.m-a-0-1q   { margin: 0.25rem; }
.m-a-0-half { margin: 0.5rem;  }
.m-a-0-3q   { margin: 0.75rem; }
.m-a-1      { margin: 1rem;    }
.m-a-1-1q   { margin: 1.25rem; }
.m-a-1-half { margin: 1.5rem;  }
.m-a-1-3q   { margin: 1.75rem; }
.m-a-2      { margin: 2rem;    }

在 Sass 中动态生成 Class 名称和 CSS 属性

Dynamically Generate Class Name and CSS Attributes in Sass

css

iterator

sass

dynamically-generated

rscss