Sass 유지보수 하기 쉽게 관리하기 (feat. sass-guidelines)

여담 이지만  이 글을 작성하게 된 이유는

 

현재 테오의 스프린트로 맺은 연으로 1차 스프린트를 끝낸 뒤 현재는 2차 사이클에 들어갔고

 

회의 끝에 디자이너가 다음 작업을 끝 마치기 전에 프론트엔드는 1차 스프린트 때 완성을 위해서 빠르게 작업하여 통일 되지 못했던 부분들의 아쉬움이나 유지보수 성을 높이기 위해 각자 맡은 부분에 따라 좋은 유지보수 방법을 조사하게 되었으며

 

나는 Sass 우아하게 관리하는 방법의 조사를 맡아서 정리 및 공유를 위해서 이 글을 작성했다. 

 

 

---

 

 

 

 

Sass 가이드라인의 말 을 조금 인용하며 시작하고자한다.

 

 

There is a major difference between making it work, and making it good. 

동작하게 만드는 것과 잘 만드는 것에는 큰 차이가 있다.

 

CSS is quite a messy language

css는 꽤나 지저분한 언어다. 

 

뒤에 건 그냥 걍 웃픈 이야기로 바로 뒤에 나오길래 같이 가져와봤다

 

 

Sass 가이드라인에서는 폴더 분류의 중요성을 아무리 강요해도 지나치지 않다고 말하고있다.

 

그리하여 소개하고 있는 폴더 분류법이 7-1 패턴이다. 

 

 

#7-1 패턴

사용에 따라 n-1패턴 으로 커스텀 해서 사용하기도 한다. 

 

 

개인적으로는 익숙한 패턴이다. 작년에 이미 개인 css 프로젝트에서 해봤으니까 

 

7-1 패턴에서 '7' 은 다음의 

 

 

1. abstracts
2. vendors
3. base
4. layout
5. components
6. pages
7. themes

7가지 폴더로 나뉘며 그럼 7-1 에서 '1' 은 뭘 말하느냐? 바로 main.scss를 말한다.

 

각각의 7가지 폴더안에 있는 scss파일을 main.scss에 전부 import 하는 방식 인 것이다.

 

abstracs 에서는 추상 파일들이 들어간다 변수나 mixin 

vendors 에는 bootstrap 같은 곳에서 가져온 외부 라이브러리 스타일 

base 에는 reset.scss 나 typography.scss 

 

abstracts에 변수로 font-size 같은것들을 다 넣으면 typography는 굳이 필요한건가? 라는 생각이 들 수 도있을 것 같다.

 

타이포그래피에는 

.heading-primary{
 	  text-transform: uppercase;
      font-size: $font-size-big;
      background: linear-gradient(to right, $color-secondary, $color-secondary-lighten);
      color: transparent;
}

이런 식의 스타일 들이 들어간다.

 

 

 

 

layout 에는 footer , grid, header 같은 말 그대로 레이아웃 관련된 스타일들이 들어간다.

 

 

 

 

componetns  , page  에는 문자 그대로 컴포넌트와 페이지 스타일들이 들어가게 되는데 개인적인 생각 으로는 리액트에서 는 굳이 컴포넌트, page  style 폴더를  따로 style 폴더 안에 만들어 관리하는 것 보단, 

 

원래 리액트 방식대로 컴포넌트s 폴더 밑에  해당컴포넌트 폴더안에 jsx,tsx ,css 가 함께 있는 편이 더 유지보수하기 용이하다고 생각하며 

 

공통적인 base,abstracts,theme 정도 만 폴더로 만들어 main에 합치는 편이 훨씬 유지보수 가독성이 좋을것이라고 판단했다.  (layout도 사실상 컴포넌트 별로 나뉘기 때문에 굳이 새로 만들 필요는 없지않을까? 해서 뺐다.)

 

 

theme 에는 theme 스타일 들이 들어간다 sass guide lines의 예시에는 admin.scss 같은것을 예시로 들고있다. 쓰게 된다면 구체적으로 이해가 가는 개인적인 예시로는 darkMode 같은 스타일들이 이쪽으로 가지않을까 하고 생각한다.

 

그리하여 sass 가이드 라인에서 보여주는 예시의 최종형태는 이렇게 생겼다.

 

 

@import
  'abstracts/variables',
  'abstracts/functions',
  'abstracts/mixins',
  'abstracts/placeholders';

@import
  'vendors/bootstrap',
  'vendors/jquery-ui';

@import
  'base/reset',
  'base/typography';

