¿Cómo leer esto menos CSS?

Question

Estoy tratando de averiguar la cuadrícula sin marco sin marco de Joni Korpi (http://framelessgrid.com/) Y me cuesta leer el archivo .less que tiene. Tengo una comprensión básica de que menos usa variables, por lo que conozco columna = 48 y canal = 24 y eso es todo.

¿1Cols = 1 * (48 + 24) - 24)/ 12?

Lo que no entiendo es @1col: @1cols; y .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }

¿Alguien puede ayudar?

https://github.com/jonikorpi/frameless/blob/master/frameless.less

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels


//
// Column-widths in variables, in ems
//

 @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
 @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
 @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
 @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
 @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
 @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
 @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
 @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
 @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;


//
// Column-widths in a function, in ems
//

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

Answer 1

@1cols etc son solo nombres variables. Nombres variables en less se les permite comenzar con números.

@1col: @1cols;

Eso es solo hacer el dicho de esa variable @1col es igual a la variable @1cols establecido anteriormente. Presumiblemente, "1col" porque 1 es singular, pero los otros son plurales, por lo que solo le da la opción de usar cualquiera @1col o @1cols ambos son el mismo valor.

@1cols: ( 1 * (@column + @gutter) - @gutter) / @em;

Eso es solo matemáticas. Si desea una sección que tenga 3 columnas de ancho, eso es 3 veces el (ancho de la columna + ancho de canalones) menos una canaleta.

.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}

Esa es una función de mezcla que toma un número variable de columnas con un parámetro predeterminado de 1. Puede usarlo así:

.my-class{
   .width(3);
}
/* these two are identical */
.my-class{
   width: @3cols;
}

El beneficio del primer método es que puede reemplazar 3 con una variable para que pueda usarla en otro lugar.

Answer 2

@ es un identificador variable ... similar a $ en Php.

Entonces, lo que está haciendo es definir una mezcla que es en algunos aspectos como una función, que toma el argumento @cols con un valor predeterminado de 1 Si no se proporciona ninguno. Esta mezcla luego establece el width propiedad CSS al valor de la expresión:

(@cols * (@column + @gutter) - @gutter) / @em;

Su @em El valor será el valor de 1EM en píxeles, creo. Entonces, si su tamaño de fuente base es 12, entonces @em = 12.

Tan lejos como el @1col: @1cols; eso es solo una conveniencia para que puedas usar @1col (singular) o @1cols (plural) y significan lo mismo.

Answer 3

Las otras respuestas explican bien qué hacen menos archivos, así que hablaré sobre su uso de @em.

Si lo haces

.some_class { 
    just_an_em: @em 
}

En su archivo .less, saldrá a

.come_class {
    just_an_em: 16em
}

en .css después de compilar. Esto parece deberse a que menos conserva unidades en la división, de modo que '16/@em 'da' 1em ', como se esperaba.