Как читать этот LESS CSS? - PullRequest
Новая
       41

Как читать этот LESS CSS?

2 голосов
/ 17 января 2012

Я пытаюсь разобраться с бескаркасной сеткой безрамочного CSS Джони Корпи (http://framelessgrid.com/)), и мне трудно читать файл .less, который у него есть. Я понимаю, что LESS использует переменные, поэтому я знаю, столбец = 48 и желоб = 24 и это все.

1LS = 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;
}

Ответы [ 3 ]

4 голосов
/ 17 января 2012

@1cols и т. Д. Являются просто именами переменных.Имена переменных в less могут начинаться с цифр. 

@1col: @1cols;

Это просто говорит о том, что переменная @1col равна переменной @1cols, установленной ранее.Предположительно, «1col», потому что 1 - единственное число, а остальные - во множественном числе, так что это просто дает вам возможность использовать либо @1col, либо @1cols, причем оба они имеют одинаковое значение. 

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

Это просто математика.Если вы хотите раздел с шириной 3 столбца, это в 3 раза больше (ширина столбца + ширина желоба) минус один желоб. 

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

Это функция mixin, которая принимает переменное число столбцов с параметром по умолчанию, равным1. Вы можете использовать его следующим образом: 

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

Преимущество первого метода состоит в том, что вы можете заменить 3 на переменную, чтобы вы могли использовать ее в другом месте.

1 голос
/ 17 января 2012

Другие ответы прекрасно объясняют, что делают файлы LESS, поэтому я расскажу о его использовании @em.

Если вы делаете 

.some_class { 
    just_an_em: @em 
}

в вашем файле .less, он будет выдан 

.come_class {
    just_an_em: 16em
}

в .css после компиляции. Похоже, это связано с тем, что LESS сохраняет единицы при делении, поэтому «16 / @ em» дает «1em», как и ожидалось.

1 голос
/ 17 января 2012

@ - это идентификатор переменной ... похожий на $ в php.

Так что он определяет миксин, который в некоторых отношениях похож на функцию, которая принимает аргумент @cols со значением по умолчанию 1, если ничего не указано.Затем этот миксин устанавливает для свойства width css значение выражения: 

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

Ваше значение @em будет значением 1em в пикселях, как мне кажется.Поэтому, если ваш базовый размер шрифта равен 12, тогда @em = 12.

Что касается @1col: @1cols;, это просто удобство, так что вы можете использовать @1col (единственное число) или @1cols (множественное число) и они имеют в виду одно и то же.

...