TIL DAY 209
오늘 배운 일
✔️ CSS Layout
🎰 SCSS [part III]
오늘은 extends 기능에 대해 알아볼 것 이다.
extends 는
- 같은 코드를 중복하고 싶지 않을때 쓰는거다.
저번시간에 배운 mixin 은 상황에 따라 다르게 코딩을 하고 싶으면 사용하는 것 이다.
extends 는 정확히 다른 코드를 확장(extend)하거나 코드를 재사용하고 싶을때 사용하면 된다.
그럼 코드를 알아보자!
index.html
<body>
<a href="#">Log In</a>
<button>Log Out</button>
</body>로그인을 하는 anchor 태그와 로그아웃을 하는 button 태그가 존재한다.
저번에 코드들을 지워주는게 편할거다.
그리고 styles.scss 에...
a {
}
button {
}우리가 원하는거는 위의 코드들이 많은 CSS property 를 공유했으면 좋겠다.
하지만 anchor 태그는 추가적인 코드가 있을거다.
그럼 src/scss 디렉토리에 _buttons.scss 라는 파일을 만들어준다.
extend 기능을 사용할 수 있는 방법은 '%'을 사용하는거다.
그리고 밑에 코드를 따라 써준다.
_buttons.scss
%button {
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
}우리는 button 을 만들었다.
그럼 이것을 재사용해준다.
extends 기능은 파일에 분리해야하는 요소들이 많을 때 유용하다.
(예: button, title, navigation, card)
그리고 styles.scss 에 buttons 를 import 해준다.
styles.scss
@import "_buttons";
a {
}
button {
}
다음으로 스타일 안에 @extend %이름을 적어준다.
@import "_buttons";
a {
@extend %button;
}
button {
@extend %button;
}
화면을 확인해보면...
그리고 _buttons.scss 로 돌아가서 추가적으로 스타일을 적용해주자.
_buttons.scss
%button {
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
color: white;
font-weight: 500;
}
결과를 보면...
확실히 extends 기능은 편리하다.
지금은 그저 button 스타일에 관한것만 해본거다.
추가적으로 styles.scss 에 코드를 적어주면...
styles.scss
@import "_buttons";
a {
@extend %button;
text-decoration: none;
}
button {
@extend %button;
border: none;
}
화면을 보면...
깔끔하게 정리된 모습을 확인할 수 있다.
자세히 보면, 둘의 폰트가 서로 달라서 동일하게 해준다.
_buttons.scss
추가해준다!
font-family: inherit;
희미하게 차이점을 알수 있다.
프로젝트를 진행해보면, 파일들을 분리해서 작성하는데 이 때 extends 를 사용하면 확실히 깔끔하게 코드를 작성할 수 있다.
이제 SCSS 의 모든 기능들을 알아보았다!@!
하지만 아직 끝난게 아니다...
다음에는 mixins 를 이용해서 responsive 디자인에 적용해보는 걸 알아볼 것 이다.
끝으로 :
- 오늘은 코드들을 분리할 때, 활용할 수 있는 기능인 extends 에 대해 알아보았다.
- 아직 SCSS 는 끝나지 않았다..
