CSS-Redundancy with LESS와 @import를 사용할 때

Question

나는 LESS의 아이디어와 개념을 정말 좋아합니다. 그러나 나는 버그를 우연히 만났습니다. 제가 꽤 오래 전 저자에게보고했지만 아직 어떤 피드백도받지 못했습니다. 어쩌면 나 자신이 잘못한 일을하고있는 것일 수도 있습니다. 이 유사합니다

내 application.less - 파일 :

@import "reset"; 
@import "config"; 
@import "header"; 
@import "forms"; 
[…] 

나는 내 CSS-선언의 더 나은 개요를 얻을 내 파일을 분할하는 @import 규칙을 사용하는 것이 가능하다는 것을 좋아한다. 그러나 가져온 모든 파일은 config.less-File 을 다시 가져와을 다시 가져와 거기에 정의 된 mixins 및 변수를 사용할 수 있어야합니다.

내가 운전하고있는 중복의 종류에 대해 이미 알고있을 것입니다 : config.less를 가져올 때마다 "output"은 application.css의 일부가됩니다.

구성 파일에는 약 200 줄의 코드가 들어 있습니다. 구성을 다시 가져와야하는 약 5 개의 파일 (컨트롤러 이름을 기반으로 함)로 CSS를 분할했기 때문에 100 % 중복되는 약 1000 줄의 CSS 코드가 생성됩니다.

내가 해결할 수있는 유일한 해결책은 내 파일을 분할하지 말고, 내가 정말로 피하고 싶은 것입니다.

Answer 1

이상적은 아니지만 실제로 이론적으로 가져 오는 파일에는 CSS가 필요하지 않습니다.

lib.less을 : 일반적으로, 당신은 당신의 CSS 출력에 기여하지 않는 변수와 동적 유지 mixin을 것

#colors { 
    @blue: #0011ff; 
    @red: #ee2222; 
} 
.button (@width: 10px) {...} 

main.less : 주요

@import "lib"; 

a { color: #colors[@blue]; } 

출력. css :

a { color: #0011ff; } 

#colors {} and .button이 경우 출력되지 않습니다.

Answer 2

라이브 웹 서버에 배포 할 때 개발 환경에서 코드를 분리 한 다음 병합하여 모든 추가 코드가 필요하지 않을 수도 있습니다.

Answer 3

. 대신 $을 사용하여 LESS 설정 파일에 동적 믹스 인을 사용할 수 있습니다. config.less에서

:

$mixin 
{ 
    a { color: @light; } 
    h2 { //etc. 
} 

header.less에서 :

@import "config"; 
.header 
{ 
    $mixin; 
} 

Source. 나는 또한 이것을 시도하고 그것을 작동합니다.

Answer 4

덜 지원됨 @import-once "stylename.less";