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);
}
Author And Source
이 문제에 관하여(Sass 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@eunoo1995/Sass-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)