Question

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

我的设置包含大量Javascript生成的图像，这些图像被分配了一个唯一的ID，以及一组“图片”和一个随机分配的顶级，右侧，底部或左侧的类。

我也在使用Sass的随机函数（在这里找到：https://gist.github.com/chriseppstein/1561650），并希望为每个ID分配不同的值，以便每个元素随机定位。

我的SCSS具有以下功能，可根据分配的类别定位图像：

@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);
    }
}

有什么想法吗？

Answer 1

答案是你不能用SASS / SCSS做到这一点。

您正在尝试检测DOM元素的拥有/分配。

与DOM元素交互的方式是JavaScript

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

E.g。

var picture = document.GetElementById('picture-1');
var pic_class = picture.className
if(pic_class.indexOf('class-top') != -1)
{
    /*Returns a random number between 1 and 100*/
    picture.style.top = Math.floor((Math.random()*100)+1) + 'px';
}

旁注：top需要一个度量单位（例如px），因此+ 'px'

Answer 2

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

$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;      
        }
      }
    }
  }
}

Answer 3

听起来像您想要的东西，它可以找出哪些代码路径在您的CSS中不使用并相应地缩小。不知道是否存在类似的东西，因为它必须假设您以后不会使用JS动态分配这样的路径，这并不是一个安全的假设（即使它试图解析JS来这样做，总是可以根据用户输入分配一个类...），因此对于某些插件，例如gulp / grunt / etc，它必须是默认关闭的可配置选项。

在您的特定情况下，您确实有一些选择，但是它们超出了sass / scss的范围。基本上，如果要在服务器端使用定位类生成这些图像，则可以在同一时间构造相同的代码，然后再由sass导入匹配文件。包含所有可能类的“主”文件不会被处理，而仅被该其他文件用作参考。

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

不过，我要说的是，这听起来像是过度优化。有一些额外的CSS规则有什么问题？您是否真的要节省一些字节？将所有内容都扔到CSS文件中，除非您有充分的理由，否则不必担心。

基于现有类的Sass'if'语句

3 个答案: