SCSS
2023. 2. 1. 16:43ㆍ개발/실무용 메모
개요
SCSS란?
- Sassy CSS (Syntactically Awesome Style Sheets)
- CSS 에서 단순반복되는 부분이나 불편함을 해소시키기 위해 만든 언어 > SASS
- SASS 에는 Sass 와 SCSS 가 있음 (각각 확장자는 .sass, .scss)
- 기존 Sass 에서 들여쓰기와 줄바꿈에 의존하던 방식을, SCSS 에서는 중괄호를 사용하는 방식으로 사용
- 예제
.list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px.list { width: 100px; float: left; li { color: red; background: url("./image.jpg"); &:last-child { margin-right: -10px; } } } - .list { width: 100px; float: left; } .list li { color: red; background: url("./image.jpg"); } .list li:last-child { margin-right: -10px; }
- scss는 개발자용 언어이기 때문에 브라우저가 바로 읽을수 없음, css 파일로 컴파일이 필요함 (sass-loader)
설치 & 환경 설정
- 설치 가이드 (공식 사이트) 링크
- 설치 관련 sass scss 히스토리
- 본래 컴파일러가 Ruby로 되어 있어서 Ruby 인터프리터도 설치해야 했지만, 이후 C++로 제작된 libsass 컴파일러가 나오면서 한때는 메이저한 컴파일러 자리를 차지하게 됨
- npm에서도 libsass 컴파일러를 패키지 형태로 설치할 수 있는 node-sass가 있어서 한때 CUI 환경에서는 이 방법이 가장 많이 사용되었으나, libsass가 2018년 11월 이후 제대로 개발이 되지 않자 libsass를 비권장(deprecate)하고 대신 Dart Sass를 권장
- 그 외에도 Visual Studio Code에서 Live Sass Compiler라는 확장 기능을 사용하여 편집기에서 편집하고 저장만 하면 자동으로 CSS로 컴파일해주는 기능이 있음
- React 에서는 터미널에서 프로젝트 디렉터리로 들어가 npm install sass 를 입력하면 SCSS 파일을 프로젝트에서 직접 불러올 수 있음
- 설치 가이드
// 컴파일 명령어 // sass (변환할 scss 파일명) (변환할 css 파일명) sass style.scss style.css // SASS watch 옵션 // 파일 변경이 생기면 자동으로 컴파일 sass --watch style.scss style.css - npm install -g sass // 설치 후 정상설치 & 버전확인 npm show sass version
- 웹팩 및 로더 설정
- 린팅 설정
기능 & 사용
네스팅 - 계층적으로 사용되는 css 를 더욱 계층적으로 보이도록 하는 기능
- css
ul {
list-style:none;
width:1000px;
margin:0 auto
}
ul li {
float:left;
}
ul li a {
color:black;
padding:20px;
display:block;- scss
ul {
list-style:none;
width:1000px;
margin:0 auto;
li {
float:left;
a {
color:black;
padding:20px;
display:block;
}
}
}
변수
- css
.dv1 {width:1000px;margin:0 auto;border:1px solid black}
.dv2 {width:200px;border:1px solid black}
.dv3 {width:500px;float:left;border:1px solid black}
.dv4 {width:700px;position:relative;border:1px solid black}
.dv5 {width:100px;position:absolute;border:1px solid black}- scss
$bLine:1px solid black;
.dv1 {width:1000px;margin:0 auto;border:$bLine}
.dv2 {width:200px;border:$bLine}
.dv3 {width:500px;float:left;border:$bLine}
.dv4 {width:700px;position:relative;border:$bLine}
.dv5 {width:100px;position:absolute;border:$bLine}
함수
.dv1 {width:225px}
.dv2 {width:525px}
.dv3 {width:150px}@function width-cal($a, $b){
@return $a * $b;
}
.dv1 {width:width-cal(900px, 3/12)}
.dv2 {width:width-cal(900px, 7/12)}
.dv3 {width:width-cal(900px, 2/12)}
- .dv1 {width:225px} .dv2 {width:525px} .dv3 {width:150px}
- 반복문
- 비슷한 구문의 반복을 편하게 작성 가능
- css 의 :nth- 가상 클래스와 함께 유용하게 사용 가능
div:nth-child(1) { top: 10px; } div:nth-child(2) { top: 20px; } div:nth-child(3) { top: 30px; } ... div:nth-child(60) { top: 600px; }@for $i from 1 through 60 { div:nth-child(#{$i}){ top:10px * $i; } } - mixin & include - 기초
- @mixin와 @include는 항상 함께 사용됨.
- 여러개의 스타일을 설정해둔뒤 한번에 사용 할 수 있음.
- 설정에는 @mixin, 사용할 때는 @include를 사용.
@mixin box-default { padding: 20px 30px; margin-bottom: 20px; }div { @include box-default } /* div { padding: 20px 30px; margin-bottom: 20px; } */ - 예제
@mixin centering(){ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) } .dv1 {width:1000px;@include centering()} .dv2 {width:200px;@include centering()} .dv3 {width:500px;@include centering()} .dv4 {width:700px;@include centering()} .dv5 {width:100px;@include centering()}
- mixin & include - 심화
- mixin은 전달 받은 인자를 사용하여 조건문 @if, @else를 사용할 수 있음.
@mixin fontSize($size) { @if $size == 'small' { font-size: 10px; } @else if $size == 'large' { font-size: 14px; } @else { font-size: 12px; } }div { //@include fontSize('small'); @include fontSize; // @include fontSize('large'); }- 인자를 사용하여 함수처럼 사용 가능
@mixin box-default($padding, $margin) { padding: $padding; margin-bottom: $margin; }div { @include box-default(20px, 30px); }- 기본값 추가
@mixin box-default($padding: 10px, $margin: 20px) { padding: $padding; margin-bottom: $margin; }