SCSS(Sass)

CSS 전처리 도구.
SCSS와 Sass의 차이점은 중괄호 ({})와 세미콜론(;) 여부

프로젝트 생성

npm init -y
npm i -D parcel-bundler

package.json 의 scripts 부분에 추가

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html" },

parcel bundler가 scss를 css로 변환한다.

주석

/* 이것은 주석이다. */
// 이것도 주석이다. 이 주석은 변환시 안 보인다.

중첩(Nesting)

// SCSS
.container {
  h1 {
    color: red;
  }
}

/* SCSS */
.container > .h1 {
	color: red;
 }

중괄호 내에 중괄호를 써서 중첩이 가능하다.

상위(부모) 선택자 참조

/* CSS */
.btn {
	position: absolute;
}

.btn.active {
	color: red;
}

//SCSS
.btn {
	position: absolute;
    &.active {
    	color: red;
    }
}

& 부분에 상위(부모) 선택자가 치환되어 해석된다.

중첩된 속성

//SCSS
.box {
	font: {
    	weight: bold;
        size: 10px;
    };
	margin: {
    	top: 10px;
        left: 20px;
    };
}

/* CSS */
.box {
	font-weight: bold;
    font-size: 10px;
    margin-top: 10px;
    margin-left: 20px;
}

속성을 중첩해서 사용할 수 있다.

변수

// SCSS

$size: 100px;

.container {
	position: fixed;
    top: $size;
    .item {
    	width: $size;
        height: $size;
    }
}

$variable_name: value; 로 변수를 선언해서 재사용할 수 있다.
유효 범위가 존재하므로 유의해서 사용하도록 한다.
재할당이 가능하다.

산술 연산

+ - * / %

❗나누기 연산자 / 는 다른 의미(단축 속성)로 해석될 수 있어서 다음과 같은 방법을 사용한다.

1. 괄호 사용
   (15px / 3px)
2. 변수 사용
   $size / 3px
3. 다른 산술 연산자와 함께 사용

❗산술 연산시 같은 단위를 사용하거나 calc() 함수를 사용한다.

재활용(Mixin)

@mixin center {
	display: flex;
    justify-content: center;
    align-items: center;
}

.container {
	@include center;
    .item {
    	@include center;
    }
}

@mixin name { contents }
@include name;

선언해서 재활용하여 사용할 수 있다.

@mixin name(parameter) { contents }

함수처럼 매개변수 사용할 수도 있다.

@mixin name(parameter: value) { contents }
@mixin name(p1: value, p2: value) { contents }

반복문 @for

// for (let i=0; i < 10; i += 1) {
//		console.log(`loop-${i}`)
// }

@for $i from 1 through 10 {
	.box:nth-child(#{i}) {
    	width: 100px;
    }
}

@for

선택자에서는 값을 보관하기 위해 #{i} 사용한다.

함수

@mixin center {
	display: flex;
    justify-content: center;
    align-items: center;
}

@function ratio($size, $ratio) {
	@return $size * $ratio
}

.container {
	@include center;
    $width: 100px;
    width: $width;
    height: ratio($width, 1/2);
    }
}

@function name(parameter) { @return return_value }

함수를 만들어 재사용하고 return값까지 사용할 수 있다.

색상 내장 함수

• mix(color1, color2)
  색상을 섞어주는 함수

• lighten/darken(color, x%)
  x%만큼 밝게/어둡게 해주는 함수

• saturate/desaturate(color, x%)
  x%만큼 채도 높이는/낮추는 함수

• grayscale(color)
  색상 회색으로 만들어주는 함수

• invert(color)
  색상 반전 시키는 함수

• rgba(color, x)
  x만큼 투명도 적용하는 함수

가져오기

@import url("scss 경로");
@import "scss 경로";

@import "경로1", "경로2";

여러 개의 파일을 가져올 수도 있다.

Overwatch 캐릭터 선택 예제 리팩토링

https://merry-raindrop-4ac53f.netlify.app/

SCSS로 리팩토링 후 다시 배포해보았다.
velog 왜 링크 자꾸 404 뜨는거야??? 정신 채려🍒

데이터 종류

• number

• string

• color

• boolean

• null

• list
  배열과 유사

• map
  객체
  $map: ( o: orange, r: red, y: yellow );

반복문 @each

• with list

//SCSS
$list: orange, red, yellow;

@each $c in $list {
	.box {
    	color: $c;
    }
}

/* CSS */
.box {
	color: orange;
}
.box {
	color: red;
}
.box {
	color: yellow;
}

• with map

//SCSS
$map: (
	o: orange,
    r: red,
    y: yellow
);

@each $k, %v in $map {
	.box-#{k} {
    	color: $v;
    }
}

/* CSS */
.box-o {
	color: orange;
}
.box-r {
	color: red;
}
.box-y {
	color: yellow;
}

@mixin - @content

@mixin name {
	~~~
	@content
}

@content 부분에 다른 내용을 추가할 수도 있다.