[CSS] SCSS와 styled-component의 mixin 그리고 사용법

SammyJung·2022년 6월 10일

갑자기 scss를?🤡

꽤 오래전부터 듣기만 했던 scss와 styled-component에서의 mixin을 한번 알아보고자 정리를 해보았다!

사실 10개월간 회사에서 styled-component를 쓰면서 믹스인을 쓴적은 없지만 이전부터 css를 간결하게 써보고 싶었던 욕구를 해소해보고 싶어서 강의를 들으면서 오늘의집을 클론코딩 해보면서 mixin,@extend 적용해보는 연습을 해봤다. (mixin 부분만 보고 싶으면 중간 3번부터 스킵해서 읽는것을 추천합니다!)

사실 스타일드 컴포넌트를 주변에서 많이 쓰고 있지만, 그 외에도 html,css를 처음 배웠을 때의 눈에🥰 하나하나 보일때마다 신기해했던 초심으로 돌아가고 싶었던 생각 때문에 scss로 한번 초심 찾기 프로젝트를 해보고 있다.

Sass? SCSS? 그게 뭐여?

Sass(Syntactically Awesome StyleSheets)
=> 문법적으로 멋찐! 이라는 뜻✨

CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

Sass와 SCSS는 거의 같은 문법이지만 {}(중괄호)와 ;(세미콜론)의 유무가 차이가 있다.

CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

변수의 사용
조건문과 반복문
Import
Nesting
Mixin
Extend/Inheritance

실습한 코드를 보며 바로 하나씩 사용법을 소개하러 고고리~

0) 설치

install node-sass

$ npm install -g node-sass

옵션으로 --watch 혹은 -w를 입력하면, 런타임 중 파일을 감시하여 저장 시 자동으로 변경 사항을 컴파일해요.

$ node-sass --watch scss/main.scss public/main.css

1) 변수(Variables)

변수 이름 앞에는 항상 $를 붙여서 사용할 수 있다.(이건 너무 쉽쥬?!.ㅎ. 그래도 간단하게 소개해보아요)

예를 들면 컬러들을 constants 변수로 관리 할수 있겠죠?!

$black: #000;
$dark: #191a20;
$primary: #3f4150;
$secondary: #8c8d96;
$tertiary: #b2b3b9;
$border: #e0e2e7;
$backgroud: #f7f8fa;
$white: #fff;

디테일한 부분(변수 유효범위-{}스코프,재할당)부분들은 저보다 더 잘 정리한 글이 많아서 패스하겠습니다!
https://heropy.blog/2018/01/31/sass/ 여기서 확인 가능!

2) 반복문

for문과 비슷한 형태로 쓸수 있는 신기한 문법. 변수 $i를 사용하고 through 또는 to를 쓸수 있다.

 @include responsive(Desktop) {
    max-width: $lg-max-container;
    padding: 0;

    @for $i from 1 through $lg-columns {
      .col-lg-#{$i} {
        width: ($lg-unit + $gutter) * $i;
      }
    }
  }

@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

3) Mixins

믹스인은 선언하고 여러 줄의 코드를 재활용할 수 있습니다. 선언할 때는 @mixin 이라고쓰고 믹스인을 쓰겠따! 이렇게 선언하고, 쓰는 곳에서는 @include를 쓰면 되요~

//선언
@mixin text-style-12($color: false) {
  font-size: $font-size-12;
  line-height: $line-height-12;
  letter-spacing: $letter-spacing-12;
  color: $color;

  @if (type-of($color) == color) {
    color: $color;
  }
}
//사용
p {
  @include text-style-12;
}

이런식으로 폰트 사이즈 별로 mixin을 줄 수 있습니다!

그리고 위에서 처럼 인자도 넘겨줄 수 있습니다. color값이 없으면 초기값 false로 줄 수 있고, type-of라는 내장 함수로 color값일 때만 color로 전달 될수 있도록 할 수 있어요! (왜냐면 실수로 color: 13px 이런값이 들어갈 수 있기 떄문에!)

styled-component에서의 mixin

import { css } from "styled-components"

const Navigation = styled.nav`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  ${Sticky}
`;

const Sticky = css`
  position: fixed !important;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  transition: all 0.6s ease-in-out;
  color: black;
`;

//

const RingVariant = (radius, stroke = "10") => css`
  position: absolute;
  border-radius: 50%;
  height: ${radius * 2}px;
  width: ${radius * 2}px;
  border: ${stroke}px solid rgba(0, 0, 0, 0.5);
`;

예를 들어 flex 센터 삼대장을 mixin으로 만들면 재사용 할 수 있어서 좋다!

flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};

스타일드 컴포넌트에서 사용할 때는 보통

export const mixins = {
  // flex
  flexBox: (direction = 'row', align = 'center', justify = 'center') => `
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
  `,

src/styles/theme.js 에서 export 해주고 theme에서 가져다가 쓰면 된다.

${({ theme })} => theme.flexBox('row', 'center', 'flex-start');

- 두 가지 mixin을 비교해보니

사실 작년에 styled-component를 처음 썼을 때 mixin을 scss에서의 mixin보다 먼저 접했기 때문에 직접 적용해보기가 어렵게 느껴졌었는데, 스타일드 컴포넌트가 있기 이전에 scss에서의 mixin을 써보고 나서 써보니 어려운 부분도 아니였는데 어렵게 느꼈구나 싶었다.

4) if문

if문 처럼 조건문 처리도 가능하다!

@mixin postion-center($type: absolute) {
  @if ($type == fixed or $type == absolute) {
    position: $type;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

이 외에도 다양한 내장 함수와 기능이 있지만 추가로 placeholder 선택자만 더 소개하고 마무리 하려고 한다.

5) % placeholder 선택자

믹스인 처럼 여러줄의 공통 스타일링을 선언해주고 재사용한다는 점에서는 같지만 인자값을 넘겨 주지않고 일반적으로 믹스인보다는 조금 더 좁은 범위에서 재사용 한다는 점이 차이가 있다.

%선택자명 으로 선언하고 사용하는 곳에서 @extend로 쓸수 있다.

%tag-base {
  // 공통 스타일
  @include text-style(12);
  height: 20px;
  padding: 0 6px;
  font-weight: 700;
  border-radius: 4px;
}

.tag-red {
  @extend %tag-base;
  color: $white;
  background-color: $red;
}