[SCSS / CSS] Scss실행하기

오늘은 Scss실행방법에 대해서 알아보겠습니다.

 

큰 흐름은 다음과 같습니다.

node-sass설치 -> package.json변경 + scss파일 작성 -> scss작동 -> css파일 생성

 

node-sass설치

 scss를 실행할건데 sass를 설치하라고 해서 저는 오타인가 했습니다. 찾아보니, scss가 css가 되기 위해선 scss -> sass -> css과정을 거친다고 합니다. 쉽게 sass는 scss를 위한 컴파일러로 생각하시면 될 것 같습니다. 

 

package.json 변경 + 파일작성

아래의 내용을 추가하도록 합시다

   "scss": "node-sass -o css/ css/"

위 내용을 추가해야 이후에 npm run scss를 실행할 수 있습니다.

-o 뒤에 두번의 css/ 가 나오는데 앞은 ouput의 위치 뒤는 input의 위치를 가르킨다고 합니다. 제가 실행한 예제의 경우 input이 되는 scss파일의 위치와, 원하는 css의 output위치가 동일해서 큰 문제가 되진 않았습니다. 둘을 따로 관리하시는 경우엔 폴더위치를 만져줘야 하겠습니다.

왼쪽은 왼쪽의 css/는 아웃풋 오른쪽 css/는 인풋 위치

 

scss파일은 다음과 같이 작성하였습니다. less와 차이점은 변수 앞에 $가 붙는다는점과, mixin을 상요할때 @mixin과 @include를 쓴다는 점이었습니다.

$lt-gray: #ddd;
$background-dark: #512DA8;
$background-light: #9575CD;
$background-pale: #D1C4E9;

//Height variables
$carousel-item-height: 300px;

@mixin zero-marign($pad-up-dn, $pad-left-right) {
    margin: 0px auto;
    padding: $pad-up-dn $pad-left-right;
}

.row-header{
    @include zero-marign(0px, 0px)
}

.row-content{
    @include zero-marign(50px, 0px);
    border-bottom: 1px ridge;
    min-height: 400px;
}

.footer{
    background-color: $background-pale;
    @include zero-marign(20px, 0px);
}

.jumbotron{
    @include zero-marign(70px, 30px);
    background: $background-light;
    color: floralwhite;

}

address{
    font-size: 80%;
    margin: 0px;
    color: #0f0f0f;
}

body{
    padding: 50px 0px 0px 0px;
    z-index: 0;
}

.navbar-dark{
    background-color: $background-dark;
}

.tab-content{
    border-left: 1px solid $lt-gray;
    border-right: 1px solid $lt-gray;
    border-bottom: 1px solid $lt-gray;
    padding: 10px;
}

.carousel{
    background: $background-dark;
    .carousel-item{
        height: $carousel-item-height;
        img{
            position: absolute;
            top: 0;
            left: 0;
            min-height: 300px;
        }
    }
}

#carouselButton{
    right: 0px;
    position: absolute;
    bottom: 0px;
}

 

Scss실행하기

npm run scss

 앞에서 설정이 잘 되었다면 위의 명령어를 css폴더 상위에서 실행하면 됩니다. 성공시 아래와 같은 초록 글자를 볼 수 있습니다.

css파일이 새로 생성

부트스트랩 커스텀

 앞에서 부트스트랩이 scss기반으로 쓰여졌다고 언급하였습니다. 부트 스트랩의 docs를 참조하여 커스터마이제이션이 가능하다고 합니다.

https://getbootstrap.com/docs/5.1/customize/sass/#variable-defaults

Sass