frameworks - queries - sass media query mixin

puntos de interrupción con rejilla limpia de borbón

Question

Estoy tratando de usar limpio para bourbon y tengo la mayoría de las cosas resueltas, pero estoy llegando a algunos obstáculos cuando se trata de crear los puntos de ruptura.

Prefiero hacer archivos sass separados para dispositivos móviles, tabletas, computadoras de escritorio y escritorios grandes y normalmente no utilizo burbujas para crear mis consultas de medios, ya que no me gusta cómo se crea una consulta de medios, sino que hace tonos a través del CSS. archivo. Pero hasta ahora solo puedo encontrar documentación sobre un método de burbujeo.

Artículo sobre cómo usar puntos de interrupción en limpio

Esto es lo que hice:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }

También probé esto, que actualiza el color bg pero no actualiza la cuadrícula visual:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }

Answer 1

De hecho, me di cuenta de esto, mi problema principal era solo cómo había organizado mis archivos .scss, pero aquí está cómo.

Estructura de archivos como esta:

@import ''bourbon/bourbon'';
@import ''variables'';
@import ''neat/neat'';

@import ''base'';

// Media Queries
@import ''mobile'';
@import ''tablet'';
@import ''desktop'';
@import ''largedesktop'';

Las variables deben ir antes de importar variables.

en _variables.scss agrega tus consultas de la siguiente manera:

$mobile-size:em(320);
$tablet-size:720px;
$desktop-size:em(960);
$largedesktop-size:em(1050);

// Bourbon Neat Breakpoints
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 8);
$desktop: new-breakpoint(min-width $desktop-size 12);
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);

Entonces (así es como me gusta organizar las cosas) creo un archivo scss para dispositivos móviles, tabletas, computadoras de escritorio y escritorios grandes e importo después de _base.scss. He ilustrado anteriormente cómo deberían estructurarse los archivos.

Dentro de cada uno, agregue su consulta de medios junto con los cambios de diseño necesarios.

así: _mobile.scss

@include media($mobile) {
    body {
        background: purple;
    }
}

Eso debería funcionar para ti.

Como dije, así es como lo hice, estoy seguro de que hay muchos más, pero quería que la gente supiera de una manera si tienen problemas :)

Answer 2

Tuve un problema similar con los puntos de interrupción y con la actualización de la cuadrícula. Una pista ligeramente diferente, sin embargo ...

Esto es lo que me ayudó. Esto no está en la documentación principal .

En la página de Neat GitHub , el equipo de thinkbot explica:

1. Necesita crear un archivo _grid-settings.scss

2. importarlo justo antes de importar limpio

   @import "bourbon/bourbon"; // or "bourbon" when in Rails
   @import "grid-settings";
   @import "neat/neat"; // or "neat" when in Rails

3. En el archivo _grid-settings.scss, importe los ayudantes limpios

   @import "neat/neat-helpers"; // or "neat-helpers" when in Rails
   
   // Define your breakpoints
   $tablet: new-breakpoint(max-width 768px 8);
   $mobile: new-breakpoint(max-width 480px 4);
   etc

Antes de agregar esta configuración, podía ver la cuadrícula, pero la cuadrícula no respondía a mis solicitudes de punto de interrupción para actualizar columnas o cambiar la posición del componente. Una vez que tuve esta configuración en su lugar, la grilla funcionó como esperaba.

Estoy usando CodeKit 2, si eso importa.

Answer 3

Para cualquiera que le preocupe, mi problema no era que tuviera un orden incorrecto de importaciones, sino cómo utilicé mis variables. Pensé que la función tomó una cuerda ...

Esto está mal:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width #{$desktop})

Esto es correcto:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width $desktop)