ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [SCSS] SCSS 도입기
    HTML & CSS 2024. 4. 5. 14:11

     

     

     

    *SCSS란?

     

    프로젝트의 규모가 커지거나 작업이 고도화 될 수록 가독성이 떨어질 수 밖에 없는 CSS의 단점을 보완하고, 

    개발의 효율성을 올리기 위해 등장한 것이다.

     

    *어쩌다 도입하게 되었나?

    SOPT 과제 중 하나이기 때문에 처음 도입하긴 했지만, 애초에 CSS의 불편함을 느끼고 있었다.

     

    **CSS 뭐가 불편함?

    우리는 이런 코드를 자주 사용한다
    
    display:flex;
    flex-direction:row
    justify-content:center;
    align-items:center;

     

    위 코드를 반복적으로 사용해야만 하는 불편함을 느껴 분명 이를 해결해주는 무언가가 있을 것이라 생각했다.

    저번 웹잼 프로젝트에서, 우리 팀 동료가 이와 관련해서 mixin 기법을 도입하자고 주장하였다.

    (물론 styled components였지만...)

     

    아래는 웹잼 프로젝트 당시 코드 중 일부이다.

    그때의 mixin 코드를 가져와 보면,
    
    import { css } from 'styled-components';
    
    interface MixinProps {
      direction: string;
      align: string;
      justify: string;
    }
    
    const mixin = {
      // flex
      flexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
        display: flex;
        flex-direction: ${direction};
        align-items: ${align};
        justify-content: ${justify};
      `,
      inlineFlexBox: ({ direction = 'row', align, justify }: MixinProps) => css`
        display: inline-flex;
        flex-direction: ${direction};
        align-items: ${align};
        justify-content: ${justify};
      `,
      flexCenter: ({ direction = 'column' }: MixinProps) => css`
        display: flex;
        flex-direction: ${direction};
        align-items: center;
        justify-content: center;
      `,
    };
    
    export default mixin;
    
    .
    .
    .
    
    mixin을 사용하는 쪽에서는
    
    display:flex;
    flex-direction:row
    justify-content:center;
    align-items:center;
    
    위 코드가,
      ${({ theme }) => theme.mixin.flexBox({ align: 'center', justify: 'center' })}
      
      이렇게 단 한줄로 바뀐다.

     

    이 덕분에 비교적 효율적으로 스타일 코드를 작성할 수 있던 좋은 기억으로, 

     

    이번 솝트 과제에서도 비슷하게 도입해보고 싶었다.

     

    따라서 styled components를 제외하고 일반 css로 구현할 수는 없을까 알아보다가 찾은 것이 

     

    'SCSS'였다!

     

    한 마디로,

    반복되는 코드를 줄이기 위해 도입했다고 요약할 수 있다.

     

     

    그렇다면 이번 SOPT 과제에서는 어떻게 사용했는지 알아보자.

     

    먼저 mixin에 대해서 설정해준다.
    
    @mixin flex(
      $direction: row,
      $wrap: nowrap,
      $justifyContent: flex-start,
      $alignItems: center
    ) {
      display: flex;
      flex-direction: $direction;
      flex-wrap: $wrap;
      justify-content: $justifyContent;
      align-items: $alignItems;
    }
    
    
    그 후 사용하는 쪽에서는,
    
    header {
      @include flex(row, nowrap, space-between, center);
    }
    
    이렇게 한줄로 끝이난다.

     

    찾아보니 SCSS는 mixin기능 이외에도 여러 기능이 있다.

     

    - 중첩을 통해 상위 선택자의 반복을 줄일 수 있는 기능.

     

    - 반복되는 값을 변수로 지정하기.

     

    - 함수, 조건문, 반복문 등.

     

    추후에는 위 기능들도 도입해서 SCSS를 다양한 방면으로 사용하고 싶은 욕심이 생겼다.

     

     

Designed by Tistory.