@import
  'layout/navigation',
  'layout/grid',
  'layout/header',
  'layout/footer',
  'layout/sidebar',
  'layout/forms';

@import
  'components/buttons',
  'components/carousel',
  'components/cover',
  'components/dropdown';

@import
  'pages/home',
  'pages/contact';

@import
  'themes/theme',
  'themes/admin';

 

 

 

# Abstracts 추상 관리 

 

 

base, abstracts, theme 가 폴더를 만들어서 분류하면 편할것같은 공통 항목으로 개인적으로 뽑았지만 이중에서도 사실 상 본격적인 협의와 관리가 필요한 건 abstracts 나 theme 가 아닐까 싶으나 

 

theme의 경우 본격적으로 여러가지 테마를 넣어본 프로젝트가없음으로 이번엔 abstracts을 주로 생각해보려 한다. 

 

 

 

$변수 관리 

 

1.기본사용

 

$primary-color:black 와 같이 선언하고 

color:$primary-color 와 같이 사용한다. 

 

2.변수안에 변수 중첩이 된다 (변수를 선언할때 다른 변수를 사용할 수 있다.)

 

$border-custom : 0.07px solid $primary-color; 와 같은 방식으로. 

 

3.변수 묶어서 관리하기(그룹화)

 

$primary-colors:(main:#ffffff, second:f1f1f1) 

이런식으로 () 안에  key:value 로 관리 가능 

 

사용할때는 map-get($primary-colors,main)  // 전체 객체 이름 / key이름 으로 접근한다

 

@mixin

 

자주쓰이는 스타일을 mixin으로 묶어서 사용할 수 있다 대표적인게 center 

 

@mixin <customName> {

display :flex;

align-items:center;

justify-content:center; 

} 

 

으로 선언하고

 

 

.header{

@include customName

}

 

으로 사용한다. 

 

참고로 인수도 받을 수 있다. 

 

@media <customName>($width){

width:$width

}

 

@include  <customName>(40px)

 

참고로  <customName> 네임은 거기안에 마음대로 적어도 된다는 표시를 위해 자체적으로 사용한 부분  <> 까지 같이 안적어도된다 

 

=> @media center {}  @include center 

 

 

@function

sass의 가이드라인에 보면 @function 항목이 있는데 뭔가 했던니 sass에서는 유저가 지정한 함수를 사용할 수있는 기능이있다 mixin 은 css의 기능을 함수로 쓰는 개념이라고 하면 이건 정말로 js 의 함수와 비슷한 계산을 해서 값을 리턴하는 함수에 가깝다.

 

@function z($layer) {
  @return map-get($z-indexes, $layer);
}

매우 간단한 예시를 가져왔는데 산술연산도 지원됨으로 산술연산하여 

 

복잡한 값의 계산 같은것들을 할때  @return 시켜 활용할 수있다. 단지... 자세히 안 쓴 건 이걸 쓸일이 당장엔 없어보여서 하여간 이런 게 있다. 

 

 

 

 

@extend 

개인적으로 유지보수에 용이 하다고 생각하는 새롭게 알게 된 것이 @extend 인데 

 

상속의 개념이다. 

 

거의 스타일은 비슷한데 몇가지만 조금 다를 경우 상속을 활용할 수 있다.

 

사실 상속을 굳이 안써도 클래스네임에 두개 쓰면 되긴하지만 @extend를 쓰는 편이 좀 더 명시적이고 알아보기 쉬운 우아한 유지보수방법이라고 생각한다.

 

사용법 

 

.btn-second{

@extend .btn-primary   ; // 상속 받고자하는 클래스 

border: 1px solid black ; 

 

}

 

 

 

 

 

#More? 

 

우리 서비스는 모바일뷰로 웹에서는 확장되어 보여지게 만들어놔서 @content 나 다른 기능들 (수학연산자, 엔퍼센트&)등등 모든 기능을 말하진 않았는데 개발자 입장에서는 sass의 기능을 숙지하고 있는 편이 유지보수 에 용이하지않나...생각한다.

 

굳이 sass 가 아니여도 추상 부분이나 폴더구조는 유지보수 차원에서 팀원이 다같이 생각해볼만한 부분이다. 

 

더 유지보수 쉽게 관리하려면 어떻게 해야될까? 내 생각에 그건 디자이너와 협의하여 디자인 시스템을 만드는 것 이 곧 스타일 유지보수의 끝판왕이 아닐까 생각한다. 

 

 

 

 

 

 

https://sass-guidelin.es/#architecture

Sass Guidelines

https://sass-guidelin.es/#variables

Sass Guidelines

https://sass-guidelin.es/#extend

Sass Guidelines