LESS 변수를 사용할 때의 이점은 무엇입니까

Question

LESS 변수를 사용하여 다음과 같은 속성을 변경하면 어떤 이점이 있습니까?

@Margin-10: 10px; 
@Margin-12: 12px; 
@Margin-19: 19px; 
@Margin-110: 110px; 
@Margin-189: 189px; 
@Margin-115: 115px; 
@Margin-150: 150px; 
.................and so on. 

향후 변경되지 않을 변수를 작성하십시오.

@PullLeft: left; 
@PullRight: right; 

나는 위의 시나리오에 대한 변수를 사용하여 너무 많은 CSS 속성을 가지고 내 응용 프로그램에서 LESS을-고려해 다시하고 있습니다. 이 경우 변수를 사용하면 어떤 이점이 있습니까?

Answer 1

같은 값의 변수 이름을 사용하는 것이 좋습니다. 변수를 사용하는 목적은 변경이 필요한 경우 수정이 최소라는 것입니다. 예를 들어 변수 @ Container-width : 100px를 선언했으며 10 개의 파일에서이 변수를 사용하고 있습니다. 따라서 값을 200px로 변경하려면 값을 변경하지 않아도됩니다.

이 당신이 제안으로 변수 이름을 사용하여 두 가지 단점이 있습니다 :

1. 는 15 예컨대에 @ 여백-10라고하는 변수 @ 여백-10 값을 변경하려면 : (15)가 홀수 보일 것이다. 각 값에 대한 변수를 선언하는 경우는

는 이제 오는 (이 변수의 목적을 이행하지 않음) 여러 장소에 그것을 수정해야하기 때문에

는 변수로 선언 아무런 혜택이 없다 변수 이름 @PullRight 또는 @PullLeft. 다시 말하지만 값 (왼쪽, 오른쪽, 위, 아래)이 가변적이지 않기 때문에 이러한 이름을 사용하면 아무런 이점이 없습니다. 그래서 나는 변수를 만들지 않고 값을 그대로 사용하는 것이 좋습니다.

기능에 따라 변수 이름을 만듭니다. 명사와 동사를 사용하십시오.

Answer 2

나는 우리가 그 변수들로 집안에 망치를 가지고 있다고 생각한다. 그것들을 특별히 구체적으로 명명하는 것은 레이아웃의 의미 개념과 실제로 작동하지 않기 때문에 모두 문제가 있습니다. 왜냐하면 당신이 그 중 일부를 변경한다면, 곧 혼란이 곧 발생할 것이기 때문입니다. 그냥 상상해보십시오 :

@margin-189: 27px; 
@margin-115: 46px; 

예제처럼 입력하는 데 어려움이 있습니다. 나는 The Crying Game의 샤워 장면과 같은 것을 느낀다.

아니요,이 변수는 유일한 공구가 망치 인 경우의 예입니다. 네가 보이는 것은 모두 못입니다.

@container-margin-left: 36px; 
@panel-margin-left: 20px; 

적어도 귀하의 사이트가 스타일되는 방법을 이야기하고 값을 변경한다면, 그것은 즉시 유지 보수 열차 사고가 발생하지 것입니다 경우 :

더 정확한 더 의미 맛, 같은 수 있습니다 .

Answer 3

모든 언어에서 변수를 사용하는 것과 같습니다. 원할 때마다 간단히 변경할 수 있습니다.

이제 당신은 생각할 수 있습니다. 그들은 결코 바뀌지 않을 것이지만, 앞으로는 약간의 변경을 원할 것입니다. 일부 CSS를 변경하여 다른 프로젝트로 옮길 수도 있습니다. 변수를 사용하면 잠깐 할 수 있습니다.

또 다른 예입니다. 당신은 그래서 당신이 그것을 변경 780px

에 #page 폭을 변경하기로 결정 지금

#page { 
    width: 800px; 
} 
#content { 
width: 600px; 
} 
#sidebar { 
    width: 200px; 
} 

:의 당신이 CSS에 다음 코드를 가정 해 봅시다

#page { 
    width: 780px; 
} 
#content { 
width: 600px; 
} 
#sidebar { 
    width: 200px; 
} 

을 지금 당신은 문제가 있다면 - 당신을 무엇이 잘못되었는지를 전체 파일에서 볼 필요가 있습니다 (실제 파일에서는 위와 같이 쉽지 않습니다). 당신이 할 수

변수 사용 :

@page-width: 800px 
@content-width: 600px; 
@sidebar-width: @page-width - @content-width; 

그렇게 문제없이 값을 변경하거나 그 3 개 라인에 작은 수정을합니다.

그러나 질문의 ​​예에서 나는 그렇게해야한다고 생각합니다.당신이 정의하는 경우 :

@Margin-10: 10px; 
@Margin-12: 12px; 
@Margin-19: 19px; 

당신이 Margin-10 10 단위 마진 것을 기대하지만의 11 가정 해 봅시다에 대한 값을 변경하기로 결정하고, 당신은 할 수 있습니다

이

@Margin-10: 11px; 
@Margin-12: 15px; 
@Margin-19: 24px; 

그것은 완전히 엉망을 만들 것입니다, 사실이 파일을 보더라도 변수가 Margin-10이고 그 목적이 무엇인지 모르기 때문입니다. 이름에서 알 수있는 것보다 다른 가치를 지니고있어서 무엇을 기대해야할지 모르고 CSS 소스 전체를 다시 볼 필요가 있습니다.

변수는 유용하지만 쉽게 기억할 수 있고 그 목적을 알 수있는 이름이 있어야합니다. 가치가 변하기 때문에 변수 이름에 변수 값을 연결하면 안됩니다. 그러면 쓸모없는 이름이 생깁니다.

@Margin-10: 10em; 
@Margin-12: 12em; 
@Margin-19: 19em; 

그러나 나는 아직도 그것이 최선의 해결책이 아니다 생각 : 누군가가 그들의 값을 변경하지 않는하지만 EM을 사용하는 예를 들어, 자신의 단위를 변경하기 위해 그 여백을 정의하는 것이 위의 예에서 수도 있습니다 그러나

이 파일의 재사용을 제한하고 있기 때문에