If statement Sass'；如果'；基于现有类的语句

我是Sass新手，希望使用“if”语句来检测元素上的现有类，以便生成相关的css

我的设置有大量Javascript生成的图像，这些图像被分配了一个唯一的ID，以及一个“picture”类和一个随机分配的top、right、bottom或left类

我还为Sass使用了一个随机函数（在这里可以找到：），并且希望为每个ID分配一个不同的值，这样每个元素都是随机定位的

我的SCS具有以下功能，它们根据指定的类别定位图像：

@for $i from 0 through $number-of-pictures {
  #picture-#{$i}{

    &.top {
      left: random($stage-width);
    }

    &.right {
      top: random($stage-height);
    }

    &.bottom {
      left: random($stage-width);
    }

    &.left {
      top: random($stage-height);
    }
  }
}

这很好，但会创建大量未使用的声明块。例如，#picture-38被分配了类“.top”，所以我只需要第一个声明块，但是CSS会导出所有选项：

#picture-38.top {
      left: 38px; //This is a random number that is different for each ID.
}
#picture-38.right {
      top: 28px;
}
#picture-38.bottom {
      left: 12px;
}
#picture-38.left {
      top: 47px;
}

我需要的是一个if语句，它在解析css之前检测元素是否有类。比如：

@if "#picture-#{$i} has class $class-top" {
    &.top {
        left: random($stage-width);
    }
}

---

有什么想法吗？

答案是你不能用SASS/SCSS来做这件事。

您正在尝试检测类对DOM元素的占有/分配

与DOM元素交互的方式是JavaScript

您需要做的是使用JavaScript检测“picture-x#”是否具有类“class top”，然后相应地设置一个随机

top

值

例如

---

旁注：

top

需要一个测量单位（例如

px

），因此

+'px'

现在有点旧了，但我最近做了一些类似的工作-在这里我使用一个数组来循环不同类别的按钮并相应地附加样式。 请注意，代码段中有一些未声明的变量

$buttonSizes: large-buttons, medium-buttons, small-buttons;
@each $buttonSizesItem in $buttonSizes {
  %#{nth($buttonSizesItem, 1)}{
    @if (nth($buttonSizesItem, 1))== large-buttons{
      @include font-size(2);
      @include rounded(6);
      padding: 8px 15px;      
    }
    @if (nth($buttonSizesItem, 1))== medium-buttons{
      @include font-size(1.8);
      @include rounded(5);
      padding: 4px 12px;
      &.button-loading {
        &:before{
          top: 2px;      
        }
      }
    }
    @if (nth($buttonSizesItem, 1)) == small-buttons{
      @include font-size(1.6);
      @include rounded(4);
      padding: 4px 10px;
      &.button-loading {
        &:before{
          top: 0;      
        }
      }
    }
  }
}

---

听起来您想要的是能够找出哪些代码路径在css中未使用并相应缩小的东西。不确定是否存在类似的情况，因为它必须假设您以后不会使用JS动态分配此类路径，这并不是一个真正安全的假设（即使它试图解析JS来这样做，您也可以始终根据用户输入分配类…），因此，它必须是一个可配置的选项，对于某些插件来说，默认情况下关闭该选项以进行gulp/grunt/etc，这听起来像是

在您的特定情况下，您确实有一些选项，但它们超出了sass/scss的范围。基本上，如果您在服务器端使用定位类生成这些图像，那么您可以在同一时间使用相同的代码构造一个匹配的文件，稍后由sass导入。包含所有可能类的“主”文件不会得到处理，只是用作此其他文件的引用

如果你是在客户方面做的，那么你的提议就没有意义了。您可以使用javascript动态地注入CSS规则，但是您只是将JS中的所有规则发送到那里，而不是一开始就将它们包含在CSS中，那么这有什么意义呢？为了避免这种情况，您必须根据需要从服务器导入它们，这将是一个可怕/荒谬的想法

---

我要说的是，这听起来像是过度优化。有一些额外的CSS规则有什么问题？你真的想节省几个字节吗？将所有内容都放在CSS文件中，不要担心，除非你有充分的理由这样做。

我认为SASS（或任何其他预处理器）不可能做到这一点。相关人员：谢谢，我想可能是这样的。我希望将所有的定位都保持在Sass中，并稍微伸展它的腿，但我将把它移到Javascript函数中。

$buttonSizes: large-buttons, medium-buttons, small-buttons;
@each $buttonSizesItem in $buttonSizes {
  %#{nth($buttonSizesItem, 1)}{
    @if (nth($buttonSizesItem, 1))== large-buttons{
      @include font-size(2);
      @include rounded(6);
      padding: 8px 15px;      
    }
    @if (nth($buttonSizesItem, 1))== medium-buttons{
      @include font-size(1.8);
      @include rounded(5);
      padding: 4px 12px;
      &.button-loading {
        &:before{
          top: 2px;      
        }
      }
    }
    @if (nth($buttonSizesItem, 1)) == small-buttons{
      @include font-size(1.6);
      @include rounded(4);
      padding: 4px 10px;
      &.button-loading {
        &:before{
          top: 0;      
        }
      }
    }
  }
}