mac - sass examples
Sass recorre los nombres de las clases empezando por el número (2)
HTML5 está bien con el inicio de ID''s y nombres de clase con dígitos actualmente, pero CSS no ( aquí hay información sobre todo esto ).
Sass probablemente no te permita crear un selector de CSS no válido, como .22ltr-porche así que tiene sentido. Aunque hay formas de evitarlo.
Puedes intentar esto:
@each $car in
bmwwhite
hondared
22ltr-porche
30ltr-cossworth
{
[class="#{$car}"] {
background:url(/img/cars/#{$car}.jpg) no-repeat
}
}
Eso creará un selector que se ve así [class="22ltr-porche"] y Sass está de acuerdo con eso.
Sin embargo, los selectores de atributos no calificados tienden a ser muy lentos. Debería intentar combinar el selector de atributos con algo con más especificidad. Aquí hay un ejemplo de Plunkr .
Estoy recorriendo una lista de nombres en sass y parece que el sass se está rompiendo cuando llega a un punto donde los nombres de las clases comienzan con un número. De hecho, cuando comenté los nombres de clase comenzando con un valor numérico, la compilación sass funcionó bien. Dicho esto, no puedo cambiar el nombre de los nombres de clase. ¿Cómo puedo hacer que funcione? Debajo está el código que intento:
@each $car in
bmwwhite
hondared
//22ltr-porche
//30ltr-cossworth
{
.#{$car} {
background:url(/img/cars/#{$car}.jpg) no-repeat
}
}
La clase que intentas generar no es válida. Ejecutarlo a través del validador dará este error:
En CSS1, un nombre de clase podría comenzar con un dígito (".55ft"), a menos que fuera una dimensión (".55in"). En CSS2, dichas clases se analizan como dimensiones desconocidas (para permitir adiciones futuras de unidades nuevas). Para que "22ltr-porche" sea una clase válida, CSS2 requiere que se escape el primer dígito ". / 32 2ltr-porche" [22ltr- porche]
Entonces, tenemos que escapar del número principal como dice:
@function escape_leading_numbers($s) {
$first-char: str_slice(#{$s}, 0, 1);
$found: index(''1'' ''2'' ''3'' ''4'' ''5'' ''6'' ''7'' ''8'' ''9'' ''0'', $first-char);
@return if($found, unquote(str-insert(str-slice(#{$s}, 2), "//3#{$first-char} ", 1)), $s);
}
$name: ''007'';
.#{escape_leading_numbers($name)} {
color: red;
}
@each $car in
bmwwhite
hondared
22ltr-porche
30ltr-cossworth
{
.#{escape_leading_numbers($car)} {
background:url(/img/cars/#{$car}.jpg) no-repeat
}
}
Salida:
.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;
}