ABCDEGHIJKLMNOPQRSTUVWXYZ
1
2
[대분류] 강의명{중분류} 강의명설명주의사항Code
3
SASS01. 개요 - 01. SCSS 개요CSS는 간단한 걸 작성할때는 쉽지만 길어질수록 불편함

단점을 보완하기 위해

웹에서는 표준 CSS만 동작할 수 있기 때문에 SCSS을 작성하고 컴파일하여 사용		SCSS
4
5
6
7
8
9
10
11
Compiled to
12
13
14
15
16
17
18
19
01.개요 - 02. Sass와 SCSS 차이점-SCSS : CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 CSS의 상위집합SCSS
20
 -SASS
.list
width: 100px
float: left

------------------

-SCSS
.list {
width: 100px;
float: left;
}
21
22
23
24
25
26
27
Compiled to
28
29
30
31
32
33
34
35
01. 개요 - 03. 컴파일 - SassMeister웹은 표준 CSS만 적용받기 때문에 SCSS를 표준 CSS로 컴파일하여 사용해야함.

연습사이트인

SassMeister 소개		SCSS
36
.container {
width: 100px;
.item {
width: 200px;
}
}
37
38
39
40
41
42
43
Compiled to
44
.container {
width: 100px;
}

.container .item {
width: 200px;
}
45
46
47
48
49
50
51
01. 개요 - 04. 컴파일 - Parcel터미널에 입력

npm init -y => package.json 이 만들어짐

npm install --save-dev
parcel-bundler = npm i -D parcel-bundler
=> parcel-bundler 설치

npx parcel index.heml(scss 부른 링크가 작성되어있는 문서)
=> 필요한 모듈을 알아서 설치해줌
설치가 다되면 링크주소를 주는데 그게 바로 라이브 서버		terminal
52
npm init -y => package.json 설치

npm i -D parcel-bundler => parcel-bundler 설치

npm parcel index.html => 연결
53
54
55
56
57
58
59
Compiled to
60
61
62
63
64
65
66
67
02. 문법 - 01. 주석// 컴파일 되지 않는 주석

/* 주석 */ 컴파일 됨

주석처리할때 줄을 잘 맞춰줘야함
뭐를?

/* 여기
* 저기
* 이렇게 */		SCSS
68
69
70
71
72
73
74
75
Compiled to
76
77
78
79
80
81
82
83
02. 문법 - 02. 데이터 종류Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항을 소개합니다.

1. Numbers: 숫자에 단위가 있거나 없습니다.

2. Strings: 문자에 따옴표가 있거나 없습니다.

3. Nulls: 속성값으로 null이 사용되면 컴파일하지 않습니다.

4. Lists: ()를 붙이거나 붙이지 않습니다.

5. Maps: ()를 꼭 붙여야 합니다.		SCSS
84
85
86
87
88
89
90
91
Compiled to
92
93
94
95
96
97
98
99
No데이터설명예시
100
1Numbers숫자1, .82, 20px, 2em…