Sass 정리

Sass란?

• 스타일시트 언어이고 컴파일 과정을 거쳐 css로 적용된다.
• Nesting 구조로 중첩되어 작성
• css의 관리를 효율적으로 만들어준다.

Scss를 이용하여 {} 구분을 하여 작성

Sass 7-1 패턴

• abstracts/

• base/

• components/

• layout/

• pages/

• themes/

• vendors/

• main.scss

파일명 앞에 _(언더바) 사용

variables

$h1-align:center;
h1 {
	text-align:$1-align;
}

• 변수를 사용해 속성 값을 일괄 변경하기 쉽다.

@mixin

@mixin ellipsis {	// 말줄임
	text-overflow:ellipsis; 
    white-space: nowrap;
    overflow:hidden;
}
p {
	@include ellipsis;
}

• 하나의 디자인을 재사용을 위해 코드들을 묶어 활용, 미사용시 자리 차지 x

@function

@function half-opacity($color) {
	$color: rgba($color, .5);
    @return $color;
}
h1 {
	color: half-opacity(red);
}