imports - sass[]

Error "variable indefinida" falso positivo al compilar SCSS

Question

Obteniendo un mensaje de error al compilar mi SCSS usando la gema brújula brújula.

run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out:     error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out:    create css/generated/partial/catalog.css 
out:    create css/generated/partial/base.css 
out: overwrite css/generated/screen.css

Mi screen.scss importa parciales como este:

@import "partial/base";
@import "partial/catalog";

En mi base parcial tengo el $paragraphFont definido.

$paragraphFont: ''Lucida Sans'', arial;
$regularFontSize: 14px;

Y en catalog.scss lo uso:

.product-view #price-block {
    p {
        font-weight: normal;
        font-family: $paragraphFont;
        ....
    }
}

Lo extraño es que el CSS se compila muy bien, y $paragraphFont está poblado correctamente. Así que no sé por qué el compilador se queja de un error.

Answer 1

En tu registro de compás, dice:

A)  create css/generated/partial/catalog.css 
B)  create css/generated/partial/base.css

Estos deben ser:

A)  create css/generated/partial/base.css
B)  create css/generated/partial/catalog.css 

Supongo que tu screen.scss tiene instrucciones de importación incorrectas.

Answer 2

Está generando archivos que no necesitan ser generados.

• screen.scss -> screen.css
• base.scss -> base.css
• catalog.scss -> catalog.css

El archivo de catálogo se está compilando por sí mismo. Como no está importando base.scss, las variables no están establecidas. Su archivo screen.scss genera como espera porque está importando toda la información necesaria.

Lo que desea hacer es cambiar el nombre de sus parciales para comenzar con un guión bajo para evitar que se compilen solos:

• screen.scss -> screen.css
• _base.scss (no compilado)
• _catalog.scss (no compilado)

Answer 3

Recomiendo examinar las estructuras organizativas comunes del directorio Sass. Mi favorito personal es The 7-1 Pattern .

La naturaleza del mismo divide los elementos comúnmente utilizados en otros archivos, que son importados por un main.scss para eliminar redundancias.

Pero también, en primer lugar, preste atención a la respuesta de @ cimmanon, ya que aborda más directamente su pregunta.

Answer 4

Una explicación más simple que probablemente se ajuste a la mayoría de los usuarios aquí:

Estás compilando todos tus sass, cuando solo necesitas compilar el archivo de nivel superior

sass comúnmente se modulariza de la siguiente manera:

toplevel.scss
  include child1.scss
  include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
  include child3.scss (that also uses variables from child1.sass but does not import child1.sass)

Al compilar, solo necesita compilar toplevel.scss. Compilar otros archivos por su cuenta (p. Ej., Child2.scss) generará errores sobre variables indefinidas.

En tu gulpfile:

gulp.task(''sass'', function () {
  gulp
    .src(''./static/scss/toplevel.scss'') // NOT *.scss
    .pipe(sass())
    // Rest is just decoration
    .pipe(prefixer(''last 2 versions'', ''ie 9''))
    .pipe(gulp.dest(''./static/css/dist''))
    .pipe(livereload(livereloadServer));
});