SASS/SCSS usando @extend en archivos individuales (diseño receptivo)

Estoy utilizando un enfoque de "móvil primero" en mi sitio, y estoy utilizando SCSS.SASS/SCSS usando @extend en archivos individuales (diseño receptivo)

tengo 3 hojas de estilo SCSS:

base.scss (servido para todos)
medium.scss (> = 768px ventana)
large.scss (> = 1024px de ventana)

Son servido de esta manera:

<link rel="stylesheet" href="/css/base.css" type="text/css" /> 
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" /> 
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />

En otras palabras, large.scss no tiene conocimiento de la CSS en base.scss, sin embargo, necesito extender una clase que reside en base.css, cuando está en large.scss.

¿Cómo puedo hacer esto?

Probé la separación de los elementos I necesidad de extender, tales como los botones, en una hoja de estilo separada, y luego usar @import 'buttons.scss'; en medium.scss, pero entonces todo el css en buttons.scss se representará en esa hoja también.

¿Hay alguna forma de exponer las clases en base.scss al "motor de renderizado" de SASS al compilar el css para que puedan usarse en medium.scss?

Fuente

2012-03-14 phobia

Tuve un problema similar recientemente. Mi solución: mixins.

_mixins.scss

@mixin someSpacing($base: 5px;){ 
    padding: $base; 
    margin: $base; 
}

Recuerde usar subrayado como prefijo, Sass suele compilar esos archivos. Así que ahora puedes simplemente importar _mixins.scss a tus archivos. Además, puede ampliar su mixin con parámetros para darle más flexibilidad.

p. Ej. base.scss

@import '_mixins.scss'; 

    .classA { 
     @include someSpacing(3px); 
    }

large.scss

@import '_mixins.scss'; 

    .anotherClass { 
     @include someSpacing(10px); 
    }

más detalles en referencia Sass: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

Fuente

2012-03-15 08:40:44 Rito

Esta respuesta es ahora desactualizado SASS/SCSS ahora admite cross-file '@ extend' cuando se usa' @ import' en ese archivo. – GeReV

Sí, esto es posible, pero en este caso los archivos scss son independientes entre sí, por lo que esos archivos no conocen las clases de los demás. – Rito

@GeReV Creo que @ Import copia todas las declaraciones de un archivo y las pega en otro. Tal vez eso no es deseable cuando solo quieres heredar una declaración? – Donato

necesitaba esto, así una vez. Le pregunté a Chris Eppstein hoy y me dijo:

Extend es por archivo de salida

Así que sí. @include es tu única esperanza.

Fuente

2012-07-17 00:47:31

en mi humilde opinión que se debe arreglar lo antes posible – dude

El enfoque correcto para su tarea es almacenar todos los selectores extensibles en parciales e importar esos parciales en sus archivos de salida.

proyecto/parciales/_extendables.Sass

.foo 
    color: red 

%bar 
    width: 50px

proyecto/base.sass

@import partials/extendables 

.baz 
    @extend .foo

proyecto/medium.sass

@import partials/extendables 

.quux 
    @extend %bar

Además, el enfoque que está utilizando para la organización de la capacidad de respuesta i muy desactualizado A menos que esté obligado a admitir alguna versión oxidada anterior de IE, debe utilizar el enfoque moderno:

Un solo archivo de salida.
Código organizado en muchos parciales pequeños, agrupados por componentes de página (menú, lista de noticias, noticias, etc.) y por función (técnica de pie de página adhesivo, tipografía), en lugar de agruparlo por consultas de medios o por donde los elementos aparecen en el página (por ejemplo, todos los códigos de encabezado, todos los códigos de la barra lateral).

consultas de medios de comunicación deben ser aplicados de forma granular, en su lugar, utilizando la función de medios Sass consulta burbujeante:

proyecto/parciales/componentes/_menu.sass

.menu 

    @media (max-width: 600px) 
    // Mobile styles for menu container 

    @media (min-width: 601px) 
    // Desktop styles for menu container 


.menu-item 

    @media (max-width: 600px) 
    // Mobile styles for menu items 

    @media (min-width: 601px) 
    // Desktop styles for menu items

Fuente

2014-09-12 13:10:52

SASS/SCSS usando @extend en archivos individuales (diseño receptivo)

Respuesta

Cuestiones relacionadas