less.css 파일 간 변수 공유

less.css 파일 간 변수 공유

---

내 CSS 스타일링을 단순화하기 위해 less.css를 사용하고 있습니다. 하나의 파일에서 변수를 선언하고 적은 수의 파일에서 사용을 공유하고 싶습니다. 이것이 가능한가? 예를 들면 :

english.less

@languageFloat : 왼쪽;

chart.less

div#footer a.web
{   
    display: block;
    float: @languageFloat;
    color: #cccccc;
    margin-right: 10px;
}

---

이를 수행하는 가장 좋은 방법은 @import모든 변수가 포함 된 LESS 파일을 사용하는 것입니다. @import키워드 구문은 다음과 같습니다 .

// For LESS file includes,
@import "lib.less";
// or
@import "lib"; // infers the .less extension

// and for plain CSS includes which are added but not parsed by LESS
@import "style.css";

이 @import구문은 LESS 및 CSS 파일을 하나의 단일 CSS 파일로 합성하기 때문에 사용자에게 CSS 파일을 제공하는 경우 특히 효과적입니다 (브라우저 내 less.js 구문 분석과 반대) . 변수를 포함하는 하나의 컨트롤러 LESS 파일을 고려한 다음 다른 LESS 및 CSS 파일을 사용하여 최종 결과가 브라우저에 제공되는 단일 파일이되도록 고려할 수 있습니다.

다음과 같이 간단 할 것이라고 생각합니다.

// Controller.less
@import "english.less";
@import "chart.less";

---

// 예 : BlueTheme.less Less 파일 ---------
@import "DefaultBlueParameters.less";<--- vars가 적은 테마 만

@import (less) "DefaultBase.css"; <--- 사용있어 DefaultBlueParameters.less vars

BlueTheme.css를 생성 합니다.

참고 URL : https://stackoverflow.com/questions/7756969/less-css-sharing-variables-across-files