SASS/SCSS

• sass : css의 단점을 보완하기 위해 만든 css 전처리기( 단순 반복되는 부분이 많은 등)
• css파일을 확장자만 scss로 바꾸어도 정상적으로 작동
• scss : Sass한 css
• css ex)

CSS
ul {
    list-style:none;
    width:1000px;
    margin:0 auto
    }
ul li {
    float:left;
    }
ul li a {
     color:black;
     padding:20px;
     display:block;
    }

• scss ex)

ul {
    list-style:none;
    width:1000px;
    margin:0 auto;
    li {
        float:left;
        a {
            color:black;
            padding:20px;
            display:block;
        }
    }
}

1. SASS설치

npm install sass sass-loader

• packagejson 파일 dependencies에서 sass, sass-loader설치 확인 가능

2. 사용

• sass/scss 적용하고 싶은 vue파일 script태그 아래 style 태그 작성

<style lang="scss"scoped>
</style>

3. 전역 scss적용

1) reset, font, layout등 모든 파일 공통으로 적용하고싶은 scss파일은 static/css/common.scss파일 작성 후 공통으로 적용할 scss파일 import
2) nuxt.config.js 파일 css부분에 common.scss 에 import한 모든 scss파일 전역에서 사용

export default {
	css:[
    	'@/static/css/common.scss'
    ]
}