css - ¿Cómo extender @ desde otro archivo sass, o cómo lograr OOSASS?

sass import css

Question

Esta pregunta ya tiene una respuesta aquí:

• Falso error "variable indefinida" al compilar SCSS 4 respuestas

Mi pregunta es en realidad más amplia de lo que dice el título. Aquí es donde me encuentro con mi idea, pero estoy abierto a todo tipo de soluciones. Déjame explicar mi objetivo general.

Me gusta lo que los preprocesadores CSS pueden hacer. Me gustan las ideas de OOCSS y SMACSS. Soy nuevo en todo esto. Estoy tratando de actualizar mis métodos de diseño para incorporar de alguna manera el mejor de los mundos. Tengo un método teórico que funciona así:

• use solo nombres de clases semánticas o id''s o lo que sea
• definir módulos o patrones en alguna hoja de estilo común
• tienen hojas de estilo por página que extienden módulos de la hoja de estilos común a los selectores semánticos pertenecientes a una página determinada

Así que esto:

/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}

más esto:

/* homepage.scss */
@import modules.sass
#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

se convierte en esto:

/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}

No necesariamente he visto a nadie más hacer esto, pero me pareció una buena idea. El problema con el que me estoy encontrando en mi gran esquema es que @extend no parece funcionar desde un archivo importado. Alguien en otro lugar en SO dijo que no es posible. ¿Es esto cierto? Tengo Mixins para trabajar, pero el problema con ellos es que duplican cada atributo en el CSS de salida, lo que no parece ideal.

En realidad, soy más partidaria de LESS (sintaxis), pero eso ni siquiera se ha extendido en este momento. ¿No debería preocuparme por las ineficiencias de mixins o hay alguna forma de lograr lo que estoy pidiendo?

Nota: Estoy compilando automáticamente mi sass con una herramienta llamada Prepros. Cuando intento compilar código como el anterior, aparece un error similar.

ADVERTENCIA en la línea 11 de ... / sass / home.scss: "#intro" no pudo @extender "ruddy". El selector "rojizo" no se encontró.

Si solo copio el código de module.scss en homepage.scss, el problema desaparece.

Answer 1

El problema está aquí:

#intro {@extend ruddy; @extend fullwidth}
aside {@extend ruddy;}
.thing {@extend fullwidth;}

ruddy y fullwidth no son selectores. Si está ampliando la clase .ruddy , debe incluir el período, ya que es parte del selector.

#intro {@extend .ruddy; @extend .fullwidth}
aside {@extend .ruddy;}
.thing {@extend .fullwidth;}

Answer 2

No es cierto.

Puede declarar clases (incluido el % prefijado ) en un archivo, importar el primer archivo en el segundo archivo y extender las clases en el segundo archivo.

Ejemplo:

foo.sass

%foo
color: red

bar.sass

@import foo.sass
html
@extend %foo

Ejecute sass bar.sass bar.css .

aparece bar.css

html {
color: red; }

PD: para la experiencia SASS real, debe aprovechar Compass . La brújula es un grupo de cosas bajo un nombre:

• una herramienta útil para compilar SASS de manera eficiente;
• una gran biblioteca de prácticos estilos SASS para todas las ocasiones;
• un ecosistema de extensiones que puede instalar y usar en sus proyectos sin esfuerzo. Esto es lo que hace que SASS se destaque. No tiene que reinventar la rueda una y otra vez.

UPD Finalmente, ¡texto de error!

Te estás perdiendo el punto en el nombre de la clase. aside {@extend ruddy;} debe dejarse de aside {@extend .ruddy;} .