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

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

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

///

예제)

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

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

그래서 딱 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*/
  }
}

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