CSS를 less.css로 변환하는 도구가 있습니까?


21

나는 꽤 큰 CSS 파일을 가지고 있는데, 더 적게 변환하고 싶습니다. CSS를 작성할 때 less.css를 알지 못했지만 이제는 여전히 기존 CSS를 사용하고 싶습니다.

자동으로 변환하는 데 도움이되는 도구가 있습니까?


내 편집 내용을 참조하십시오.
fatnjazzy

@Simone Carletti의 답변을 확인하고 실제로 조금 물어 보는 내용을 확장해야합니다. 파일 이름을 바꾸는 것 외에 실제 "변환"이 필요하지 않을 수 있습니다.
Su '

흥미롭지 만 CSS 파일의 크기를 줄이기 위해 33KB의 JS 코드 (less.js)를 추가 할 가치가 있는지 궁금합니다.
Marco Demaio

1
JavaScipt 컴파일러를 분명히 사용하고 있지 않습니다. 그리고 CSS의 크기는 내가 그것을 사용하는 이유가 아닙니다. 유지 보수성이 이유입니다. :)
js-coder

답변:



15

실제로 LESS 작업을 시작하기 위해 변환 도구가 필요하지 않습니다. LESS 구문은 CSS와 역 호환됩니다 . 모든 CSS 파일도 유효한 LESS 파일임을 의미합니다.

CSS를 가져 와서 이름을 LESS 파일로 바꾸십시오. 그런 다음 변경 사항과 함께 LESS 특정 기능을 사용하십시오. 파일을 많이 업데이트할수록 LESS 기능을 더 많이 사용할 수 있습니다.

SCSS와 10 개의 CSS 파일이있는 매우 큰 프로젝트에서도 똑같이했습니다. 모든 CSS를 SCSS로 다시 쓰는 것은 거의 불가능했습니다. 간단히 이름을 바꾼 다음 CSS 파일을 작업 할 때마다 코드에서 작은 리팩토링을 실행하여 믹스 인, 변수 등을 활용했습니다.


이것은 정말 좋은 지적입니다. 지금까지 답변은 현재 파일 을 LESS 워크 플로로 전환하는 데 사용할 수 있는지 여부뿐만 아니라 믹스 인 등의 질문의 "변환"부분에 중점을 둔 것으로 보입니다 .
Su '

6

Least를 보셨습니까? Lessify보다 CSS를 변환하는 것이 훨씬 낫습니다. 특히 Lessify는 수업을 잘 최적화하지 않습니다. 브라우저 재설정을 생성 된 모든 믹스 인에 복사하여 중복 속성을 만듭니다. 아직 실험 단계에 있다는 것이 분명합니다. 유틸리티는 시맨틱을 결정할 수 없으므로 값을 표현식, 변수 또는 파라 메트릭 믹스 인으로 변환 할 수 없습니다.

최소는 더 나은 최적화 작업을 수행하고 더 기능적으로 보입니다. 심지어 의사 클래스를 처리합니다.

http://toki-woki.net/p/least/

이러한 도구는 기존의 큰 CSS 파일 작업에 이상적입니다. CSS를 LESS로 변환하기 위해 권장하는 단계는 다음과 같습니다 (원래 CSS 파일의 사본을 유지해야합니다).

  1. 여러 추가 CSS 파일로 작업하는 경우 단일 CSS 파일로 병합하십시오. 이를 통해 모든 것이 손실되고 함께 최적화됩니다.

  2. 온라인 CSS 정리 유틸리티를 통해 결과 CSS 코드를 실행하십시오. cleancss : http://www.cleancss.com/에서 좋은 결과를 얻었습니다 . 이것은 LESS 변환기에 걸리지 않는 불필요한 여분의 마크 업을 제거합니다.

  3. @Media 및 CSS 파일에있는 모든 스타일 재설정을 제거하십시오. 문제가 발생하거나 중복성이 발생할 수 있습니다. 재설정을 별도의 파일에 보관하는 것이 좋습니다.

  4. 결과 CSS 파일을 Least에 붙여 넣고 짐승을 지켜보십시오.

  5. 재설정 및 @screen을 다시 소개하십시오.

  6. 이제 모든 속성을 살펴보고 리팩토링에 적합한 후보를 찾아서 LESS 변수와 표현식으로 바꿉니다. CSS 색상 및 글꼴 속성은 가장 쉽게 분해 할 수있는 속성이며 간단한 전역 검색 및 바꾸기가 잘 작동합니다. 마지막으로 단일 파일을 더 작은 논리 파일로 분할할지 여부를 결정할 수 있습니다. 프로세스로 인해 파일을 다른 방식으로 재구성 할 수 있습니다.

