Come leggere questo meno CSS?

Question

Sto cercando di capire la griglia senza telai CSS senza telai di Joni Korpi (http://framelessgrid.com/) E sto facendo fatica a leggere il file .less che ha. Ho una comprensione di base che meno usa le variabili, quindi conosco colonna = 48 e grondaia = 24 e questo è tutto.

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

Quello che non capisco è @1col: @1cols; e .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }

Qualcuno può aiutare?

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 ecc. sono solo nomi variabili. Nomi variabili in less sono autorizzati a iniziare con i numeri.

@1col: @1cols;

Questo sta solo facendo dire quella variabile @1col è uguale alla variabile @1cols Impostato in precedenza. Presumibilmente, "1col" perché 1 è singolare, ma gli altri sono plurali, quindi ti dà la possibilità di usare entrambi @1col o @1cols Entrambi hanno lo stesso valore.

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

È solo matematica. Se si desidera una sezione che è larghezza di 3 colonne, è 3 volte la (larghezza della grondaia della colonna + grondaia) meno una grondaia.

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

Questa è una funzione mixin che prende un numero variabile di colonne con un parametro predefinito di 1. È possibile usarlo in questo modo:

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

Il vantaggio del primo metodo è che puoi sostituire 3 Con una variabile in modo da poterlo usare altrove.

Answer 2

@ è un identificatore variabile ... simile a $ in PHP.

Quindi quello che sta facendo è definire un mixin che è per alcuni aspetti come una funzione, che prende l'argomento @cols con un valore predefinito di 1 Se non viene fornito nessuno. Questo mixin quindi imposta il width Proprietà CSS al valore dell'espressione:

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

Tuo @em Il valore sarà il valore di 1EM nei pixel, penso. Quindi, se la dimensione del carattere di base è 12, allora @em = 12.

Per quanto riguarda il @1col: @1cols; è solo una comodità in modo da poter usare @1col (singolare) o @1cols (plurale) e significano la stessa cosa.

Answer 3

Le altre risposte spiegano bene cosa fanno meno file, quindi parlerò del suo uso @em.

Se fate

.some_class { 
    just_an_em: @em 
}

Nel tuo file .less, uscirà a

.come_class {
    just_an_em: 16em
}

in .css dopo la compilazione. Questo sembra essere dovuto al fatto che meno conserve unità sulla divisione in modo che '16/@em 'dà' 1em ', come previsto.