2

Joni Korpi の Frameless CSS フレームレス グリッド ( http://framelessgrid.com/ )を理解しようとしていますが、彼が持っている .less ファイルを読むのに苦労しています。私は LESS が変数を使用することを基本的に理解しているので、列 = 48 とガター = 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;
}
4

3 に答える 3

4

@1colsなどは単なる変数名です。の変数名はless数字で始めることができます。

@1col: @1cols;

それは、変数が以前に設定された変数@1colと等しいと言っているだけです。@1colsおそらく、「1col」は 1 が単数であるためですが、他は複数であるため、どちらか@1colまたは@1cols両方を同じ値として使用するオプションが与えられます。

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

それはただの数学です。3 列幅のセクションが必要な場合は、(列幅 + ガター幅) の 3 倍から 1 ガターを引いた値になります。

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

これは、デフォルトのパラメーターが 1 の可変数の列を取る mixin 関数です。次のように使用できます。

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

最初の方法の利点は3、変数に置き換えることができるため、他の場所で使用できることです。

于 2012-01-17T03:17:35.080 に答える
1

他の回答は、LESSファイルが何をするかをうまく説明しているので、@em.

もしあなたがそうするなら

.some_class { 
    just_an_em: @em 
}

あなたの.lessファイルでは、それは

.come_class {
    just_an_em: 16em
}

コンパイル後の .css に。これは、予想どおり、「16/@em」が「1em」になるように、LESS が除算時に単位を保持するためと思われます。

于 2012-01-17T14:17:53.053 に答える
1

@は変数識別子です... php.ini に似ています$。

したがって、彼がしていることは、いくつかの点で関数のような mixin を定義することです。これは、何も指定されていない場合@colsのデフォルト値を持つ引数を取ります1。次に、この mixin はwidthcss プロパティを式の値に設定します。

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

あなたの@em値は、ピクセル単位の1emの値になると思います。したがって、ベースの font-size が 12 の場合、@em= 12 です。

便利な限り、（単数）または（複数）@1col: @1cols;を使用でき、それらは同じことを意味します。@1col@1cols

于 2012-01-17T03:12:59.250 に答える