scss 설치 및 사용법

1. 설치

1. node 설치 후 확인
node -v
npm -v

2. npm을 이용해 sass 설치
npm install -g sass

3. sass 설치 확인
npm show sass version

 

2. 사용법

// example.scss

// 1. 변수 선언, 변수 사용 가능
$white: #fffffff;
$colors: (
    red: #e03131,
    orange: #ff922b,
    yellow: #ffd43b,
    green: #69db7c,
    blue: #74c0fc,
    indigo: #3b5bdb,
    purple: #7048e8,
    gray: #ced4da
);
.example-btn {
	background-color: $white;
}

// 2. 중첩 기능을 이용하여 편리하게 사용 가능
.btn {
    padding: 0.5rem 1rem;
    display: inline-block;
    border: 1px solid gray;
    background-color: transparent;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    
    // size
    &.sm {
        font-size: 0.8rem;
    }
    &.lg {
        font-size: 1.3rem;
    }
    
    ...
    
 }

// 3. 스타일 반복 가능
@each $name, $color in $colors {
    &.#{""+$name} {
        background-color: #{$color};
        color: white;
        border: none;
    }
    &.line-#{""+$name} {
        border: 1px solid #{$color};
    }
    &.color-#{""+$name} {
        color: #{$color};
    }
}
    

// 4. 스타일 재사용, 함수처럼 사용 가능
@mixin createSquare($size) {
    $calculated: 32px * $size;
    width: $calculated;
    height: $calculated;
}
@mixin example($padding, $color) {
    padding: $padding;
    color: $color;
}
.example {
	@include example(10px 0, pink);
}

// -> result css
// .example {
//		padding: 10px 0;
//		color: pink;
// }

등등...

 

3. 여러 파일에서 사용할 수 있도록 파일 분리

/scss/style.scss
/css/

먼저 scss 폴더 안에 scss 파일을 작성한 다음

아래 명령어를 치면

scss -> css 파일로 변환되어 css 파일이 생기게 됩니다.

sass 변환할scss파일명 변환될scss파일명
ex) sass ./scss/style.scss ./css/style.css

 

근데 매번 수동으로 sass한테 명령을 내리면 불편하니까

--watch라는 플래그를 넣어 sass가 해당 파일을 감시하게 만들 수 있습니다.

sass --watch <input 폴더> <output 폴더>

 

그런데 scss 디렉토리에 있는 모든 파일을 css로 변환한 후에

다른 디렉토리로 이동해야한다면 아래와 같이 작성해줍시다.

sass --watch stylesheets/sass:stylesheets/compiled

예를 들어

./scss/header.scss

./css/header.css 라면

sass --watch ./scss:./css

 

 

https://velog.io/@jeongmin_sung/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-%EB%A7%8C%EB%93%A4%EA%B8%B01-%ED%8F%B4%EB%8D%94%EA%B5%AC%EC%A1%B0-SCSS
https://opentutorials.org/module/237/2489