Question

我循环遍历sass中的名称列表，当它到达类名以数字开头的点时，sass似乎正在破碎。事实上，当我注释掉以数字值开头的类名时，sass编译工作正常。那说我不能重命名类名。我怎么能让它发挥作用？以下是我尝试的代码：

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

Answer 1

HTML5很适合现在使用数字开始ID和类名，但CSS不是（Here's some info about all this）。

Sass可能不会允许您创建无效的CSS选择器，例如.22ltr-porche，这样才有意义。虽然有办法解决它。

你可以试试这个：

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

这会创建一个看起来像[class="22ltr-porche"]和Sass is OK with that.

的选择器

这样的非限定属性选择器往往非常慢。您应该尝试将属性选择器与具有更多特异性的内容组合。这是example plunkr。

Answer 2

您尝试生成的课程无效。通过验证器运行它会出现此错误：

在CSS1中，类名可以以数字（“。55ft”）开头，除非它是一个维度（“。55in”）。在CSS2中，这些类被解析为未知维度（以允许将来添加新单元）为了使“22ltr-porche”成为有效类，CSS2要求第一个数字被转义为“。\ 32 2ltr-porche”[22ltr- porche]

所以，我们需要像它说的那样逃避领先数字：

.bmwwhite {
  background: url(/img/cars/bmwwhite.jpg) no-repeat;
}

.hondared {
  background: url(/img/cars/hondared.jpg) no-repeat;
}

.\32 2ltr-porche {
  background: url(/img/cars/22ltr-porche.jpg) no-repeat;
}

.\33 0ltr-cossworth {
  background: url(/img/cars/30ltr-cossworth.jpg) no-repeat;
}

输出：

{{1}}

http://sassmeister.com/gist/e07d3fd4f67452412ad0

Sass循环遍历以数字开头的类名

2 个答案: