Skip to content

Commit 6ca91d1

Browse files
seonhopseonhop
committed
nomadcoders#3.2 Variables and Nesting
#Variable SCSS 파일을 만들때 _을 넣는건 css로 변환되지 않길 원하는 것들을 저장함 ㄴ $을 붙여서 사용 #Nesting(둥지) 부모 내 자식 요소들의 CSS를 굳이 class를 주지 않아도 된다. ㄴ매우 큰 장점이라고 생각함 그런 active, hover 같은 활동적인 CSS를 넣어주고 싶다!? ㄴ& 넣기
1 parent 4b2cac2 commit 6ca91d1

8 files changed

Lines changed: 20524 additions & 4096 deletions

File tree

‎dist/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.babel.js‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,33 @@
11
import gulp from "gulp";
22
import del from "del";
3-
import sass from "gulp-sass";
43
import minify from "gulp-csso";
54
import autoprefixer from "gulp-autoprefixer";
65

7-
sass.compiler = require("node-sass");
6+
const sass = require("gulp-sass")(require("node-sass"));
87

98
const routes = {
10-
css: {
11-
watch: "src/scss/*",
12-
src: "src/scss/styles.scss",
13-
dest: "dist/css"
14-
}
9+
css: {
10+
watch: "src/scss/*",
11+
src: "src/scss/styles.scss",
12+
dest: "dist/css",
13+
},
1514
};
1615

1716
const styles = () =>
18-
gulp
19-
.src(routes.css.src)
20-
.pipe(sass().on("error", sass.logError))
21-
.pipe(
22-
autoprefixer({
23-
flexbox: true,
24-
grid: "autoplace"
25-
})
26-
)
27-
.pipe(minify())
28-
.pipe(gulp.dest(routes.css.dest));
17+
gulp
18+
.src(routes.css.src)
19+
.pipe(sass().on("error", sass.logError))
20+
.pipe(
21+
autoprefixer({
22+
flexbox: true,
23+
grid: "autoplace",
24+
})
25+
)
26+
.pipe(minify())
27+
.pipe(gulp.dest(routes.css.dest));
2928

3029
const watch = () => {
31-
gulp.watch(routes.css.watch, styles);
30+
gulp.watch(routes.css.watch, { usePolling: true }, styles);
3231
};
3332

3433
const clean = () => del(["dist/styles.css"]);

‎index.html‎

Lines changed: 12 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="dist/css/reset.css" />
7-
<link rel="stylesheet" href="dist/css/styles.css" />
8-
<title>(S)CSS Masterclass</title>
9-
</head>
10-
<body>
11-
<header>
12-
<nav>
13-
<ul>
14-
<li>Search</li>
15-
<li>Won Hundred</li>
16-
<li>Shopping Bag (0)</li>
17-
<li>Journal</li>
18-
<li>Women</li>
19-
<li>Men</li>
20-
<li>Currency</li>
21-
</ul>
22-
</nav>
23-
</header>
24-
<main>
25-
<h1>Spring Summer – Volume 2</h1>
26-
<h6>
27-
Get your wardrobe ready for those upcoming warm spring days with our
28-
second delivery of Spring Summer 20.
29-
</h6>
30-
<div class="hero">
31-
<div class="hero__img"></div>
32-
<div class="hero__img"></div>
33-
<div class="hero__img"></div>
34-
<div class="hero__img"></div>
35-
</div>
36-
<section class="arrivals">
37-
<h4 class="arrivals__title">
38-
Selected New Arrivals
39-
</h4>
40-
<div class="wrapper">
41-
<article class="product">
42-
<div class="product__photo"></div>
43-
<div class="product__data">
44-
<span class="name">Jonah Shirt - Zen Blue</span>
45-
<span class="price">900 DKK</span>
46-
</div>
47-
</article>
48-
<article class="product">
49-
<div class="product__photo"></div>
50-
<div class="product__data">
51-
<span class="name">Jonah Shirt - Zen Blue</span>
52-
<span class="price">900 DKK</span>
53-
</div>
54-
</article>
55-
<article class="product">
56-
<div class="product__photo"></div>
57-
<div class="product__data">
58-
<span class="name">Jonah Shirt - Zen Blue</span>
59-
<span class="price">900 DKK</span>
60-
</div>
61-
</article>
62-
<article class="product">
63-
<div class="product__photo"></div>
64-
<div class="product__data">
65-
<span class="name">Jonah Shirt - Zen Blue</span>
66-
<span class="name">900 DKK</span>
67-
</div>
68-
</article>
69-
<span class="arrivals__category">Shop Women's New Arrivals</span>
70-
<span class="arrivals__category">Shop Men's New Arrivals</span>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="dist/css/reset.css" />
7+
<link rel="stylesheet" href="dist/css/styles.css" />
8+
<title>(S)CSS Masterclass</title>
9+
</head>
10+
<body>
11+
<h2>Title</h2>
12+
<div class="box">
13+
<h2>Another Title</h2>
7114
</div>
72-
</section>
73-
</main>
74-
<footer>
75-
<div></div>
76-
<div></div>
77-
<div></div>
78-
<div></div>
79-
</footer>
80-
</body>
15+
</body>
8116
</html>

0 commit comments

Comments
 (0)