Frudy
6k
2019-12-22 10:45:00
7
1307

제가 SASS를 사용하는 이유.


기술은 사용하는 이유를 알수록 잘 이해가된다고 해요.

제가 알고있는 이유가 부적절하다거나,

다른이유가 더 있다면 공유 부탁드립니다~


///


예제)


웹페이지에서 사용되는 버튼은 생각보다 종류가많아요.

다른색, 다른크기, 다른 테두리둥근정도, 기타등등..

그래서 딱 4개만 만들어볼게요.


기존 회사방식)

#button1 {
width: 142px;
height: 40px;
background: blueviolet;
color: white;
border: none;
}

첫번쨰 버튼은.. 가로길이는 142px만큼... 버튼 바탕색은 블루바이올렛에..

안에글씨는 흰색... 버튼 기본테두리는 보기흉하니 없앤다는 뜻이에요.


#button2 {
width: 142px;
height: 40px;
background: blueviolet;
color: white;
border-radius: 20px;
border: none;
}

그래서 두번째 버튼 역시, 기존꺼 그대로 복사붙여넣기 한다음

테두리 둥근정도만 추가했어요.


그래서 세번째 버튼은 또 첫번째꺼 복사해서

가로길이 세로길이만 바꾸구요,

4번쩨 버튼은 또 두번째거 복사해서 가로길이 세로길이만 바꿨어요.


버튼 4개만드는데 벌써부터 중복코드가 심하죠?

그래서 기존회사의 프로젝트 하나는 PC 웹페이지 20개정도 되는거같은데

CSS 파일 여러개중 딱 한개가 9천줄이 넘었던걸로 기억해요.


클래스 이름보시면요

btn01 btn02 btn03 btn04

btnblue01 btnblue02

main01 main02 main03 ~ main06

뭐 이런식으로 클래스이름을 잡으셨는데,

숫자가 커질수록 크기가 작은 속성이었고,

코드는 거의다 중복이었어요.


이걸 SASS로 해결할 수 있어요.


현재 제 방식)


@mixin blueviolet-btn($width, $height, $border-radius) {

width: $width;
height: $height;
border-radius: $border-radius;
background: blueviolet;
color: white;
border: none;
}

#button1 {
@include blueviolet-btn(142px, 40px, 0px);
}
#button2 {
@include blueviolet-btn(142px, 40px, 20px);
}

#button3 {
@include blueviolet-btn(284px, 50px, 0px);
}
#button4 {
@include blueviolet-btn(284px, 50px, 20px);
}


문법이 처음에 볼때는 낯설지만, 

중복되는 코드는 돌려쓰고, 달라지는부분에만 변수로 대응하고있어요.

SASS덕분에 뻔한 중복코드를 간단하게 해결할 수 있어요.


SASS를 배우기 전에는,

<button class =  "blueviolet-btn btn-base">버튼</button>

이런식으로 클래스 두개이상 줘가면서 해결했었구요.


///


하나가 더있다면, CSS문법으로 자식선택자 속성줄 때 이런식으로 했던걸,


.main-section {

/*main-section code*/

> button {

/*main-section 바로 아래에 있는 버튼 code*/
}

> a {
/*main-section 바로 아래에 있는 링크 code*/
}
}

이렇게 할 수 있다는거에요. 좀 더 보기편하지않나요?

1
  • 댓글 7

  • abilists.com
    1k
    2019-12-22 12:04:28

    SASS 좋은 기술입니다. 저 입장에서는 기회가 되면 쓰고 싶네요.

    단, 디자인을 해보셨는지?, 그럼 SASS을 쓰는 타이밍은 리팩토링 타이밍이라 보여집니다.

    디자인을 해보시면 알거라 생각이 듭니다.

  • Frudy
    6k
    2019-12-22 12:07:32

    디자인은 별도로 웹디자이너님이 해주시구여,

    저는 마크업하고 프론트개발을 같이하고있어요.


    저희는 CSS 자체를 사용하고있지않구요,

    모든 프론트개발자가 SASS를 사용하고있어요.


    SASS 넘모좋습니다.

  • abilists.com
    1k
    2019-12-22 13:06:34

    저는 혼자 디자인까지 다해서, 나중에 디자인 수정안한면, 리팩토링으로 SASS쓰려구합니다.

  • Frudy
    6k
    2019-12-22 13:09:22

    오우야....

    웹디자인까지요? 힘드시겠네요....

    SASS 넘모 좋아여 

  • abilists.com
    1k
    2019-12-22 13:24:37

    디자인까지 하니깐 재미 있으면서, 신경도 많이 쓰게 됩니다.

    Docker을 좀 아시면, 간단하게 제가 만든 툴을 쓰실 수 있습니다.

    아래의 링크에 설명해 놓았는데, 한번 써 보시기 바랍니다.

    https://okky.kr/article/662238

  • Frudy
    6k
    2019-12-22 13:26:04
    감사합니다~~
  • 고뿌
    2k
    2019-12-22 20:48:13 작성 2019-12-22 20:53:48 수정됨

    당연히 기존 CSS가 못하는것을

    그걸 할 수 있으니 SASS는 좋은녀석입니다.


    그러나, 저는 SASS를 싫어합니다.

    아니, 좀 더 정확히 표현하면, 가성비가 떨어진다고 생각합니다.

    예로 드신 button은 일단 공통 부분만 추출하여 하나 정의하고,

    나머지 차이가 나는 디테일 부분을 또 클래스를 정의합니다.

    예시로 드신 'blueviolet-btn btn-base' 이렇게 두개로 하는것. 이 방법을 좋아합니다.


    클래스 두개로 쓰면 될것을 하나로 쓰기위해 

    문법을 숙지하고, 동료를 설득하고, 자동화 환경을 세팅하고, 디버깅 환경을 세팅하는것을

    가성비가 떨어진다고 저는 생각하고 있습니다.

  • 로그인을 하시면 댓글을 등록할 수 있습니다.