나는 꽤 큰 CSS 파일을 가지고 있는데, 더 적게 변환하고 싶습니다. CSS를 작성할 때 less.css를 알지 못했지만 이제는 여전히 기존 CSS를 사용하고 싶습니다.
자동으로 변환하는 데 도움이되는 도구가 있습니까?
나는 꽤 큰 CSS 파일을 가지고 있는데, 더 적게 변환하고 싶습니다. CSS를 작성할 때 less.css를 알지 못했지만 이제는 여전히 기존 CSS를 사용하고 싶습니다.
자동으로 변환하는 데 도움이되는 도구가 있습니까?
답변:
나는 실제로 지금 무언가를 발견했다 : http://leafo.net/lessphp/lessify/
기본 형식화를 수행합니다. 예 :
#header {
/* ... */
}
#header p {
/* ... */
}
에
#header {
/* ... */
p {
/* ... */
}
}
실제로 LESS 작업을 시작하기 위해 변환 도구가 필요하지 않습니다. LESS 구문은 CSS와 역 호환됩니다 . 모든 CSS 파일도 유효한 LESS 파일임을 의미합니다.
CSS를 가져 와서 이름을 LESS 파일로 바꾸십시오. 그런 다음 변경 사항과 함께 LESS 특정 기능을 사용하십시오. 파일을 많이 업데이트할수록 LESS 기능을 더 많이 사용할 수 있습니다.
SCSS와 10 개의 CSS 파일이있는 매우 큰 프로젝트에서도 똑같이했습니다. 모든 CSS를 SCSS로 다시 쓰는 것은 거의 불가능했습니다. 간단히 이름을 바꾼 다음 CSS 파일을 작업 할 때마다 코드에서 작은 리팩토링을 실행하여 믹스 인, 변수 등을 활용했습니다.
Least를 보셨습니까? Lessify보다 CSS를 변환하는 것이 훨씬 낫습니다. 특히 Lessify는 수업을 잘 최적화하지 않습니다. 브라우저 재설정을 생성 된 모든 믹스 인에 복사하여 중복 속성을 만듭니다. 아직 실험 단계에 있다는 것이 분명합니다. 유틸리티는 시맨틱을 결정할 수 없으므로 값을 표현식, 변수 또는 파라 메트릭 믹스 인으로 변환 할 수 없습니다.
최소는 더 나은 최적화 작업을 수행하고 더 기능적으로 보입니다. 심지어 의사 클래스를 처리합니다.
이러한 도구는 기존의 큰 CSS 파일 작업에 이상적입니다. CSS를 LESS로 변환하기 위해 권장하는 단계는 다음과 같습니다 (원래 CSS 파일의 사본을 유지해야합니다).
여러 추가 CSS 파일로 작업하는 경우 단일 CSS 파일로 병합하십시오. 이를 통해 모든 것이 손실되고 함께 최적화됩니다.
온라인 CSS 정리 유틸리티를 통해 결과 CSS 코드를 실행하십시오. cleancss : http://www.cleancss.com/에서 좋은 결과를 얻었습니다 . 이것은 LESS 변환기에 걸리지 않는 불필요한 여분의 마크 업을 제거합니다.
@Media 및 CSS 파일에있는 모든 스타일 재설정을 제거하십시오. 문제가 발생하거나 중복성이 발생할 수 있습니다. 재설정을 별도의 파일에 보관하는 것이 좋습니다.
결과 CSS 파일을 Least에 붙여 넣고 짐승을 지켜보십시오.
재설정 및 @screen을 다시 소개하십시오.
이제 모든 속성을 살펴보고 리팩토링에 적합한 후보를 찾아서 LESS 변수와 표현식으로 바꿉니다. CSS 색상 및 글꼴 속성은 가장 쉽게 분해 할 수있는 속성이며 간단한 전역 검색 및 바꾸기가 잘 작동합니다. 마지막으로 단일 파일을 더 작은 논리 파일로 분할할지 여부를 결정할 수 있습니다. 프로세스로 인해 파일을 다른 방식으로 재구성 할 수 있습니다.
저는 Least의 저자가 아니며 비슷한 도구를 찾는 사람에게 세상에 알리기로 결정했습니다.
@import
합니까? @import
LESS 파일을 컴파일 할 때 LESS가 명령문 을 구문 분석 하고 모든 스타일 시트를 단일 CSS로 통합 할 수 있다고 생각했습니다 . 깔끔하게 정리 된 모든 CSS를 하나의 거대한 스타일 시트로 덤프하여 LESS로 변환하는 것은 유지 보수성을위한 한 걸음이 될 것 같습니다.
변환기가 많은 코드로 수행하려는 작업을 알 수있는 방법이 없다고 생각합니다.
예를 들어, 어떤 변수를 사용하고 싶은지 반드시 알 필요는 없습니다. 또는 믹스 인 또는 함수를 생성하는 방법.
나는 이것으로 수동으로해야한다고 생각합니다.
검색 및 교체는 어떻습니까?
가지고 color:#ffffff
있고 그것을 바꾸고 싶다면@color
검색 color:#ffffff
하거나 color : #ffffff
로 바꿉니다 @color
.
나는 보통이 도구들을 믿지 않습니다.
또는 그것을 처리하는 정말 간단한 PHP 스크립트를 작성할 수 있습니다.
업데이트 1 :
또는 http://nex-3.com/posts/96-scss-sass-is-a-css-extension 을 사용하여 덜 사용할 수 있으며 변환기 도구가 있습니다.
이 사이트를보십시오 : css2less.cc
입력 할 때 CSS를 LESS로 변환합니다.