📝 이번 글에선 SCSS를 배우며 가장 유용하게 쓰일 핵심 기능들을 정리해보고자 한다.
: nesting은 SCSS의 핵심 중의 핵심이지만 가장 기본적인 기능이라고 보면 된다.
// 기존 css 코드
.social {
width: 600px;
display: flex;
}
.social li {
flex: 1;
text-align: center;
}
.social li a {
color: #000;
}
// 동일한 코드 in SCSS
.social{
width: 600px;
display: flex;
li{
flex: 1;
text-align: center;
a{
color: #000;
}
}
}
위 코드에서 시각적으로도 확인할 수 있듯,
css에서는 자식 요소 하나하나를 선택하여 속성을 집어넣어야 했지만
SCSS는 자식요소라면 큰 범위의 중괄호{} 안에서 중첩하여 사용할 수 있다.
👉 SCSS의 장점: 코드 양이 줄어들고, 가독성도 높힐 수 있다.
: &
기호는 부모를 받는 의미로 사용할 수 있다
.btn{
display: block;
color: #fff;
&:hover{
background-color: transparent;
}
&:before,
&:after{
content: '';
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
&:hover:before{
transform: rotate(45deg);
}
&:hover:after{
transform: rotate(-45deg);
}
}
<h1 class="font-large">This is H1 Headline</h1>
<h2 class="font-medium">This is H2 Headline</h2>
<h3 class="font-small">This is H3 Headline</h3>
👉 class명이 비슷하게 겹친다면, 중복되는 부분을 부모로 하고 &
를 이용해 속성을 적용할 수 있다
.font{
// &=부모(font)를 받음
&-large{
font-size: 60px;
color: crimson;
text-transform: uppercase;
}
&-medium{
font-size: 40px;
color: yellowgreen;
}
&-small{
font-size: 20px;
color: royalblue;
}
}
👆 중복되는 'font'를 부모로 하고 &
을 이용해 각 class마다 다른 속성을 적용할 수 있다.
: 동일한 class를 가진 소스가 하나의 부모에 있는 상황이 아닐 때, 같은 속성을 적용하고자 할 때! 사용하면 된다
<div class="frame">
<h1 class="heading">CodingWorks Publishing Class in Inflearn</h1>
</div>
<h1 class="heading">This is @at-root</h1>
👆 frame에 heading이라는 class를 가진 코드가 속해있지 않고 서로 다른 위치에 있다. 이런 상황에서 css로는 .heading{스타일}
이런 식으로 작성하면 되지만, SCSS에서 어떻게 간단하게 적용할 수 있을까
.frame{
padding: 20px;
border: 1px solid #000;
text-align: center;
@at-root .heading{
font-size: 36px;
color: crimson;
font-weight: normal;
}
}
👉 중첩에서 나가고자 하는 부분(서로 다른 위치에 있지만 같은 속성을 적용하고자 하는 부분)에 @at-root
를 적어주면 된다
.portfolio p {
text-align: center;
text-overflow: hidden;
text-transform: uppercase;
}
👆 위에서 text라는 속성이 중복되어 나타나고 있는 것을 볼 수 있다
SCSS에선 중복되는 부분을 접두어로 빼서 깔끔하게 작성이 가능하다
.portfolio {
p{
text: {
align: center;
overflow: hidden;
transform: uppercase;
}
}
}
👉 훨씬 깔끔하고 작성하기도 편리한 코드가 되었다
: 가상 클래스 :is
를 사용해 선택자 작성시 중복되는 부분을 줄일 수 있다!
<header>
<h1>Headline Text in header</h1>
</header>
<section>
<h1>Headline Text in header</h1>
</section>
<footer>
<h1>Headline Text in header</h1>
</footer>
다음의 html에선 header, section, footer에 각각 h1이라는 태그가 동일하게 들어가 있다
:is(header,section,footer) h1{
font-size: 30px;
font-weight: normal;
}
header h1, section h1, footer h1 중 h1이 중복되기 때문에 부모 선택자를 :is
로 묶어 속성을 적용할 수 있다!
: SCSS의 핵심 기능 중 핵심(?으로 변수를 사용할 수 있다는 점이다. css에서도 var를 사용해 변수를 사용할 수 있지만, 호환성이 낮아 실무에서는 많이 사용하진 않는다고 한다.
SCSS는 호환성이 좋기 때문에 맘 놓고 사용해도 된다고 한다!
$변수명: 값;
// 변수 선언하기
$primary-btn: skyblue;
$secondary-btn: yellowgreen;
$warning-btn: crimson;
// 변수 사용하기
.primary{
background-color: $primary-btn;
}
.secondary{
background-color: $secondary-btn;
}
.warning{
background-color: $warning-btn;
}
// scss파일에서 scss파일을 불러올 떈 파일 경로 작성 no!
@import "reset";
// 불러들이기 먼저!
@import "mixin";
// 적용하기
body{
@include default;
}
// 함수 선언 먼저!
@mixin headline{
text-align: center;
font-size: 36px;
text-transform: capitalize;
position: relative;
padding-bottom: 20px;
}
// 적용하기
.heading{
@include headline;
}
: 흔히 addClass/removeClass를 사용할 때 가상의 클래스를 만들어 놓고 적용하곤 하는데, @extend도 가상의 클래스를 미리 만들어 놓는다는 점에서 비슷하다고 볼 수 있겠다!
// btn이라는 가상의 클래스를 먼저 생성한다
.btn{
width: 200px;
padding: 7px;
background-color: #fff;
font-size: 18px;
}
// 해당 속성이 필요한 곳에 @extend로 불러들인다
.order{
@extend .btn;
background-color: purple;
}
%
를 사용해 compile된 css파일에서 보이지 않도록 하는 방법도 있다// 가상의 클래스 앞에 % 기호를 붙이면 css파일에선 클래스가 보이지 않는다
%shape{
width: 250px;
height: 300px;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.212);
}
// 클래스 적용하기
.card{
display: flex;
gap: 30px;
&-item{
@extend %shape;
display: flex;
justify-content: center;
align-items: center;
}
}
: Javascript에서 object에 key
와 value
를 저장하듯
scss에서도 변수들을 저장하여 사용할 수 있다
다중변수 선언하기
$변수명: (이름:값, 이름:값);
불러오기
속성: map-get(변수명, 변수가 가진 배열 이름);
// 선언하기
$color:(
bgc-primary: #dfe6e9,
bgc-secondary: #b2bec3
);
// 불러오기
body{
background-color: map-get($color, bgc-primary);
}
: 국비지원 수업