환경설정

확장프로그램

cmd 명령어

sass compiler 설치

npm install -g sass

sass compiler version 확인

sass --version

scss 파일을 css로 compile

sass 변환할 scss파일명:변환될 css파일명

scss 파일을 css로 실시간 compile

sass --watch 변환할 scss파일명:변환될 css파일명

scss 파일을 압축형 css로 compile

sass --style compressed 변환할 scss파일명 : 변환될 css파일명

scss 파일을 압축형 css로 실시간 compile

sass --watch --style compressed 변환할 scss파일명:변환될 css파일명

scss live mode 끄기

ctrl + c

변수 선언

$size : 100px;

.container{
    border: 2px solid greenyellow;

    .item{
        width: $size * 3;
        height: $size;
        background-color: lightblue;
    }
}

.box{
    width: $size * 5;
    height: auto;
    border: 5px solid lightgray;
    p{
        color:gray;
        span{
            font-weight: bold;
            color: black;
        }
    }
}

$변수명 형태로 작성
변수(전역변수) 선언하여 사용 용이