scss

sass vs scss ?

• sass: scss와 구조적 차이 존재, 작성이 번거롭고 복잡할 수 있음
• scss: 기존에 알던 css와 유사하게 작성할 수 있기 때문에 배우기가 쉬움

scss compiler

• vs code live sass comiler
  • scss 파일로 작성 후 컴파일이 되면 css 파일이 떨어진다.
  • html 작성시 css 파일을 링크 시키면 된다.
• ruby gem - 진입 장벽이 높음
• node.js npm - 진입 장벽이 높음

기본 문법

• & - 부모 연산자를 가리킴

/* 변수 선언 - $로 시작해야 한다. */
$fs_12: 12px;
$fc_red: red;

.box {
	font-size: $fs_12;
	background: #ffcccc;

	/* .box > a */
	& > a {
		text-decoration: none;
		color: $fc_red;
		
		/* .box > a:hover */
		&:hover {
			color: #000;
		}
	}
}

media query

• 스크린 사이즈 정의 후 스타일 설정

@mdeia screen and (max-width: 500px) {
	font-size: 15px;
}
@mdeia screen and (min-width: 501px) and (max-width: 900px) {
	font-size: 20px;
}

mixin

• 속성은 같은데 값이 다를때 사용

/* mixin 선언 - include로 사용 */
/* 여러가지 속성이 겹치고 값만 바뀌어야 하는 경우 유용하게 사용할 수 있다. */
/* 파라미터에 기본값을 줄 수도 있다. */
@mixin fontSizeBgColor($fontSize: 10px, $bgColor: #eee) {
	font-size: $fontSize;
	background: $bgColor;
}

.box {
	// font-size: 40px; 
	// background: #ffcccc;
	@include fontSizeBgColor(40px, #ffcccc); // 이렇게 사용 할 수 있다. 
}

.box1 {
	// font-size: 20px;
	// background: #000;
	@include fontSizeBgColor(20px, #000);
}

extend

• 완전히 같은 코드가 중복되서 사용 될 때 사용

/* %로 시작해야 한다. */
/* */
%boxShape {
	border-radius: 20px;
	border: 1px solid black;
}

.box {
	@extend %boxShape;
}

partial

• 특정 코드들을 별도로 묶어서 다른 파일로 저장하고 그 파일을 불러다가 쓰는것
• 파일 이름은 underscore로 시작 해야 한다.

// _mixin.scss
@mixin fontSizeBgColor($fontSize: 10px, $bgColor: #eee) {
	font-size: $fontSize;
	background: $bgColor;
}

// pariatl/_style.scss
...

// common.scss
// 불러들일때는 import를 사용하고, underscore를 제외한 이름을 적어준다. 
@import "mixin"
@import "parial/style" // 이때도 underscore를 빼고 사용한다. 

.box1 {
	@include fontSizeBgColor(20px, #000);
}

if

@mixin textAndBgColor($textColor, $bgColor) {
	color: $textColor;
	background: $bgColor;
}

// if, else if, else 로 조건에 일치할 때 다른 스타일을 적용 
@mixin theme($mood) {
	@if $mood == 'light' {
		@include textAndBgColor(#ccc, #eee)
	}
	@else if $mood == 'dark' {
		@include textAndBgColor(#fff, black)
	}
	@else {
		@include textAndBgColor(red, #aaa)
	}
}

.box1 {
	@include theme('light');
}

.box2 {
	@include theme('dark');
}

.box3 {
	@include theme('orange');
}