Comment lire ce moins CSS?

Question

J'essaie de comprendre la grille CSS sans cadre sans cadre de Joni Korpi (http://framelessgrid.com/) Et j'ai du mal à lire le fichier. J'ai une compréhension de base que moins utilise des variables, donc je sais colonne = 48 et gouttière = 24 et c'est tout.

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

Ce que je ne comprends pas, c'est @1col: @1cols; et .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }

Quelqu'un peut-il aider?

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 ne sont que des noms de variables. Noms variables dans less sont autorisés à commencer par des chiffres.

@1col: @1cols;

C'est juste de faire le dicton cette variable @1col est égal à la variable @1cols set plus tôt. Vraisemblablement, "1col" parce que 1 est singulier, mais les autres sont pluriels, donc cela vous donne simplement la possibilité d'utiliser l'un ou l'autre @1col ou @1cols Les deux ont la même valeur.

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

C'est juste des mathématiques. Si vous voulez une section de 3 colonnes de largeur, c'est 3 fois la (largeur de colonne + largeur de gouttière) moins une gouttière.

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

C'est une fonction de mixin qui prend un nombre variable de colonnes avec un paramètre par défaut de 1. Vous pouvez l'utiliser comme ceci:

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

L'avantage de la première méthode est que vous pouvez remplacer 3 avec une variable afin que vous puissiez l'utiliser ailleurs.

Answer 2

@ est un identifiant variable ... similaire à $ en php.

Alors ce qu'il fait, c'est définir un mixin qui est à certains égards comme une fonction, qui prend l'argument @cols avec une valeur par défaut de 1 Si aucun n'est fourni. Ce mélange définit ensuite le width Propriété CSS à la valeur de l'expression:

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

Ton @em La valeur sera la valeur de 1EM dans les pixels, je pense. Donc, si votre taille de police de base est 12 alors @em = 12.

Jusqu'au @1col: @1cols; c'est juste une commodité pour que vous puissiez utiliser @1col (singulier) ou @1cols (pluriel) et ils signifient la même chose.

Answer 3

Les autres réponses expliquent bien ce que font moins de fichiers, donc je vais parler de son utilisation de @em.

Si tu fais

.some_class { 
    just_an_em: @em 
}

Dans votre fichier.

.come_class {
    just_an_em: 16em
}

dans .css après la compilation. Cela semble être dû au fait que moins de préservation des unités lors de la division afin que '16 / @ em 'donne' 1em ', comme prévu.