CSS 전처리 비교 대 Sass 대 LESS
CSS Preprocessor, LESS, Sass, Stylus 및 Swith CSS가 몇 가지 있습니다.. CSS 전처리 기, 이전에 자주 언급했듯이, CSS를 더욱 강력하고 체계적이며 생산적으로 제작하는 것을 주된 목적으로합니다. 그러나, 문제는 그들 중 누구가 일을 가장 잘하는지입니다.?
음, 물론, 우리는 그들 각각을 살펴 보지 않을 것이며, 대신에 우리는 인기있는 두 가지를 비교할 것입니다. 싫증나고 덜합니다.. 결정하기 위해, 우리는 7 가지 요소로 두 가지를 비교할 것입니다. 동점 일 경우, 둘 다 1 점을 받게됩니다..
의 시작하자.
설치
매우 근본적인 단계부터 시작합시다., 설치. Sass와 LESS는 서로 다른 플랫폼에 기반을두고 있으며 Sass는 Ruby에서 실행되고 LESS는 JavaScript 라이브러리입니다 (이 라이브러리는 였다 실제로 루비에도 내장되어있다. 처음에).
Sass : Sass가 작동하려면 Ruby가 필요합니다. Mac의 경우 미리 설치되어 있지만 Windows의 경우 Sass로 게임을 시작하기 전에 설치해야합니다. 또한 Sass는 터미널이나 명령 프롬프트를 통해 설치해야합니다. 장소에서 사용할 수있는 몇 가지 GUI 응용 프로그램이 있지만 무료는 아닙니다.
적게: LESS는 JavaScript를 기반으로하므로 LESS는 JavaScript 라이브러리와 HTML 문서를 연결하는 것만 큼 쉽습니다. 또한 CSS에 대한 LESS 컴파일에 도움이되는 몇 가지 GUI 응용 프로그램이 있으며 그 중 대부분은 무료이며 실적이 뛰어납니다 (예 : WinLess 및 LESS.app)..
결론: LESS가 분명히 선두에 있습니다..
확장 기능
Sass와 LESS 모두 웹 개발을보다 빠르고 쉽게 할 수있는 확장 기능을 제공합니다..
Sass: 지난 게시글에서 우리는 현재 Sass 기반 확장 인 Compass에 대해 논의했습니다. 나침반에는 더 짧은 시간에 CSS3 구문을 작성하는 많은 Mixins가 있습니다..
그러나 컴퍼스는 CSS3 Mixins를 넘어 헬퍼, 레이아웃, 타이포그래피, 그리드 레이아웃 및 스프라이트 이미지와 같은 매우 유용한 기능을 추가했습니다. 또한 갖는다 config.rb 파일에서 CSS 출력 및 기타 기본 설정을 제어 할 수 있습니다. 즉, Compass는 Sass와 함께 웹 개발을하는 올인원 패키지입니다..
적게: LESS에는 몇 가지 확장 기능이 있지만 Compass와는 달리 한 곳에서 필요한 모든 기능을 제공하므로 분리되어 있으며 각기 다른 개발자가 빌드합니다. 노련한 사용자에게는 문제가되지 않지만 LESS로 막 시작한 사람들에게는 워크 플로우에 적합한 올바른 확장을 선택하는 데 시간이 필요합니다..
다음은 프로젝트에 포함해야 할 몇 가지 확장명입니다.
- CSS3 믹스: 적은 요소들, Preboot, Less Mixins.
- 그리드: 960gs, Frameless, Semantic.gs
- 형세: Evenless
- 기타: 트위터 부트 스트랩
결론: 우리는 Sass와 Compass가 위대한 듀오이고 Sprite 이미지 기능이 정말로 kickass이기 때문에 Sass에 대한 한 점을 여기에 동의해야한다고 생각합니다..
언어
모든 CSS 전처리 기는 자체 언어를 가지고 있으며 대부분 공통적입니다. 예를 들어, Sass와 LESS는 둘 다 Variables를 가지고 있지만, Sass가 $ 서명하는 동안 덜 서명하는 동안 @ 기호. 그들은 여전히 똑같은 일을합니다. 상수 값 저장.
아래에서는 Sass와 LESS 모두에서 가장 일반적으로 사용되는 언어 중 일부를 살펴 봅니다 (경험에 따라).
중첩
중첩 규칙은 선택자를 반복적으로 작성하는 것을 피하기위한 좋은 방법이며 Sass와 LESS는 중첩 규칙에서 동일한 방식을 사용합니다.
Sass / Scss 및 LESS
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; ul 패딩 : 0; margin : 0;
그러나 Sass / Scss는이 방법을 우리가 개별 속성을 중첩 할 수있게함으로써 한 걸음 더 나아갔습니다. 여기 예제가 있습니다 :
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; ul 패딩 : 0; margin : 0; border : 스타일 : 솔리드; 왼쪽 : 너비 : 4px; color : # 333333; 오른쪽 : 너비 : 2 픽셀; color : # 000000;
이 코드는 다음 출력을 생성합니다..
nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; border-style : 솔리드; border-left-width : 4px; border-left-color : # 333333; border-right-width : 2px; border-right-color : # 000000; nav ul 패딩 : 0; margin : 0;
결론: 중첩 된 개별 속성은 훌륭한 추가 기능으로 간주됩니다. 모범 사례, 특히 우리가 DRY (Do not Repeat Yourself) 원리를 따른다면 더욱 그렇습니다. 그래서, 나는이 사건에서 어느 것이 더 잘하고 있는지 분명하다..
믹스 인과 셀렉터 상속
Sass와 LESS의 Mixins는 약간 다르게 정의됩니다. Sass에서는@mixin 지시어를 사용하지만 클래스 선택기를 사용하여 정의합니다. 다음은 그 예입니다.
Sass / Scss
@mixin border-radius ($ 값) border-radius : $ 값; nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; @include border-radius (10px);
적게
.border (@radius) border-radius : @radius; nav margin : 50px auto 0; 너비 : 788px; 높이 : 45px; .border (10px);
Sass와 LESS의 Mixins는 포함 하나의 룰 세트에서 다른 룰 세트로의 특성. Sass에서이 방법은 선택기 상속. 개념은 동일하지만 전체 속성을 복사하는 대신 Sass는 속성 및 값이 동일한 선택기를 확장하거나 그룹화합니다. @넓히다 지령.
아래의 예를 살펴보십시오.
.원 경계선 : 1 픽셀 고체 #ccc; border-radius : 50px; 오버플로 : 숨김; .avatar @extend .circle;
이 코드는 다음과 같이 나타납니다.
.원, .avatar 테두리 : 1 픽셀 고체 #ccc; border-radius : 50px; 오버플로 : 숨김;
결론: Sass는 뚜렷한 Mixins and Selectors Inheritance에 한 걸음 앞서 나가고 있습니다..
운영
Sass와 LESS는 모두 기본 수학 연산을 수행 할 수 있지만 때로는 다른 결과를 반환합니다. 이 임의 계산을 수행하는 방법을 확인하십시오.
Sass / Scss
$ margin : 10px; div margin : $ margin - 10 %; / * 구문 오류 : 호환되지 않는 단위 : '%'및 'px'* /
적게
@ 마진 : 10px; div margin : @margin - 10 %; / * = 0px * /
결론: Sass는이 경우 더 정확하게 수행하고 있습니다. %와 px가 같지 않으므로 오류를 반환해야합니다. 실제로, 나는 그것이 마치 다음과 같이 될 수 있기를 희망한다. 10px - 10 % = 9px.
오류 알림
오류 알림은 우리가 잘못하고있는 것을 보는 것이 중요합니다. 수천 줄의 코드와 혼돈의 어딘가에있는 작은 오류를 상상해보십시오. 깨끗한 오류 알림 신속하게 문제를 파악하는 가장 좋은 방법이 될 것입니다..
Sass:이 예제에서는 컴파일러를 실행하기 위해 명령 프롬프트를 사용하고 있습니다. Sass는 코드에 무효가있을 때마다 오류 알림을 생성합니다. 이 경우 6 행에서 하나의 세미콜론을 제거하므로 오류가 발생합니다. 아래 스크린 샷을 살펴보십시오..
처음이 알림을 보았을 때 나는 그것을 거의 이해할 수 없었습니다. 또한 Sass는 오류가있는 위치에서 약간 벗어난 것처럼 보입니다. 그것은 오류가 켜져 있다고 말했다. 7 호선, 6 대신.
적게: 동일한 오류 시나리오에서 덜 알림이보다 잘 제시되고보다 정확 해 보입니다. 이 스크린 샷을 살펴보십시오.
결론: 덜한 일로이 문제에 대한 더 나은 경험을 제공하고 손을 얻습니다..
선적 서류 비치
문서화는 모든 제품에있어 매우 중요한 부분입니다. 노련한 개발자조차도 선적 서류 비치.
Sass: 공식 사이트에서 문서를 살펴 본다면 개인적으로 도서관의 한가운데 있다고 느낄 수 있습니다. 문서는 매우 포괄적입니다. 그러나, 당신에게 중요한 것이면, 모양과 느낌은 독서에 대한 동기 부여가 아니며 배경은 흰색입니다..
프레젠테이션은 W3 문서 또는 WikiPedia와 훨씬 비슷합니다. 이것이 인터넷에서 문서를 표시하는 표준인지는 모르지만 유일한 방법은 아닙니다..
적게: 반면에, LESS 문서는 텍스트 설명이 너무 많지 않고 더 명확 해지고 예제로 바로 들어가게됩니다. 또한 좋은 인쇄술과 더 좋은 색 구성표를 가지고 있습니다. 이것이 내가 LESS가 처음부터 관심을 끌었던 이유 였고, 문서의 레이아웃과 프리젠 테이션으로 인해 더 빨리 배울 수 있다고 생각합니다..
결론: Sass는 좀 더 포괄적 인 문서를 가지고 있지만, LESS 문서 프레젠테이션은 더 좋습니다. 그래서이 문서를 넥타이라고 부를 수 있습니다..
최종 생각
나는 그것이 명백한 결론이라고 생각한다. Sass는 더 좋다. 총 점수는 5 대 3 덜. 그러나 이것이 LESS가 나쁘다는 것을 의미하지는 않습니다. 그들은 단지 더 잘 될 필요가 있습니다. 결국 최종 사용자가 선택한 선처리 프로세서를 선택하는 것은 최종 사용자의 결정입니다. 그것이 더 편안하고 생산적이라면, 그것은 그 목록에있는 승자입니다..
마지막으로,이 주제에 대해 염두에 두어야 할 점이 있으면 아래 의견란에 자유롭게 공유하십시오..
