需要帮助使用多个mixin来创建DRY主题

Question

我现在将所有CSS（超过1000行）重构为SCSS，同时学习SASS。我正在尝试找到在中使用重复组件的最佳方式，将主题添加到自己的主页。 想想：

• Page 1 card = blue
• Page 2 card = purple
• 等

新SCSS

$blue: hsl(193,99%,47%);
$buffer: 1.5em 0em 1.5em 0em;
$padding: 1em 1em;
$right: -15px;
$left: -16px;
 @mixin box-shadow($hover, $direction, $color) {
   @if $hover == true {
     &:hover {
      @if $direction == 'right' {
        box-shadow: 8.5px 7.5px 0px 0px $color;
      } @else if $direction == 'left' {
        box-shadow: -8.5px 7.5px 0px 0px $color;
      }       
     }
   } @else if $hover == false {
    @if $direction == 'right' {
      box-shadow: 8.5px 7.5px 0px 0px $color;
    } @else if $direction == 'left' {
      box-shadow: -8.5px 7.5px 0px 0px $color;
    }
   }
 }
@mixin background-color($color) {
  background-color: $color;
}
@mixin card-pull($direction) {
  @if $direction == 'right' {
    right: $right
  }
  @else if $direction == 'left' {
    left: $left
  }
}

到目前为止我已经建立了什么，但需要帮助，建议和指导（因为如此，错误）：

.card {
    @include background-color($color);
    @include card-pull(left);
    @include box-shadow(false,right,$color);

    margin: $buffer;
    padding: $padding;

}

原始HTML（使用Bootstrap）：

<div class="container-fluid">
    <div class="row col-md-5 col-sm-11 col-xs-11 buffer blue black-shadow pull-left padding text-right card-left">
        <h1>Title</h1>
    </div>

我希望能够添加<div class="row col-md-5 col-sm-11 col-xs-11 card">

，而不是所有其他类

Answer 1

为什么？

你可能会认为你正在创建DRYer代码，同时查看你的Scss源代码，但你正在做相反的事情。您只是在编译的CSS中添加膨胀，这是访问者唯一关心的网站。

此外，像@include background-color($color);这样的mixin没有意义，键入的时间比background-color: $color;长，只会让你的代码更难阅读。更难阅读，更难写。

其他一些提示：

$buffer: 1.5em 0em 1.5em 0em;最好写成$buffer: 1.5em 0;，结果完全相同，代码更少。 DRY。

同样$padding: 1em 1em; == $padding: 1em; DRY。

0不需要单位。 0px，0em，0elephants，0telephones。所有这些都等于0。

我的建议，首先将.css文件重命名为.scss，然后查看可以先对CSS进行哪些改进，否则我认为你最终会让事情变得更糟。抱歉这么直率。