1. SASS란 무엇입니까
SASS는 다양한 편리한 작성 방법을 제공하여 디자이너의 시간을 크게 절약하고 CSS 개발을 간단하고 유지 관리하기 쉽게 만드는 CSS 개발 도구입니다. 이 문서에서는 SASS의 주요 방법을 요약합니다. 우리의 목표는 이 기사를 통해 일상적으로 사용하는 경우 공식 문서를 읽을 필요가 없도록 하는 것입니다.
2. 설치 및 사용
2.1 설치
SASS는 Ruby 언어로 작성되었지만 둘의 구문은 전혀 관련이 없습니다. Ruby를 모르더라도 먼저 Ruby를 설치하고 SASS를 설치하세요. 이미 RUby를 설치했다고 가정하고 명령줄에 다음 명령을 입력하세요.
gem insrall sass
그럼 사용하시면 됩니다 .
2.2 사용
SASS 파일은 일반 텍스트 파일이며 CSS 구문을 직접 사용할 수 있습니다. 접미사 이름은 .Scss이며 이는 Sassy CSS를 의미합니다. 다음 명령은 .scss 파일에서 CSS로 변환된 코드를 화면에 표시할 수 있습니다. (파일명은 test라고 가정)
sass test.scss
표시된 결과를 파일로 저장하려면 뒤에 .css 파일명을 붙여주세요.
sass test.scss test.css
SASS는 네 가지 프로그래밍 스타일 옵션을 제공합니다.
*nested: 중첩된 들여쓰기 CSS 코드(기본값).
*확장됨: 들여쓰기되지 않은 확장된 CSS 코드입니다.
*compact: 간결한 형식의 CSS 코드입니다.
*압축: 압축된 CSS 코드
프로덕션 환경에서는 일반적으로 마지막 옵션이 사용됩니다.
sass ---스타일 압축 test.sass test.css
또한 SASS가 특정 파일이나 디렉터리를 모니터링하고 파일이 변경되면 컴파일된 버전을 자동으로 생성하도록 할 수도 있습니다.
//파일 보기
sass --watch input.scss
//디렉토리 보기
sass --watch app/sass:public /stylesheets
SASS 공식 웹사이트에서는 아래의 다양한 예제를 실행할 수 있는 온라인 변환기를 제공합니다
3. 기본 사용법
3.1 변수
SASS에서는 변수 사용을 허용하므로 변수는 $로 시작합니다.
$blue : #1875e7;
div{
color :$blue
}
변수를 삽입해야 하는 경우 문자열에서는 #{}로 작성해야 합니다.
$side : 왼쪽;
.rounded{
border-#{side}-radius:5px;
}
3.2 계산 기능
SASS는 코드에서 계산 사용을 허용합니다
Body{
margin: (14px/2);
top: 50px + 100px ;
right : $var * 10%;
}
3.3 중첩
SASS는 선택기 중첩을 허용합니다. 예를 들어 다음 CSS 코드
div h1{
color : red;
}
는
div로 작성할 수 있습니다. {
Hi{
color : red;
}
}
속성은 테두리와 같이 중첩될 수도 있습니다.
p{
border:{
color:red;
}
}
테두리 뒤에는 콜론을 추가해야 합니다. 중첩 코드 내에서 &를 사용하여 상위 요소를 참조할 수 있습니다. 예를 들어, border-color 속성은 다음과 같이 작성할 수 있습니다: a{&:hover{ color :#ffb3ff }} 3.4 노트SASS에는 두 가지 댓글 스타일이 있습니다. 표준 CSS 주석 /* 주석 */은 컴파일된 파일을 유지합니다. SASS 소스 파일에만 유지되고 컴파일 후에는 생략되는 한 줄 주석 //comment입니다. /* 뒤에 느낌표를 추가해 "중요한 주석임을 나타냅니다." 압축 모드로 컴파일하더라도 이 주석 줄은 유지되며 일반적으로 저작권 선언에 사용될 수 있습니다. 정보. /*!중요사항*/4. 코드 재사용4.1 상속 SASS 기존 class1:.class1{border:1px solid #ddd;}과 같은 다른 선택기와 같은 선택기를 허용합니다. class1을 상속하고, class2는 @extend 명령을 사용해야 합니다: .class{ @extend.class1;font-size:120%; }4.2 MixinMixin은 재사용 가능한 코드 블록인 C 언어 매크로와 약간 비슷합니다. 코드 블록을 정의하려면 @mixin 명령을 사용하세요. @mixin left{float:left;margin-left:10px}@include 명령을 사용하여 call 이 mixindiv{@include left;}mixin의 장점은 매개변수와 기본값을 지정할 수 있다는 것입니다. @mimin left($value:10px){float:left;Margin-right:$value}사용시 필요에 따라 매개변수를 추가하세요. div{@include left(20px);}다음은 믹스인의 예시입니다. , 브라우저 접두어를 생성하는 데 사용됩니다. @mixin rounded($vert,$horz,$radius:10px){border-#{$vert}-#{$horz}-radius:$radius;
-moz-border-radius-#{$vert}#{$horz}:$radius;-webkit-border-#{$vert}-#{$horz}-radius:$ radius;}사용시 아래와 같이 호출하시면 됩니다#navbar li{ @include rounded(top,left);} #footer{ @include rounded(top,left,5px);}4.3 색상 함수SASS는 일련의 색상을 생성하는 몇 가지 내장 함수를 제공합니다. 밝게(#cc3,10%)//#d6d65c어둡게(#cc3,10%)//#a3a329회색조(#cc3)//# 808080complement(#cc3)//#33c4.4 파일 삽입@import 명령, 외부 파일을 삽입하는 데 사용됩니다. @import “path/filename.scss”;.css 파일을 삽입하는 경우 css import 명령과 동일합니다. @import “foo.css”;
5. 고급 사용법
5.1 조건문
@if를 사용하여 판단할 수 있습니다.
@if 1+1 = = 2{border:1px solid;}
@if 5< 3{border:2px dotted;}
}
일치하는 @else 명령:
@if 밝기($color)>30%{
}@else{
}
5.2 루프 문
SASS는 for 루프를 지원합니다:
@for $i 1부터 10까지 {
.border-#{$i}{
Border : #{$i}px 파란색;
}
}
while 루프도 지원합니다:
$i:6;
@while $i >0{
.item-#{$i}{width:2em *$i}
$i:$i-2
}
각 명령은 다음과 유사합니다:
@each $member in a,b,c,d{
.#{$member}{
Background-image:url(“image/#{$member}.jpg”);
}
}
5.3 사용자 정의 기능
SASS를 사용하면 사용자가 자신의 기능을 작성할 수 있습니다.
@function double($n){
@return $n*2;
}
#sidebar{
너비 :double(5px);
}