Portfolio

1. 주석

/* */ ⇒ CSS로 컴파일됨

cf) SASS에서는 들여쓰기를 잘해야 주석 블록에 제대로 들어온다

// ⇒ 컴파일 되지 않음, 즉 코드가 삭제 됨

2. 중첩 (nesting)

css에서 두개 이상의 선택자를 띄어쓰기로 구분해 나열했던 것을 선택자를 중첩시켜서 스타일을 선언할 수 있다

&로 상위 요소를 참조해서, 선택자를 선언할 수 있다


.container {
	...
	> .item { /* === .container > .item */
		...
		&:hover { /* === .container > .item:hover */
			...
		}
		&-sm { /* === .container > .item-sm */
			... 
		}
	}
}

변수의 범위는 블록이다(본인, 중첩들)

중괄호 내부에 @(ex. @at-root)로 셀렉터를 지정한 것은 중첩을 벗어나서 사용됨

속성 중에서 접두사(ex. flex-)가 같은 것도 중첩으로 표현할 수 있다

속성을 선언할 땐 속성 이름뒤에 :를 붙여줘야 함에 주의!
속성이름 역시 보간으로 처리할 수 있음


.container {
	flex: {
		grow:1,
		shrink:1,
		basis: 1
	};
	margin: {
		top: 10px;
		left: 20px;
	}
}

,로 다중 선택자를 실현


ul, ol {
	li, span {
	}
}
/* 총 네개의 선택자가 컴파일러로 생성됨 */

선택자a { 중첩선택자b & {} } 는, 중첩이 역전이 된다 ⇒ 선택자b 선택자a 로 컴파일 됨


.banner {
	...
	body.dark & { // body.dark .banner {}로 컴파일 됨(&은 상위 선택자를 의미)
		...
	}
}

3. 변수

$로 변수 선언, =대신 :로 값 할당 (ex. $size:100)

기본 범위는 블록이지만, 변수 값 뒤에 !global을 붙이면 전역변수로 선언할 수 있다

변수 재할당 가능

선언할 때 변수 값 뒤에 !default를 사용하면, 이전에 선언한 것을 우선으로 쓴다는 의미(없으면 값을 씀)

#{변수}로 보간 처리(텍스트 내에 변수 사용)를 할 수 있다 (ex. #{$path})

