SCSS中每个类具有相同样式的多个类

Question

假设以下代码：

<div class="example">
  <div class="class-1">Class 1</div>
  <div class="class-2">Class 2</div>
  <div class="class-3">Class 3</div>
  <div class="class-4">Class 4</div>
  <div class="class-5">Class 5</div>
</div>

/* Code every class shares */
.example .class-1,
.example .class-2,
.example .class-3,
.example .class-4,
.example .class-5 {
    padding: 1em;
    font-family: sans-serif;
    /* More code... */
}

/* Code that is different */
.example .class-1 {
    color: red;
}

.example .class-2 {
    color: blue;
}

.example .class-3 {
    font-weight: bold;
}

.example .class-4 {
    background-color: darkcyan;
}

.example .class-5 {
    text-transform: uppercase;
}

有没有办法避免重复使用SCSS？请记住，我不是在寻找使用属性迭代映射的方法。

Answer 1

举你的例子，这是我能想到的，为了不重复太多使用SCSS。

.example {
    /* Code every class shares */
    [class^="class-"] {
       padding: 1em;
       font-family: sans-serif;
       /* More code... */
    }

    /* Code that is different */
    .class-1 {
        color: red;
    }

    .class-2 {
        color: blue;
    }

    .class-3 {
        font-weight: bold;
    }

    .class-4 {
        background-color: darkcyan;
    }

    .class-5 {
        text-transform: uppercase;
    }
}

请记住，[class^="class-"]将影响所有包含以"class-“开头的类的元素，如class-a、class-x等，有关属性选择器：选择器的更多细节。

Answer 2

下面是您可以使用提供的示例代码的基本示例：

/* Code every class shares */
.example > div {
    padding: 1em;
    font-family: sans-serif;
    /* More code... */
    
    &.class {
        &-1 {
            color: red;
        }
        
        &-2 {
            color: blue;
        }
        
        &-3 {
            font-weight: bold;
        }
        
        &-4 {
            background-color: darkcyan;
        }
        
        &-5 {
            text-transform: uppercase;
        }
    }
}

为此编写的文件如下：

/* Code every class shares */
.example > div {
  padding: 1em;
  font-family: sans-serif;
  /* More code... */
}
.example > div.class-1 {
  color: red;
}
.example > div.class-2 {
  color: blue;
}
.example > div.class-3 {
  font-weight: bold;
}
.example > div.class-4 {
  background-color: darkcyan;
}
.example > div.class-5 {
  text-transform: uppercase;
}

因为您正在为每个.class-*元素更改不同的属性，所以您不能避免像这样写出它，除非您想要进入SASS地图，如果您想要预定义样式，这可能对您有用。

$elements : ( 
    1: ( 'color' : 'red', 'text-align' : 'left', 'font-size': '16px'), 
    2: ( 'color' : 'blue'), 
    3: ( 'font-weight' : 'bold')
    );


/* Code every class shares */
.example > div {
    padding: 1em;
    font-family: sans-serif;
    /* More code... */
    
    &.class {
        @each $index, $maps in $elements {
            &-#{$index} {
                @each $prop, $style in $maps {
                    #{$prop} : #{$style}
                }
            }
        }
    }
}

汇编成：

/* Code every class shares */
.example > div {
  padding: 1em;
  font-family: sans-serif;
  /* More code... */
}
.example > div.class-1 {
  color: red;
  text-align: left;
  font-size: 16px;
}
.example > div.class-2 {
  color: blue;
}
.example > div.class-3 {
  font-weight: bold;
}