이 적은 CSS를 읽는 방법?

Question

Joni Korpi의 프레임리스 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/프레임리스.리스 라코 디스

Answer 1

@1cols 등은 변수 이름 일뿐입니다.less의 변수 이름은 숫자로 시작할 수 있습니다. 라코 디스

그것은 변수 @1col가 이전에 설정된 변수 @1cols와 동일하다는 말을하는 것입니다.아마도 "1col"은 1이 단수이고 나머지는 복수이므로 둘 다 동일한 값인 @1col 또는 @1cols를 사용할 수있는 옵션을 제공합니다. 라코 디스

그냥 수학 일뿐입니다.3 열 너비의 섹션을 원하는 경우 (열 너비 + 여백 너비)에서 여백 1 개를 뺀 값의 3 배입니다. 라코 디스

이것은 기본 매개 변수가 1 인 가변 개수의 열을 취하는 믹스 인 함수입니다. 다음과 같이 사용할 수 있습니다. 라코 디스

첫 번째 방법의 이점은 3를 변수로 대체하여 다른 곳에서 사용할 수 있다는 것입니다.

Answer 2

@는 PHP의 $와 유사한 변수 식별자입니다.

그래서 그가하는 일은 어떤면에서 함수와 같은 mixin을 정의하는 것입니다. 이것은 제공되지 않는 경우 @cols의 기본값을 가진 인수 1를 취합니다.이 믹스 인은 width css 속성을 표현식의 값으로 설정합니다. 라코 디스

당신의 @em 값은 제 생각에 픽셀 단위로 1em의 값이 될 것입니다.따라서 기본 글꼴 크기가 12이면 @em= 12입니다.

@1col: @1cols;에 관해서는 단지 편의를 위해 @1col (단수) 또는 @1cols (복수)를 사용할 수 있으며 같은 의미입니다.

Answer 3

다른 답변은 LESS 파일이 수행하는 작업을 잘 설명하므로 그의 @em 사용에 대해 이야기하겠습니다.

해당하는 경우 라코 디스

.less 파일에서 라코 디스

컴파일 후 .css에서.예상대로 '16 / @ em '이'1em '을 제공하도록 LESS가 분할시 단위를 보존하기 때문인 것 같습니다.