时间戳

首页 > 解决方案 > 为什么 Sass 不能正确编译我的类？

html - 为什么 Sass 不能正确编译我的类？

问题描述

我正在创建一个网络并将 Sass 主要用于带有颜色的变量。但是，当我在 SCSS 中嵌套颜色类时，它会编译成带有空格的 CSS，因此它不起作用。是格式问题还是其他什么？我还插入了我的代码以便更好地理解。

<h1 class="lightblue">Hello World!</h1><h2>Hello World!</h2><h3>Hello World!</h3><h4 class="orange">Hello World!</h4><h5 class="darkgreen">Hello World!</h5><h6>Hello World!</h6>

我的 SCSS：

h1, h2, h3, h4, h5, h6 {
    .orange {
        &color: $orange;
    }
    
    .darkgreen {
        &color: $dark-green;
    }

    .lightgreen {
        &color: $light-green;
    }

    .red {
        &color: $red;
    }

    .blue {
        &color: $blue;
    }

    .lightblue {
        &color: $light-blue;
    }
}

我已编译但非功能性的 CSS：

h1 .orange, h2 .orange, h3 .orange, h4 .orange, h5 .orange, h6 .orange {
      color: #F27F1B;
    }
    h1 .darkgreen, h2 .darkgreen, h3 .darkgreen, h4 .darkgreen, h5 .darkgreen, h6 .darkgreen {
      color: #49BF72;
    }
    h1 .lightgreen, h2 .lightgreen, h3 .lightgreen, h4 .lightgreen, h5 .lightgreen, h6 .lightgreen {
      color: #81D959;
    }
    h1 .red, h2 .red, h3 .red, h4 .red, h5 .red, h6 .red {
      color: #F23C50;
    }
    h1 .blue, h2 .blue, h3 .blue, h4 .blue, h5 .blue, h6 .blue {
      color: #009ECE;
    }
    h1 .lightblue, h2 .lightblue, h3 .lightblue, h4 .lightblue, h5 .lightblue, h6 .lightblue {
      color: #04ADBF;
    }

`

标签： htmlsass

解决方案

从 CSS 属性中删除& ：

.orange {
    &color: $orange;
}

&在Sass/Scss 中用于连接父类，而不是 CSS 属性。

h1, h2, h3, h4, h5, h6 {
    &.orange {
        color: $orange;
    }
...    
}

我强烈建议您不要将这些类嵌套在标题 (h1,h2,h3...) 下，如果您将来需要在段落或跨度中使用这些类会怎样？您需要一遍又一遍地创建这些类的副本。

我会选择像 bootstrap 这样的方法，创建简单的辅助类，并在需要时使用它们（在每个元素上）：

.color-white {
  color: #FFFFFF;
}

您还可以从循环中创建所有这些类，而不必手动创建它们：

$color-collection: ('white' '#FFFFFF'), ('black' '#000000');
@each $color in $color-collection {
  $color-name: nth($color, 1);
  $color-value: nth($color, 2);
  .color-#{$color-name} {
    color: #{$color-value};
  }
}

会生成这个 CSS：

.color-white {
  color: #FFFFFF;
}

.color-black {
  color: #000000;
}

推荐阅读