스터디 관리 프로젝트 - Sass(SCSS)

Seuling·2023년 2월 22일
0

Sass(SCSS)

왜 이프로젝트에서 SCSS를 사용하나?
그전까지 프로젝트를 진행하면서는 styled-components를 많이 사용하였다. 많이 사용했던 이유 또한 제일 처음 배울 때에 styled-components로 작업을 많이해서 익숙했었다.
하지만 익숙함에서 벗어나 이번 프로젝트는 공부목적이기도 하고, css를 좀더 공부해보고싶었다! 그러다 전처리기인 Sass를 적용하면 css를 좀더 모듈화해서 편하게 사용할 수 있을 것 같았다!

기본문법

npm i node-sass

scripts

"sass": "node-sass -w -r --source-map true styles/main.scss ./style.css",

$ : 변수 선언시 유의사항 ? 숫자로 시작 X, 소문자를 할때에는 - 대문자 _

$hihi-1 : 1;
$HIHI_1 : 2;

보통 색상과 텍스트는 styles/constants/_colors.scss 혹은 _typography.scss 로 파일을 분리함!

디버그

@debug (($lg-unit + $gutter) * $lg-columns);

font smoothing

reset.css에 넣어주면 폰트가 렌더링될때 부드럽게 렌더링됨!

*{ -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container .row .col

//.col-sm-1 .col-md-2
  [class^="col-"] {
    padding: 0 $gutter/2;
  }
  @for $i from 1 through $sm-columns {
    .col-sm-#{$i} {
      width: percentage($i/$sm-columns);
    }
  }

mixin

@mixin hello($color) {
  color: $color;
}

p{
    @include hello(blue);
}

function

@function _get-flex-value() {
  @return 1;
}

@mixin flexbox($jc: center, $ai: center) {
  display: flex;
  justify-content: $jc;
  align-items: $ai;
}

.list {
  font-size: _get-flex-value();
}

.list{
	@include flexbox
}

Sass Guidelines — Korean translation
참고해보기!

프로젝트에 적용

프로젝트에서 SCSS를 도입하던중, 해맸다.
공부를할때에는 react가 아닌 html css 파일로만 작업을 하다보니,
package.json 파일의 scripts 부분의 수정이 필요했다! 리액트에서도 당연히 아래와같은 작업을 해줘야 할것이라 생각했었다.

"scripts": {
    "node-sass": "node-sass",
    "sass": "node-sass -w -r styles/main.scss ./style.css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

하지만, 그냥 하면됐었다.....

npm i node-sass

Changed import in App.tsx from import './App.css'; to import './App.scss';
이렇게 간단하게 끝나는 거였다……

profile
프론트엔드 개발자 항상 뭘 하고있는 슬링

0개의 댓글