Sass循环遍历以数字开头的类名 [英] Sass looping through class names starting with number

问题描述

我正在遍历sass中的名称列表，当sass到达类名称以数字开头的位置时，sass似乎正在中断。实际上，当我注释掉以数字值开头的类名时，sass编译工作正常。那就是说我不能重命名类名。我该如何运作？以下是我正在尝试的代码：

I am looping through a list of names in sass and it seems that the sass is breaking when it arrives at a point where the class names starts with a number. Infact when i commented out the class names starting with a numeric value, the sass compilation worked fine. That said i cannot rename the class names. How I can make it work? Below is the code im trying:

@each $car in
  bmwwhite
  hondared
  //22ltr-porche
  //30ltr-cossworth
 {
  .#{$car} {
    background:url(/img/cars/#{$car}.jpg) no-repeat 
  }
 }

推荐答案

如今，HTML5可以使用以数字开头的ID和类名作为HTML5很好，但是CSS并非如此（此处是所有这些信息）。

HTML5 is fine with starting ID's and class names with digits these days, but CSS isn't (Here's some info about all this).

Sass可能不允许您将创建无效的CSS选择器，例如 .22ltr-porche ，这样才有意义。

Sass probably wouldn't allow you to create invalid CSS selector, such as .22ltr-porche so that makes sense. Though there are ways to get around it.

您可以尝试以下方法：

@each $car in
  bmwwhite
  hondared
  22ltr-porche
  30ltr-cossworth
 {
  [class="#{$car}"] {
    background:url(/img/cars/#{$car}.jpg) no-repeat 
  }
 }

这将创建一个如下所示的选择器： [class = 22ltr-porche] 和这样就可以了。

That will create a selector that looks like this [class="22ltr-porche"] and Sass is OK with that.

不合格的属性选择器，例如这往往很慢。您应该尝试将属性选择器与更具体的内容结合使用。这是一个示例plunkr 。

Unqualified attribute selectors like this tends to be very slow though. You should try to combine the attribute selector with something with more specificity. Here's an example plunkr.

这篇关于Sass循环遍历以数字开头的类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！