优化sass代码以减少重复

Question

我已经编写了以下填充修饰符，编译这些修饰符时应该删除填充。

所以我有

.no-padding{
&--all{
padding:0!important;
}
&--top{
padding-top:0!important;
}
&--bottom{
padding-bottom:0!important;
}
&--left{
padding-left:0!important;
}
&--right{
padding-right:0!important;
}
}

这在css中有效，例如：<div class="no-padding--all">删除所有边上的填充。但我正在研究一种进一步优化的方法，因为我也有类似的重复。我如何在sass中进一步优化它。

Answer 1

与其他答案相比，我会有另一种方法。

我会使用两个映射和两个@每个函数

首先，我定义了方向：

$directions: top, right, bottom, left;  

然后，属性：

$properties: padding, margin;

完整代码：

$directions: top, right, bottom, left;
$properties: padding, margin;
/* This loop will create the .x-all classes */
@each $property in $properties {
.no-#{$property}--all {
#{$property} : 0 !important;
}
}
/* This loop will create all the other direction specific classes */
@each $direction in $directions {
@each $property in $properties {
.no-#{$property}--#{$direction} {
#{$property}-#{$direction} : 0 !important;  
}
}
}

Answer 2

您可以进一步简化：

.no-padding{
padding: 0 !important;
&--top{
padding-top: 0 !important;
}
&--bottom{
padding-bottom: 0 !important;
}
&--left{
padding-left: 0 !important;
}
&--right{
padding-right: 0 !important;
}
}

这样就可以直接使用.no-padding而不是.no-padding--all。

你也可以简化修饰语的命名，比如用一个字母代替--top, --right, --bottom, --left到--t, --r, --b, --l，否则其他的都可以

Mixin也可以做这项工作：

@mixin no-padding($dir){
@if $dir == 'top' {
padding-top: 0 !important;
}
@if $dir == 'right' {
padding-right: 0 !important;
}
@if $dir == 'bottom' {
padding-bottom: 0 !important;
}
@if $dir == 'left' {
padding-left: 0 !important;
}
@if $dir == 'all' {
padding: 0 !important;
}
}

并将其包含在你的课程中：

.no-padding{
@include no-padding(all);
&--top{
@include no-padding(top);
}
&--bottom{
@include no-padding(bottom);
}
&--left{
@include no-padding(left);
}
&--right{
@include no-padding(right);
}
}

请注意，您可以将此mixin@include no-padding($dir)与任何类一起使用。

Answer 3

您可以使用混合

@mixin no-padding(
$all: false,
$left: false,
$right: false,
$top: false,
$bottom: false,
) {
@if($all) {
padding: 0 !important;
}
@if($left) {
padding-left: 0 !important;
}
@if($right) {
padding-right: 0 !important;
}
@if($top) {
padding-top: 0 !important;
}
@if($bottom) {
padding-bottom: 0 !important;
}
}

用法：

.no-padding--all {
@include no-padding($all: true);
}
.no-padding--left {
@include no-padding($left: true);
}
.padding--left-only {
@include no-padding($top: true, $right: true, $bottom: true);
}
.no-padding--vertical {
@include no-padding($left: true, $right: true);
}

此外，这为您提供了根据自己的选择提供参数的能力和灵活性，并且您可以编写灵活的类，因此您不必在HTML中提供多个类名。(例如：padding--left-only、no-padding--vertical(

您可以编写一个mixin来动态地赋予属性(我不推荐它(。

@mixin no-property(
$property,
$all: false,
$left: false,
$right: false,
$top: false,
$bottom: false,
) {
@if($all) {
#{$property}: 0 !important;
}
@if($left) {
#{$property}-left: 0 !important;
}
@if($right) {
#{$property}-right: 0 !important;
}
@if($top) {
#{$property}-top: 0 !important;
}
@if($bottom) {
#{$property}-bottom: 0 !important;
}
}

用法：

.no-padding--left {
@include no-property($property: 'padding', $left: true);
}
.no-margin--right {
@include no-property($property: 'margin', $right: true);
}