Sass를 이해하는 간단하고 쉬운 가이드
얼마 전 Thoriq Firdaus는 Sass를 시작하는 데 대한 훌륭한 기사를 작성했는데,이 기사에서는이 매우 유용한 CSS 전처리 언어를 설치하고 사용하는 방법을 보여주었습니다 (시작하기 전에 확인하는 것이 좋습니다).
이 기사에서 저는 Sass로 할 수있는 것에 대해 더 많은 통찰력을 주었고, 개발자들이 더 나은 모듈 식 CSS 코드를 만들기 위해 매일 그것을 사용하는 방법에 대해 좀 더 깊이있는 통찰력을 줄 것이라고 생각했습니다. 원하는 섹션으로 건너 뜁니다.
- 무역 도구
- 변수
- 중첩
- 룰셋 확장하기
- 믹스 인
- 자리 표시 자 선택자
- 운영
- 기능들
무역 도구
Thoriq는 명령 줄에서 Sass를 사용하는 방법을 보여주었습니다. 쉿 - 시계 명령.
GUI 툴을 선호한다면 Sass 컴파일을위한 웹 개발자 툴인 코드 킷 (Codekit)을 연결하고, 자동 접두어 붙이기 등을 할 수 있습니다. Prepros는 모든 시스템에서 사용할 수있는 매우 유능한 또 다른 응용 프로그램입니다. 둘 다있다. 유료 애플리케이션 장기적으로 사용한다면 가치가 있습니다..
Sass를 해보고 싶다면 아무것도 지불하지 않고 당신은 터미널이나 코알라 (여기에 우리의 리뷰입니다)를 사용할 수 있습니다. 무료 콜 플랫폼 기능을 갖춘 앱으로, 프리미엄 대상과 비교할 수 있습니다.
변수
머리를 감쌀 때 가장 먼저해야 할 일 중 하나는 변수입니다. PHP 나 다른 유사한 코딩 언어 배경에서 온다면 이것은 당신에게 제 2의 천성이 될 것입니다. 변수는 재사용 가능한 비트 및 재사용 가능한 정보를 저장, 예를 들어 색상 값처럼 :
$ primary_color : # 666666; .button color : $ primary_color; .important color : $ primary_color;
여기서 유용하지는 않지만 3000 줄의 코드가 있다고 상상해보십시오. 색 구성표가 변경되면 CSS의 각 색 값을 바꿔야합니다. Sass와 함께하면됩니다. 값을 수정하다 ~의 $ primary_color 변수와 그것으로 끝내라..
변수는 다음 용도로 사용됩니다. 글꼴 이름, 크기, 색 및 다른 정보 호스트 저장. 더 큰 프로젝트의 경우 모든 변수를 별도의 파일로 추출 할 가치가 있습니다 (곧 완료 될 방법을 살펴 보겠습니다). 이것이 할 수있는 일은 전체 프로젝트를 다시 칠하고 글꼴 및 기타 주요 측면을 변경하는 것입니다. 실제 CSS 규칙을 다룰 필요없이. 일부 변수 수정 만하면됩니다..
중첩
Sass가 제공하는 또 다른 기본 기능은 다음과 같습니다. 규칙을 중첩 할 수있는 능력. 탐색 메뉴를 작성한다고 가정 해 보겠습니다. 너는 항해하다 정렬되지 않은 목록, 목록 항목 및 링크가 포함 된 요소. CSS에서는 다음과 같이 할 수 있습니다.
#header nav l / * nav area에 대한 규칙 * / #header nav ul / * 메뉴에 대한 규칙 * / #header nav li / * 목록 항목에 대한 규칙 * / #header nav a / * Rules 링크 * /
셀렉터에서 우리는 많은 것을 반복하고 있습니다. 요소에 공통 뿌리가있는 경우 중첩을 사용하여 우리의 규칙을 훨씬 더 깔끔하게 작성하십시오..
위의 코드가 Sass에서 어떻게 보이는지 보여줍니다.
#header nav / * nav 영역의 규칙 * / ul / * 메뉴 규칙 * / li / * 목록 항목의 규칙 * / a / * 링크 규칙 * /
중첩은 매우 유용합니다. 스타일 시트 (많이)를 더 읽기 쉽게 만든다.. 적절한 들여 쓰기와 함께 중첩을 사용하면 매우 읽기 쉬운 코드 구조, 상당한 양의 코드를 가지고 있더라도.
중첩의 한 가지 단점은 불필요한 특이성으로 연결된다.. 위의 예에서 나는 #header nav a. 당신은 또한 #header nav ul li a 아마 너무 많을거야..
Sass에서는 규칙을 중첩하기 만하면되므로 매우 구체적입니다. 다음은 읽기 쉽고 명확하지 않습니다..
#header nav / * 탐색 영역의 규칙 * / ul / * 메뉴 규칙 * / li / * 목록 항목의 규칙 * / a / * 링크 규칙 * /
룰셋 확장하기
객체 지향 언어로 작업한다면 확장이 익숙 할 것입니다. 예제를 통해 가장 잘 이해할 수 있습니다. 서로 다른 약간의 변형 된 3 개의 버튼을 만들어 보겠습니다..
.버튼 표시 : 인라인 블록; color : # 000; 배경 : # 333; border-radius : 4px; 패딩 : 8px 11px; .button-primary @extend .button; background : # 0091C2 .button-small @extend .button; font-size : 0.9em; 패딩 : 3px 8px;
그만큼 .버튼 - 기본 과 .단추 작게 수업은 모두 .단추 클래스는 모든 속성을 가져 와서 자체 속성을 정의한다는 것을 의미합니다..
이것은 요소의 변형을 사용할 수있는 많은 상황에서 대단히 유용합니다. 메시지 (경고 / 성공 / 오류), 버튼 (색상, 크기), 메뉴 유형 등은 CSS 효율성을 높이기 위해 확장 기능을 사용할 수 있습니다..
확장에 대한 한 가지주의 사항은 미디어 쿼리에서 작동하지 않습니다. 예상대로. 이것은 조금 더 발전되었지만 자리 표시 자 선택자 이해 - 자리 표시 자 선택기는 특별한 종류의 확장으로 곧 논의 할 예정입니다..
믹스 인
Mixins은 선처리 사용자의 또 다른 특징입니다. Mixins는 재사용 가능한 룰 세트입니다. 공급 업체별 규칙 또는 단축 된 CSS 규칙에 완벽합니다..
호버 요소에 대한 전환 규칙을 만드는 방법은 다음과 같습니다.
@ 믹싱 호버 - 효과 -webkit-transition : 배경색 200ms; -moz-transition : 배경색 200ms; -o-transition : 배경색 200ms; 전환 : 배경색 200ms; a @include 호버 - 효과; .button @include hover-effect;
Mixins는 또한 변수를 사용하여 믹스 내에서 값을 정의한다.. 위의 예제를 다음과 같이 다시 작성할 수 있습니다. 전환의 정확한 시간을 제어 해주세요.. 예를 들어 버튼이 조금 느리게 전환되기를 원할 수 있습니다..
@mixin 마우스를 올리면 효과가 나타납니다 ($ speed) -webkit-transition : background-color $ speed; -moz-transition : background-color $ speed; -o-transition : background-color $ speed; 전환 : 배경색 $ 속도; a @include hover-effect (200ms); .button @include hover-effect (300ms);
자리 표시 자 선택자
자리 표시 자 선택기는 Sass 3.2와 함께 도입되었으며 생성 된 CSS 코드에서 약간의 부 풀림을 유발할 수있는 문제를 해결했습니다. 오류 메시지를 생성하는이 코드를 살펴보십시오.
.메시지 글꼴 크기 : 1.1em; 패딩 : 11px; border-width : 1px; border-style : 솔리드; .message-danger @extend.message; 배경 : # C20030; color : #fff; border-color : # A8002A; .message-success @extend .message; 배경 : # 7EA800; color : #fff; border-color : # 6B8F00;
메시지 클래스는 HTML에서 결코 사용되지 않을 것입니다. 확장을 위해 만들어지며, 그대로 사용되지는 않는다.. 이로 인해 생성 된 CSS에 약간의 부 풀림이 생깁니다. 코드를보다 효율적으로 만들려면 백분율 기호로 표시된 자리 표시 자 선택기를 사용할 수 있습니다.
% message 글꼴 크기 : 1.1em; 패딩 : 11px; border-width : 1px; border-style : 솔리드; .message-danger @extend % button; 배경 : # C20030; color : #fff; border-color : # A8002A; .message-success @extend % button; 배경 : # 7EA800; color : #fff; border-color : # 6D9700;
이 단계에서 당신은 확장과 믹스의 차이가 무엇인지 궁금 할 것입니다. 자리 표시자를 사용하면 매개 변수가없는 mixin처럼 작동합니다. 사실이지만 CSS의 출력은 다릅니다. 차이점은 믹스 린 중복 규칙 동안 자리 표시자는 동일한 규칙이 선택자를 공유하는지 확인합니다., 결과적으로 CSS가 적어집니다..
운영
여기에 말장난을 거부하기는 어렵지만, 지금은 의학적 농담을 자제합니다. 연산자는 CSS 코드에서 일부 수학을 할 수있게 해주 며 도움이 될 수 있습니다. Sass 가이드의 예제는 이것을 보여주기에 완벽합니다.
.컨테이너 너비 : 100 %; article float : 왼쪽; 너비 : 600px / 960px * 100 %; aside float : right; 너비 : 300px / 960px * 100 %;
위의 예는 최소한의 번거 로움으로 960px 기반 그리드 시스템을 만듭니다. 그것은 다음 CSS로 멋지게 컴파일됩니다 :
.컨테이너 너비 : 100 %; article float : 왼쪽; 너비 : 62.5 %; aside float : right; 너비 : 31.25 %;
내가 작업을 위해 찾은 하나의 큰 용도는 실제로 색상을 혼합하는 것입니다. 위의 성공 메시지 Sass를 살펴보면 배경색과 테두리 색상이 일종의 관계가 있다는 것은 분명하지 않습니다. 회색 음영을 빼면 색상을 어둡게 할 수 있으므로 관계를 볼 수 있습니다.
$ 기본 : # 7EA800; .message-success @extend % button; 배경 : $ 기본; color : #fff; border-color : $ primary - # 111;
빼기 색상을 밝게할수록 그늘이 어둡게됩니다. 추가 된 색상이 가벼울수록 더 밝은 그늘이 나타납니다..
기능들
숫자 함수, 문자열 함수, 목록 함수, 색상 함수 등 많은 함수를 사용할 수 있습니다. 개발자 문서에서 긴 목록을 살펴보십시오. 여기에 한 두 사람의 모습을 보여 드리겠습니다..
그만큼 가볍게 하다 과 어둡게 하다 기능을 사용하여 색상의 밝기를 변경할 수 있습니다. 이것은 음영을 뺀 것보다 낫습니다. 모든 것을 모듈화하고 분명하게 만듭니다. darkening 함수를 사용하여 앞의 예제를 살펴보십시오..
$ 기본 : # 7EA800; .message-success @extend % button; 배경 : $ 기본; color : #fff; border-color : 어둡게 ($ 기본, 5);
함수의 두 번째 인수는 필요한 어두움의 백분율입니다. 모든 함수에는 매개 변수가 있습니다. 그들이 무엇인지 확인하기 위해 문서를보십시오! 다음은 몇 가지 다른 설명 색상 함수입니다. 불포화, 가득한, 거꾸로 하다, 그레이 스케일.
그만큼 천장 함수는 PHP와 마찬가지로 다음 정수로 반올림 한 숫자를 반환합니다. 열 너비를 계산하거나 최종 CSS에서 많은 소수 자릿수를 사용하지 않으려는 경우에 사용할 수 있습니다..
.제목 font-size : ceil ($ heading_size * 1.3314);
개요
Sass의 기능을 통해 적은 노력으로보다 우수한 CSS를 작성할 수있었습니다. mixins, extends, functions, variables를 적절하게 사용하면 스타일 시트를보다 관리하기 쉽고 읽기 쉽고 작성하기 쉬워집니다..
다른 비슷한 CSS 전처리기에 관심이 있다면 나는 덜 (또는 초보자 가이드를 확인해 보라) 제안 할 것이다 - 기본 원칙은 거의 동일하다.!
