TIL DAY 208
오늘 배운 일
✔️ CSS Layout
⏰ SCSS [part II]
이어서 다음으로 배울 feature 은 mixins 이다.
mixins 는 SCSS functionality 를 재사용할 수 있도록 해준다.
시작하기 앞서, 프로젝트 커맨드에 꼭!
npm run dev이걸 해야 gulp 가 작동한다.
그럼 저번 프로젝트를 열어서, src/scss 에 _mixins.scss 라는 파일을 만들어준다.
mixins 를 만드는 건 매우 쉽다.
다음과 같이 코드를 작성해준다.
_mixins.scss
@mixin sexyTitle {
color: blue;
font-size: 30px;
margin-bottom: 12px;
}@mixin 옆에 있는 이름은 원하대로 작성해도 문제없다!
그리고 index.html 로 가서...
index.html
<body>
<h1>Hello</h1>
</body>전에 있던 요소들을 지워주고, h1 이라는 태그에 "Hello" 라는 걸 적어준다.
그리고 styles.scss 로 가서...
styles.scss
@import "_variables";
@import "_mixins";
h1 {
@include sexyTitle();
}
저번처럼 @import 를 해서 mixin 을 불러와준다
그리고 h1 스타일 안에 @include 하고 우리가 작성해둔 mixin 을 함수형태로 적어준다.
결과는...
우리가 mixins 에 적어둔 스타일처럼 파란색으로 바뀌었다.
이 기능은 하나만을 위해서만 쓰는것은 유용하지 않는다.
그럼 만약에 a 태그가 4개 있으면 어떨까?
index.html
<body>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
</body>
그리고 link 에 같은 스타일링을 하는데, 서로 조금씩 다르길 원하는 것이다.
먼저 mixins 파일에 link 라는 mixin 을 추가해보자!
_mixins.scss
@mixin link {
text-decoration: none;
display: block;
}
그리고 styles.scss 에 약간 코드를 수정해준다.
styles.scss
@import "_variables";
@import "_mixins";
a {
@include link();
}
화면을 보면...
기존에 있던 밑줄들이 사라지고 세로로 정렬되는 것을 볼 수 있다.
확실히 작동된다.
우리 mixin 에 variable 를 허용하게 해주자
_mixins.scss
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}
link 에다가 함수처럼 소괄호를 작성해서, 우리가 variables 에서 적은것 처럼 $color 를 쓰고 color 프로퍼티에 값으로 대입한다.
그리고 styles.scss 로 가서...
styles.scss
@import "_variables";
@import "_mixins";
a {
@include link();
}
a:nth-child(odd) {
@include link(blue);
}
a:nth-child(even) {
@include linke(red);
}홀수에는 파란색 폰트로 해주고, 짝수는 빨간색으로 지정해준다.
하지만 더 편리하게 쓸 수 있는 방법이...
@import "_variables";
@import "_mixins";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link(blue);
}
&:nth-child(even) {
@include link(red);
}
}
Nesting 같은 형태를 띄고 있다.
결과를 보면...
잘 작동한다!
아 그리고!
- mixin 은 css 로 compile 이 되지 않는다.
그런데 mixin 으로 다른 일도 할 수 있다.
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}
위의 코드에서, $color 를 보내는 대신에, link 를 좀 더 명확하게 할 수 있다.
styles.scss 로 가서...
@import "_variables";
@import "_mixins";
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link("odd");
}
&:nth-child(even) {
@include link("even");
}
}색깔을 쓰는 대신, odd 와 even 을 문자열로 적어준다.
그럼 이제 mixin 은 색상을 가지지 않고 문자를 갖게 된다.
그리고 mixins 파일로 돌아가서 다음과 같이 코드를 수정해준다.
_mixins.scss
@mixin link($word) {
text-decoration: none;
display: block;
@if $word == "odd" {
color: blue;
} @else {
color: red;
}
}코도를 보면, 소괄호 안에 color 대신 word 로 바뀌었다.
그리고 자바스크립트를 조금 배웠으면 알 수 있는 if/else 문을 써서
만약 word 가 odd 라면 파란색 폰트
아니면 빨간색 폰트라고 해주었다.
화면을 확인해보면...
변하는 건 없다.
mixin 은 어떤 종류의 argument 를 mixin 에다가 보낼 때, css 의 결과값을 바꿀것이다.
그러니까 mixin 은 프로그래밍을 하고싶은 사람들한테 추천한다.
(if-else 나 color 보내기 등)
만약에 CSS 결과값에 아무런 변화를 주기 싶지 않고, CSS style 를 재사용하기 싶다면 이때 우리는 extends 를 사용한다.
끝으로 :
- 오늘은 저번에 이어서 SCSS 의 기능 중 하나인 mixins 에 대해 알아보았다.
- 확실히 variables 보다 어렵게 느껴지긴 한다.