저는 Least의 저자가 아니며 비슷한 도구를 찾는 사람에게 세상에 알리기로 결정했습니다.


그 변환기는 이해하지 못 @import합니까? @importLESS 파일을 컴파일 할 때 LESS가 명령문 을 구문 분석 하고 모든 스타일 시트를 단일 CSS로 통합 할 수 있다고 생각했습니다 . 깔끔하게 정리 된 모든 CSS를 하나의 거대한 스타일 시트로 덤프하여 LESS로 변환하는 것은 유지 보수성을위한 한 걸음이 될 것 같습니다.
Lèse majesté

이러한 도구는 온라인에 존재하므로 외부 스타일 시트에 액세스 할 수 없도록 잘라서 텍스트 필드에 붙여 넣어야합니다.
Joel Rodgers

아, 실제로 링크를 클릭하지 않았습니다. 나는 그들이 데스크탑 도구라고 가정했다. 그때 말이 되네요.
Lèse majesté

5

변환기가 많은 코드로 수행하려는 작업을 알 수있는 방법이 없다고 생각합니다.

예를 들어, 어떤 변수를 사용하고 싶은지 반드시 알 필요는 없습니다. 또는 믹스 인 또는 함수를 생성하는 방법.

나는 이것으로 수동으로해야한다고 생각합니다.


동의했다. 컴퓨터가 그다지 적합하지 않다는 당신의 의도에 대해 어느 정도의 추론과 지식이 필요합니다. 일부 작업 을 자동화 하고 (@dotweb의 링크 참조) 색상 값과 같은 것을 단일 변수로 통합 할 수는 있지만 아마도 그럴 것입니다.
Su '

예, 그러나 LESS에서 CSS 로의 변환은 일대일 변환이므로 이론적으로 CSS에서 최적화 된 LESS 코드를 생성 할 수있는 알고리즘이 있습니다. 누군가가 그것을 작성하면됩니다.
trusktr

컴퓨터가 선택기를 함께 수집하고 그룹화하고 중첩하기 쉽기 때문에 믹스 인은 어느 쪽이든 갈 수 있습니다. 운 좋게도 이것은 전환에서 가장 지루한 부분이며 계산 가능합니다 (내 답변 참조). 그럼에도 불구하고 CSS의 계단식 특성으로 인해 원래 CSS와 다르게 렌더링 될 수 있습니다. 변수와 표현은 불가능합니다. 컴퓨터는 의도 나 의미를 결정할 수 없습니다. 컴퓨터에서 CSS의 너비 : 400이 실제로 너비 : pagewidth / 2 인 LESS를 어떻게 알 수 있습니까? 변환기가 색상과 글꼴을 변수로 변환 할 수 있습니다.
Joel Rodgers

@JoelRodgers, CSS의 계단식 특성으로 인해 "디 컴파일러"가 버그가 있음을 암시하는 이유는 무엇입니까? (분명히 디 컴파일러는 버그가있을 수 있지만 원칙적으로 용어의 재정렬이 의미를 바꿀지 여부를 말하기는 어렵지 않습니다).
피터 테일러

클래스 선언과 속성에 대해 이야기하고 있습니다. 정확히 같은 순서로 선언해야합니다. 그렇지 않으면 결과가 다릅니다. 잘못된 실수, 나는 믹스 인 대신 중첩 규칙을 의미했습니다.
Joel Rodgers

3

검색 및 교체는 어떻습니까?

가지고 color:#ffffff있고 그것을 바꾸고 싶다면@color

검색 color:#ffffff하거나 color : #ffffff로 바꿉니다 @color.

나는 보통이 도구들을 믿지 않습니다.

또는 그것을 처리하는 정말 간단한 PHP 스크립트를 작성할 수 있습니다.

업데이트 1 :
또는 http://nex-3.com/posts/96-scss-sass-is-a-css-extension 을 사용하여 덜 사용할 수 있으며 변환기 도구가 있습니다.


그래, 나는 이미 그것에 대해 생각했다. 그러나 그것은 매우 큰 파일이므로 이것이 가장 쉬운 방법이 될 것입니다. ;) mixins 등에 대해 생각하십시오.

또는 그것을 처리하는 정말 간단한 PHP 스크립트를 작성할 수 있습니다.
fatnjazzy

1
순수 CSS를 LESS 믹스 인 사용으로 안정적으로 변환하는 도구를 찾을 수 없습니다.
Alex

네 말이 맞아 자동 변수와 믹싱은 의미가 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.