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);
}

좋은 웹페이지 즐겨찾기