これを読む方法はありませんcss？

Question

私はJoni KorpiのFrameless CSSフレームレスグリッド（http://framelessgrid.com/）を見つけようとしています。私は彼が持っている.lessファイルを読みにくいです。私はLESSが変数を使用するので、column = 48とgutter = 24を知っているという基本的な理解があります。

1cols = 1 *（48 + 24） - 24）/ 12？私は理解していない何

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

で誰も助けることができますか？

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などは単なる可変名です。 lessの変数名は数字で始めることができます。ちょうど変数@1col前に設定した変数@1colsに等しいことを言って作っている

@1col: @1cols; 

。おそらく、1は単数形なので1colだが、他は複数形なので、@1colまたは@1colsの両方を同じ値にするという選択肢がある。

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

これは単なる算数です。 3列幅のセクションが必要な場合は、（列幅+溝幅）の3倍から1溝分の3倍です。 1.のデフォルトパラメータを使用して列の可変数を取るミックスイン機能はあなたがこのようにそれを使用することができます

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

：

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

第一の方法の利点は、置き換えることができるということです変数に3を入れて、他の場所で使用することができます。

Answer 2

@ PHPの$に似た変数識別子...です。

それでは、関数のようないくつかの点では、引数が@colsで、何も提供されていない場合はデフォルト値の1を持つmixinを定義しています。このミックスインは、その式の値にwidth CSSプロパティを設定します。

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

あなた@em値は、私が思うピクセル単位で1EMの値になるだろう。だからあなたのベースフォントサイズは、限りちょうど利便@1col: @1cols;ザッツなど= 12

12そして@emあなたは@1col（単数）または@1cols（複数）を使用することができますし、彼らは同じことを意味するようであれば。

Answer 3

他の回答は、LESSファイルのしくみをうまく説明するので、@emの使用についてお話します。

あなたの中

.some_class { 
    just_an_em: @em 
} 

を行う場合。コンパイル後にファイルが少なくても、

.come_class { 
    just_an_em: 16em 
} 

になります。これは、LESSが除算時にユニットを保存し、'16/@ em 'が' 1em 'を期待通りに与えるためです。