Sass 학습

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 Mixin

Mixin은 재사용 가능한 코드 블록인 C 언어 매크로와 약간 비슷합니다.

코드 블록을 정의하려면 @mixin 명령을 사용하세요.

@mixin left{

float:left;

margin-left:10px

}

@include 명령을 사용하여 call 이 mixin

div{

@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)//# 808080

complement(#cc3)//#33c

4.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

}

일치하는 @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);

}