[SCSS] 핵심 기능 정리!

dygreen·2022년 6월 7일
scss
0

SCSS

목록 보기
1/1
post-thumbnail

📝 이번 글에선 SCSS를 배우며 가장 유용하게 쓰일 핵심 기능들을 정리해보고자 한다.

📌 선택자 중첩(Nesting)✨

: 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의 장점: 코드 양이 줄어들고, 가독성도 높힐 수 있다.

📌 부모 선택자 참조: &✨

: & 기호는 부모를 받는 의미로 사용할 수 있다

  1. &를 이용해 '가상선택자' 조작
.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);
    }
  }
  1. 부모의 'class 값' 참조해 속성 적용
<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마다 다른 속성을 적용할 수 있다.

📌 부모 선택자 중첩 나가기: @at-root

: 동일한 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를 적어주면 된다

📌 중복되는 css 속성 접두어로 깔끔하게

.portfolio p {
  text-align: center;
  text-overflow: hidden;
  text-transform: uppercase;
}

👆 위에서 text라는 속성이 중복되어 나타나고 있는 것을 볼 수 있다
SCSS에선 중복되는 부분을 접두어로 빼서 깔끔하게 작성이 가능하다


.portfolio {
  p{
    text: {
      align: center;
      overflow: hidden;
      transform: uppercase;
    }
  }
}

👉 훨씬 깔끔하고 작성하기도 편리한 코드가 되었다

📌 is로 선택자 중복 줄이기

: 가상 클래스 :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;
  }

📌 외부 파일 가져오기: @import

// scss파일에서 scss파일을 불러올 떈 파일 경로 작성 no!
@import "reset";

📌 @mixin @include로 함수 사용✨

  1. @mixin을 다른 파일에 저장해두고 import하여 사용하는 방법 (자주 사용하는 코드들을 저장해두고 사용하면 좋음)
// 불러들이기 먼저!
@import "mixin";

// 적용하기
body{
  @include default;
}
  1. 같은 파일 안에서 사용하는 방법
// 함수 선언 먼저!
@mixin headline{
  text-align: center;
  font-size: 36px;
  text-transform: capitalize;
  position: relative;
  padding-bottom: 20px;
}

// 적용하기
.heading{
  @include headline;
}

📌 @extend로 선택자 속성 가져오기✨

: 흔히 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);
}

📚 Reference

: 국비지원 수업

profile
dygreen
✨감명깊은 앞단을 향한 꾸준한 여정✨

0개의 댓글