Estoy usando saas a través de la brújula y la dependencia de blueprint/grid. Quiero ser capaz de establecer el ancho de una columna mediante una consulta de los medios de comunicación, así:Cómo usar la lógica de SASS dentro de una consulta de medios de CSS 3
// /src/partials/_base.scss
$blueprint-grid-columns: 18;
@media screen and (max-width: 1024px){
// If screen res is 1024 or lower, then set grid width to 46px
$blueprint-grid-width: 46px;
}
@media screen and (max-width: 1280px){
$blueprint-grid-width: 50px;
}
@media screen and (max-width: 1600px){
$blueprint-grid-width: 76px;
}
$blueprint-grid-margin: 8px;
Esto compila en /stylesheets/screen.css:
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1600px) {}
Sin embargo, los valores de la el resto de screen.css no se establece en consecuencia. Supongo que tiene sentido, ya que la variable $ blueprint-grid-width se lee en tiempo de compilación, no en tiempo de ejecución.
¿Hay alguna forma de mostrar un diseño con diferentes anchos de cuadrícula mediante una consulta de medios para obtener una resolución de pantalla?
respecto de la emisión de github:
https://github.com/chriseppstein/compass/issues/302
Hasta ahora, la única solución que se me ocurre es compilar 3 hojas de estilo separadas - 1 para cada resolución de la pantalla. Luego copie y pegue el css de salida en una hoja de estilo dentro de las consultas de medios. Eso apesta. – Adam
Si fuera más hábil con el rubí, personalizaría el compilador para juntar las tres hojas de estilo en una sola. – Adam