선택자 내에 데이터는 보간처리해서 넣어줘야 함 ⇒ ex) :nth-child(#{$i}
선택자 이름도 보간 처리할 수 있다 (ex. .auto-#{$path})

4. 데이터(값)

숫자 데이터 : 정수, 소수점 단위(정수0은 생략 가능), 단위 데이터(ex. 20px, 2fr)

문자 데이터 : 하단의 것들을 제외한 값들(ex. absolute, bold..), 따옴표로 묶여진 값

색상 데이터 : 색상string(ex. blue, orange..), rgba, 컬러코드(#ff)

boolean 데이터: true, false

null 데이터 ⇒ 이 값을 가지고 있는 요소는 컴파일 되지 않음에 주의

리스트 데이터 : (a,b,c,d) == a,b,c,d == a b c d

map 데이터 : (key1: value1, key2: value2 ..)

key는 따옴표를 쓰는 것과 안쓰는 것을 구분한다

5. 연산자

값을 연산자로 계산할 수 있다

산술 연산자

+, -, *, /, %

(주의) 단일 속성의 값을 구분하기 위해 슬래시를 사용함
따라서 나누기(/) 연산자를 사용하려면 하단 조건 중 하나를 만족해야한다.

항을 소괄호로 감쌈 ex. (20 / 10) ⇒ 권장

분자, 분모 의 값중 하나 이상을 변수로 사용 (ex. $a/2)

다른 산술 연산자와 함께 쓴다 (ex. 20px / 2 + 1px)

다른 단위를 연산하려면 calc함수를 이용해야한다

ex. calc(100% - 50px)
컴파일될 때 값이 변환 되진 않음

비교 연산자

== , !=, <, >, <=, >=

논리 연산자

and, or, not

‘not 변수’는 변수가 false일 때 true가 된다

6. 재활용

@mixin-@include을 이용해 스타일을 함수처럼 쓸 수 있음

매개변수도 넣어줄 수 있고, 기본값을 넣어줄 수도 있음


@mixin large-text($size: 30px) {
	font-size: $size;
	...
}

.box {
	..스타일
	@include large-text(40px);
}

믹스인 내부에 셀렉터의 스타일을 중첩해서 선언할 수도 있다

매개변수의 개수를 신경쓰지 않고 mixin에 다 주고 싶다면?

⇒ 믹스인의 마지막 매개변수를 변수… 로 표현하면 됨


@mixin bg($w, $h, $rest...) {
	width: $w;
	height: $h;
	background: $reset;
}

.box {
	@include bg(
		100px,
		200px,
		url(""),
		url(""),
		url("")  /* 마지막 매개변수의 값이 세개가 된다*/
	);

매개변수가 2개 이상이면, 믹스인을 include할 때 리스트로 한번에 줄 수 있다.

대신, spread 연산자로 줘야 함! ⇒ 매개변수가 ($a, $b, $c, $d)이면 (10px 20px 30px 40px…)

키워드 인수

믹스인을 매개변수와 include 때, 매개변수의 변수 이름을 지정한다

⇒ 매개변수의 순서와 상관없이 해당하는 매개변수에 값이 할당됨


@include pos(absolute, $t: 100px, $l: 50px)

믹스인을 include할 때 중괄호를 사용해 컨텐트를 지정할 수 있고, 이 컨텐트는 @content로 믹스인 안에서 쓸 수 있다


@mixin icon($url) {
	&::after {
		@content //컨텐트를 호출
	}
}

.box {
	@include icon('/main.jpg') { /* 중괄호로 컨텐트 지정 */
		postion: absolute;
		top: 0;
	}
}

@media도 셀렉터 스타일 내에 중첩으로 들어갈 수 있다

셀렉터가 같다면, 중괄호 내부에 셀렉터를 적지 않아도 됨


.box {
	width: 400px;
	height: 400px;
	@media all and (max-width: 1400px) { //해당 규칙을 만족하면 .box의 width, height가 밑의 값이 적용됨
		width: 300px; 
		height: 400px;
	}
}

미디어 또한 mixin으로 표현 가능


@use "sass:map" //map의 get을 사용할 수 있게하는 모듈

@mixin media($name) {
	breakpoints: ( //map으로 이름에 따른 값을 쓸 수 있음
		sm: 1400px;
		md: 1600px;
		lg: 1800px;
	)

//모듈 함수 get을 통해 key에 따른 value를 가져온다
	@media all and (maxwidth: map.get(breakpoints, $name)) { 
		@content
	}
}

.box {
	media(sm) {
		width: 200px;
		height: 600px
	}
}

믹스인 안에 있는 @content에 매개변수를 줘서, 믹스인을 include하는 곳에서 using키워드로 받아 쓸 수 있음

@content에 매개변수를 줬다면, 이 믹스인을 include하는 모든 곳에서 using 키워드를 넣어줘야 함에 주의


...
@mixin media($name) {
...
	@media all and (maxwidth: map.get(breakpoints, $name)) { 
		@content(777)
	}
}

.box1 {
	@include media(sm) using($s){
		width: $s
	}
}

.box2 {
	@include media(lg) using($s){
		width: $s
	}
}

7. 확장

@extend로 스타일을 가져와서 쓸 수 있다

믹스인과 차이점 : 믹스인은 함수처럼 따로 선언, @extend는 이미 있는 선택자의 스타일을 쓸 수 있어서 간편


.btn {
	...
}

.btn-primary {
	@extend .btn;
	background-color: blue
}

선택자 폭발에 주의!! ⇒ 중첩된 선택자에서 상위 선택자를 extend하면 무한 재귀처럼 될 수 있음

그래서 웬만하면 믹스인을 더 추천..
but. exclude는 같은 스타일을 가진 선택자는 쉼표로 구분하는 반면에, 믹스인은 불러온 스타일을 일일히 내부에 써줌

따라서 믹스인은 메모리면에서 안좋을 수 있지만,, Gzip으로 압축해서 사용하면 크게 문제되지 않음

placeholder 선택자 ⇒ extend용으로만 쓰이는 셀렉터라고 선언

선택자 앞에 %를 붙임 ⇒ @extend %선택자
media에서는 extend로 가져올 때, 미디어 외부에 있는 placeholder 선택자는 가져올 수 없음

미디어 내부에서 선언된 placeholder는 가져올 수 있음

8. 함수

@function 으로 함수 선언, @return으로 리턴


@functin mul($a, $b) {
	@return $a * $b
}

.box {
	width: mul(10,12)
}

믹스인 규칙처럼 매개변수, 가변 매개변수, 기본 매개변수, 매개변수 지정 등을 쓸 수 있다

리턴 대신에 @error로 에러를 뱉게(throw, 던질) 해줄 수도 있다 ⇒ @error ‘message’

내장함수와 구분하기 위해, 커스텀 함수는 두개의 단어를 하이픈으로 연결해 사용하는 것이 좋다

9. 조건과 반복

조건문 : @if 조건, @else-if 조건, @else

조건을 소괄호로 감싸는 것은 선택

전역함수 if로 삼항연산자를 사용할 수도 있음 : if(condition, true, false)

반복문1 : @each 변수 in 리스트 {}


$sizes: 10,20,30,40
$fruits: (apple: 'a', banna:'b')

@each $size in $sizes {
}

@each $key, $value in $fruits { //map key, value를 구조분해해서 쓸 수 있음

}

반복문2 : @for 변수 from a through b ⇒ a~b까지


@for $i from 1 through 3 {}

반복문3 : @for 변수 from a to b ⇒ a~b-1까지

@while (조건) ⇒ 소괄호 생략 가능


@while $n > 1 {
	,,,
}

10. 가져오기, 모듈

@import 경로 로 다른 모듈화된 sass파일을 가져올 수 있음

따옴표 내에 경로를 적음
scss, sass 확장자는 생략가능

scss 파일이름에 접두사로 언더바(_)가 붙으면, 해당 파일은 css 파일로 컴파일 되지 않는다.

컴파일 안해도 이 파일을 Import해서 쓸 수 있다
이 파일을 import할 때는 경로에서 _를 생략할 수 있다

url함수, css 확장자, http~를 경로로 지정해 import하면 그 구문 그대로 컴파일 됨

만약 확장자 scss를 그대로 가져오게 되면, 컴퓨터는 scss를 모르므로 올바르지X

가져온 파일에 있는 모든 변수, 믹스인, 함수들을 내부에서 가져온 것과 똑같은 방식으로 가져올 수 있다.

그래서 내부에서 가져온건지, 다른 파일에서 가져온건지, 다른 파일에서 가져왔다면 어느 파일에서 가져왔는지 모른다.

⇒ import를 권장하지 않는 이유

모듈을 가져오는 방식인 @use로 가져오면 모듈을 무조건 써줘야 해서 이 방식을 더 권장

@use 모듈경로 로 모듈을 가져옴

모듈이름은 경로의 마지막 단어이다. (ex. @module “./main” ⇒ main.$color로 접근)
해당 모듈에 있는 변수들은 모듈이름.변수로 접근해야 함
해당 모듈에 있는 믹스인을 쓸 때 @include~로 접근 가능
파일이름 as 뒤에 namespace를 적어서 alias 식으로 접근 가능

@forward 모듈이름 로 해당 모듈을 내보냄.

a > b > c 순으로 모듈을 가져오고 있을 때, a가 c를 가져오려면 b에서 @forward c을 해줘야 함
모듈이름도 역시 as 모듈이름 로 namespace를 써줄 수 있고, 이것은 접두어가 됨

as 모듈이름-* 하면 다른 모듈에서 모듈이름-$color 식으로 값을 가져올 수 있음


//a.scss
{}

//b.sccs
@use 'a' as cute //모듈 사용
@forward 'a' as cute-* //상위 모듈 내보내기
{}

//c.scss
@use 'b'
.momo{
	background-color: b.$color //b의 변수
	color: b.$cute-color //a의 변수
}

11. 내장 모듈

sass:내장모듈 꼴로 모듈 가져옴.

내장 모듈 종류 : math, string, color, list, map, selector, meta

color의 함수

adjust(색상, 보정값들) : 색상을 보정해서 반환
grayscale(색상) ⇒ 흑백으로
invert(색상) ⇒ 색을 반전

list의 함수, 변수

append(리스트, 원소) ⇒ 리스트에 원소 추가

index(리스트, 원소) → 원소의 인덱스. (1부터 인덱스가 책정 됨에 주의)

join(리스트1, 리스트2) → 리스트1과 2를 이은 리스트를 반환

nth(리스트, 인덱스) → == 리스트[인덱스], 인덱스 자리에 있는 원소를 반환

length(리스트변수)

map의 함수

get(맵, key) ⇒ key에 해당하는 value를 반환

has-key(맵, key) ⇒ 맵에 key가 있는지 boolean으로 반환

keys(맵) ⇒ 맵의 key들을 리스트로 반환

values(맵) ⇒ 맵의 value들을 리스트로 반환

merge(맵1, 맵2) ⇒ 맵 두개를 합침, 중복되는 키는 하나로 합쳐짐(뒤의 맵이 덮어써짐)

remove(맵, key) ⇒ 해당 key를 삭제한 새로운 맵을 반환

math의 함수

ceil(n), floor(n)
round(n) ⇒ 반올림
max(리스트), min(리스트) ⇒ 리스트의 최대,최소 값을 각각 반환
abs(n) ⇒ 절대값
is-unitless(n) ⇒ n에 단위가 붙어져있는지 여부 boolean으로 반환
compatible(n1, n2) ⇒ 연산 가능한지(단위가 같은지) 여부를 반환

여기서 불가능하다 해도 calc에서 가능할 수도 있음

meta의 함수

call

함수를 함수의 매개변수로(콜백함수) 사용 가능

⇒ 이 때 call로 콜백함수를 사용해야함

meta.call($callback, 매개변수1,,,) 꼴


@function a($callback) {
	$res: meta.call($callback, 100px)
}
@function b($size) {}
.box {
	width: a(b)
}

type-of(값) ⇒ 값의 타입을 반환

string의 함수

quote(스트링) ⇒ 양쪽에 따옴표로 감싸서 반환

unquote(스트링) ⇒ 해당 스트링에 쌍 따옴표를 제거하여 반환

index(문자열, 서치어) ⇒ 서치어가 문자열의 몇번 index인지 반환

insert(문자열, 데이터, 인덱스) ⇒ 문자열의 인덱스 자리에 데이터를 삽입해서 반환(인덱스를 음수로 줘서 오른쪽에서부터 셀 수도 있음)

length(문자열) ⇒ 문자열의 길이

slice(문자열, startIdx(, endIdx)) ⇒ 문자열의 startIdx~endIdx까지 잘라서 반환

to-upper-case(문자열) / to-lower-case(문자열) ⇒ 문자열의 모든 문자를 대문자/소문자로

unique-id() ⇒ 고유한 문자열을 랜덤하게 반환

인덱스는 모두 1부터 시작함에 주의

전역 함수

hsl, hsla ⇒ 색 관련 매개변수를 취하고, 해당하는 컬러를 반환
if ⇒ if(condition, true, false), 삼항 연산자로 사용
rgb, rgba

같은 기능을 하는 전역함수와 모듈의 함수가 있을 수도 있다. 모듈이 더 최신임

12. 디버그

@debug 메세지 : console.log와 유사한 기능

@warn 메세지 : console.warn과 유사

@error 메세지 : throw와 유사. 에러를 던져서 컴파일을 xx

background- 속성의 값은 쉼표로 구분해서 여러개 둘 수 있음

맨 위의 값이 제일 위에 표시
값으로 여러개 둘 수 있는 속성

background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size


background: 
		url("/a.png") no-repeat center,
		url("/b.png") repeat-x,
		url("/c.png") repeat-y center	
}

scss에서 소수는 소숫점 이하 10자리 까지만 컴파일 됨

SCSS 문법

1. 주석

2. 중첩 (nesting)

3. 변수

4. 데이터(값)

5. 연산자

6. 재활용

7. 확장

8. 함수

9. 조건과 반복

10. 가져오기, 모듈

11. 내장 모듈

12. 디버그