escueladigital/EDgrid

Error en mixin grid

Closed this issue · 5 comments

Hola, estaba testeando y tome el html de ejemplo que hay en la documentación:

<div class="gallery">
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
  <div class="image"><!-- Una foto en la galeria--></div>
</div>

y en el sass esto:

.gallery {
@include grid('.image',1,1,2,3);
}

pero no me compila sass me sale este error:

{ [Error: test/styles.scss
Error: wrong number of arguments (5 for 3) for `grid'
on line 34 of test/styles.scss

@include grid('.image',1,1,2,4);
-----------^
]
status: 1,
file: '/opt/lampp/htdocs/www/EDgrid/test/styles.scss',
line: 34,
column: 12,
message: 'test/styles.scss\nError: wrong number of arguments (5 for 3) for grid\'\n on line 34 of test/styles.scss\n>> @include grid(\'.image\',1,1,2,4);\n -----------^\n', formatted: 'Error: wrong number of arguments (5 for 3) for grid'\n on line 34 of test/styles.scss\n>> @include grid('.image',1,1,2,4);\n -----------^\n',
messageFormatted: '\u001b[4mtest/styles.scss\u001b[24m\nError: wrong number of arguments (5 for 3) for grid\'\n on line 34 of test/styles.scss\n>> @include grid(\'.image\',1,1,2,4);\n -----------^\n', messageOriginal: 'wrong number of arguments (5 for 3) for grid'',
relativePath: 'test/styles.scss',
name: 'Error',
stack: 'Error: test/styles.scss\nError: wrong number of arguments (5 for 3) for `grid'\n on line 34 of test/styles.scss\n>> @include grid('.image',1,1,2,4);\n -----------^\n\n at options.error (/opt/lampp/htdocs/www/EDgrid/node_modules/node-sass/lib/index.js:283:26)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }

Al parecer solo me acepta un parametro más despues de la clase... porque asi si me compila:

.gallery {
@include grid('.image',2);
}

Hola, intenta agrupar los tamaños de los brealpoints entre paréntesis. Ej: @include grid('.image', (1,1,2,3), 1em);

@idcmardelplata efectivamente así ya me funciono, gracias.

De nada

Lo recomendable es pasar el segundo parámetro (breakpoints) como números separados por espacios. Así:

@include grid('selector', 1 2 3, 50px)

Es bueno saberlo, gracias por el dato :)