하나의 파일에 변수를 정의하십시오.

Question

CSS를 단순화하기 위해 LESS를 사용하기 시작했습니다. 하나의 파일에서 색상을 정의 할 수 있기를 원하기 때문에 어떤 파일이 참조되고 있는지 만 변경하여 여러 색상 구성표를 사용할 수 있습니다.

나는이 같은 시도 :

<link rel="stylesheet/less" href="/css/colours.less" /> 
<link rel="stylesheet/less" href="/css/styles.less" /> 

을하지만 난 styles.less 파일에 오류를 "변수가 정의되지 않았습니다"얻는다.

styles.less의 시작 부분에 import "/css/colours.less"을 사용하여이 문제를 "고칠 수"있지만 모든 하나의 덜한 파일에 대해이 작업을 수행해야하며 사용되는 파일을 변경하는 것이 훨씬 더 어려워집니다.

변수를 하나의 파일에 정의하고 다른 변수에서 사용하는 방법이 있습니까? 아니면 다른 파일의 시작 부분에 colours.less 파일을 자동으로 가져 오는 방법이 있습니까?

Answer 1

당신은 하나의 .css 파일로 .less 파일을 컴파일하고 모든 페이지에 한 번을 포함한다은 (즉, styles.less는 styles.css 컴파일). 그런 식으로 브라우저는 페이지를로드 할 때마다 CSS를 다시 컴파일하는 오버 헤드가 없습니다. 또한 .css 파일을 캐시 할 수 있습니다. 대신 추가

:

<link href="/css/colours.less" /> 
<link href="/css/styles.less" /> 
<link href="/css/forms.less" /> 
<link href="/css/widgets.less" /> 
...etc... 

그것은해야한다 :

<link href="/css/styles.css" /> 

그리고는 styles.less에, 당신은해야합니다

@import 'colours'; 
@import 'forms'; 
@import 'widgets'; 
...etc... 

을 그렇지 않으면, 여러에서 colours.less을 다시 사용하려는 경우 .less 스타일 시트,해야합니다. 각 스타일 시트에서210 개. 개발 목적

---

, 나는 유일한 변수 선언과 @import 문을 포함 하나, 차 .less 파일을 사용하는 것이 좋습니다. 그렇게하면 추가 스크립트가 추가되는 위치를 쉽게 찾을 수 있습니다. LESS를 사용하면 스타일 시트를 추가하거나 제거하여 코드를 체계적으로 정리할 수 있습니다.

... 
@import 'modules/events'; 
@import 'modules/foo'; //add another module 
... 

그것은 또한 그것을 만드는 :이 구조는 쉽게 이러한 새 모듈을 추가 할 때와 같이 새로운 스타일 시트를 추가 할 수 있습니다

// import statements 
@import 'core'; 
@import 'mixins'; 
@import 'lists'; 
@import 'buttons'; 

@import 'forms/form'; 
@import 'forms/search'; 
@import 'forms/contact-us'; 

@import 'modules/module'; 
@import 'modules/archive'; 
@import 'modules/events'; 

// variables 
@image-path: '/assets/images/'; 

@font: Helvetica, Arial, sans-serif; 

@black: #000; 
@dark-grey: #333; 
@grey: #888; 
@light-grey: #CCC; 
@white: #FFF; 
@red: #F00; 

: 예를 들어

, style.less 같은 것을 보일 수 있습니다 더 이상 사용하지 않으면 스타일을 제거하기가 쉽습니다. foo 모듈을 제거해야한다면 간단히 @import 'modules/foo'; 문을 제거하여 모든 foo 스타일을 쉽게 제거 할 수 있습니다.