2017-03-13 1 views
0

나는 온라인 어디서나이 답변을 찾을 수 없습니다.동일한 HTML에서 CSS와 LESS를 결합하는 것

나는 이미 내 사이트의 모든 CSS 코드를 작성 했으므로 그 코드를 LESS로 다시 작성할 시간이 없지만 LESS가 발견되어 특정 기능에 유용 할 수있는 방법을 발견했습니다. 예를 들어 HTML 페이지의 양식을 예를 들어 편집하고 싶지만 다른 모든 것은 CSS로 작성했습니다. 두 가지를 결합 할 방법이 있습니까? HTML 페이지의 특정 부분에 CSS가 영향을 미치고 별도의 파일 두 개를로드해도 다른 사람에게 영향을 미치지 않을 수 있습니까?

+0

. LESS는 궁극적으로 단지 어쨌든 원시 CSS에 아래로 컴파일 : 당신은 두 가지를'gulp'와 결합하여이 기사를 유용하게 사용할 수 있습니다 : https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/ –

+0

CSS로 컴파일하기가 쉽습니다. grun과 같은 빌드 시스템 사용 아니면 꿀꺽 꿀꺽 마셔? 그렇다면 컴파일 된 LESS를 출력 파일의 CSS와 concat 할 수 있습니다. –

+0

Brian McCall 아직 LESS 코딩을 시작하지 않았지만 시도 할 것입니다. – AndrewY

답변

2

당신은 이해할 수는 있지만 완전히 혼란 스럽습니다. 실제로 얼마나 적은지는 혼란 스럽습니다. 당신이 모든 종류의 단축키, 변수 및 함수로 작성한 문서 인만큼 CSS로 컴파일됩니다.

그래서 LESS를 쓸 때, 당신은 CSS를 쓰고 있지만 속기가 많이 있습니다.

winLess 및 (내 선택 사항) Grunt을 포함하여 LESS를 CSS로 컴파일하는 다양한 방법이 있습니다. 나는 다른 사람들이 있다고 확신한다. 내가 Grunt 설정을하는 방식은 CSS를 컴파일 할 때 동시에 CSS를 압축 (압축)합니다. 또한 .less 파일을 저장하면 자동으로 컴파일됩니다.

less는 .less 파일로 저장됩니다. .css 파일을 (잘 ... "as") 컴파일하면 규칙에 따라 .css 파일을 편집하면 안됩니다. (재 컴파일) :)

여기서 LESS는 CSS 프리 프로세서 언어입니다 (SASS와 같은 다른 것들이 있습니다). 궁극적으로 간단히 CSS를 작성하기위한 속기 및 강력한 방법입니다.

몇 가지 포인트 :

  1. CSS 덜 실제로 유효합니다. 단순히 CSS 파일의 이름을 LESS로 바꾸고 컴파일하면 CSS 파일이 완성됩니다. (그런 다음 LESS 파일에 당신은 ... 아직 ... 모든 파일로 컴파일 "속기"기능의 장점을 복용 같은 CSS 파일을 시작할 수 있습니다.

  2. [@caesay에 의해 제안] 당신은 실제로 않을 것 html 파일로 LESS 파일을 포함합니다. 당신이 포함 않는 ... LESS는 거기에 CSS 파일로 컴파일하는 것입니다 기억하십시오. 물론

+0

CSS는 유효하지 않으므로 CSS 코드베이스를 더 적게 전환 할 때 파일 이름을 바꿀 수 있고 적은 양을 사용하여 새 스타일을 추가 할 수 있습니다. 풍모. – caesay

+0

네, 맞습니다. 실제로 때로는 기존 CSS를 LESS로 변환합니다. 이것이 내가 시작하는 방법입니다. CSS 파일을 사용하면 변환 프로세스를 설정 한 다음 CSS 파일에서 "lessing"을 시작할 수 있습니다. :) – mayersdesign