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

【问题标题】：Sass 'if' statement based on existing class基于现有类的 Sass 'if' 语句
【发布时间】：2014-03-29 19:47:43
【问题描述】：

我是 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);
    }
}

有什么想法吗？

【问题讨论】：

我不相信这对于 SASS（或任何其他预处理器）是可能的。
相关：stackoverflow.com/questions/18851502/…

标签： if-statement sass

【解决方案1】：

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

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

与 DOM 元素交互的方式是 JavaScript

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

例如

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'

【讨论】：

谢谢，我想可能是这样。我希望将所有定位都保留在 Sass 中并稍微伸展一下，但我会将它移到 Javascript 函数中。

【解决方案2】：

现在有点老了，但我最近也在做类似的事情——在这里我使用一个数组来循环不同类别的按钮并相应地附加样式。请注意，代码 sn-p 中存在未声明的变量。

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：