[JS] Sass

🔷 Sass

Sass는 CSS로 컴파일된 스타일시트 언어이다. 프로그래밍 언어처럼 중첩 구조가 가능하며, 변수를 사용할 수 있다. 만약 CSS코드가 한 파일로 작성된다면 가독성이 저하되고, 스타일의 영역을 명확히 파악할 수 없다. 중복 코드의 변경이 힘들고 재사용성이 떨어져 작업 속도를 지연시킨다.

=> 이를 개선하기 위해 사용된다, 라고 보면 된다!

🔸 Sass 7-1 패턴

• base/
• components/
• layout/
• pages/
• themes/
• abstracts/
• vendors/

7개의 큰 영역으로 구성되며,

abstracts/
ㄴ _variables.scss
ㄴ _functions.scss
ㄴ _mixins.scss
ㄴ _placeholders.scss

와 같이 각 컴포넌트들을 나눠 관리할 수 있다.

파일명에 _가 붙는 경우 @import 되어 사용될 것으로 파악한다.

예시
@import './abstracts/variables.scss';
@import './abstracts/mixins.scss';

🔸 Variables

일반 프로그래밍 언어처럼 변수를 사용할 수 있다.
변수명으로 사용할 때는 앞에 $ 를 붙여준다.

$h1-size: 5em;
$h1-color: red;
$h1-align: center;

h1 {
	font-size: $h1-size;
    color: $h1-color;
    text-align: $h1-align;
}

🔸 mixin

여러 CSS 요소를 하나로 묶어 관리할 때 사용한다.

@mixin ellipsis {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

p {
	@include ellipsis;
}

1. @mixin 을 사용해 요소의 집합체임을 표기한다.
2. text-overflow: ellipsis;
   텍스트가 영역에서 넘어갈 경우 … 으로 대체한다.
3. white-space: nowrap;
   텍스트가 화면 너비에서 넘어갈 경우 아래로 개행해 표기하지 않고, 무조건 한 줄로 작성한다.
4. @include mixin 요소를 적용할 때 사용한다.

변수 전달
@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent)
@include bg-img('https://sass-lang.com/assets/img/logos/logo.svg')

mixin에서는 위와 같이 변수를 전달해 사용하는 것도 가능하다. 초기값을 설정할 때는 @mixin 파라미터에 지정하면 되고, 생략 가능하다.
(일반 프로그래밍 언어의 함수 전달! 같은 느낌이랑 비슷한 듯?)

🔸 function

함수를 사용할 수 있다!

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

h1 {
	font-size: 10em;
    text-align: center;
    color: half-opacity(red);
}

1. 함수는 @function 으로 선언한다.
2. 리턴은 @return 으로 사용한다.