SASS - 환경설정 & SASS내 변수 선언

김가오리·2022년 10월 24일
0

SASS

목록 보기
1/1

환경설정

확장프로그램

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;
        }
    }
}

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

profile
가보자고

0개의 댓글