๐ช 2023. 03. 20. Monday_ scss ์ฌ์ด๋ฏ ์ฝ์ง ์์ ๋. . . ๐ช
์๋
ํ์ธ์!๐
์ค๋์ TECHIT-๋ธ๋ก์ฒด์ธ ์ค์ฟจ 3๊ธฐ์ ์ฌ์ฏ ๋ฒ์งธ ์๊ฐ์
๋๋ค ~!~!~!!!๐๐๐
* ์ด ๊ณณ์์๋ ๋น์ผ์ ๋ฐฐ์ด ๋ด์ฉ์ ๋ณต์ตํ๋ ์ฉ๋๋ก ๊ธ์ ์์ฑํ๋ ค๊ณ ํฉ๋๋ค.
* ์ค๋์ 'SCSS ํ๊ฒฝ์ธํ
' ๋ด์ฉ์ ๋ณต์ตํด๋ณด๊ฒ ์ต๋๋ค.
โ โ โ โ
โ โ
/*
์ฃผ์ํ ์
: ๋ชจ๋ ํฐ๋ฏธ๋์์ ๋์ํ์ง ์์ ์ ์์ => ๋๋๋ก cmdํฐ๋ฏธ๋์์ ์์
ํ๊ธฐ!!!
: ์ ์ฒ๋ฆฌ๊ธฐ ํ์ผ์ด ์๋ ๊ณณ์์!!! ์คํ ์ฝ๋ ์
๋ ฅํ๊ธฐ(step3)
*/
//step1. VS Code ํฐ๋ฏธ๋ ์ฐฝ์์ ์
๋ ฅ
๐ธnpm install -g sass
//step2. sass๊ฐ ์ค์น๋์ด๋์ง ํ์ธํ๊ธฐ
๐ธsass --version
//ste3. index.htmlํ์ผ๊ณผ input.scssํ์ผ ์์ฑ
//step4. index.html ํ์ผ ์์ฑ ํ ์ ์ฒ๋ฆฌ๊ธฐ(ํ์ผ) ์คํํ๊ธฐ
๐ธsass --watch input.scss style.css
๐ธsass --watch (์์ฑํ scssํ์ผ๋ช
) (์์ฑํ cssํ์ผ๋ช
)
//step5. style.css ํ์ผ ์๋ ์์ฑ๋
โ๏ธindex.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello, SCSS!</h1>
</body>
</html>
โ๏ธinput.scss
//responsive || responsive.scss ๋ก ์ฌ์ฉ๊ฐ๋ฅ
@import "responsive.scss";
body {
margin: 0;
background-color: lightpink;
@include responsive("tablet") {
background-color: red; }
@include responsive("laptop") {
background-color: blue; }
@include responsive("pc") {
background-color: deeppink; }
}
h1 {
@include responsive("tablet") {
color: white; }
}
โ๏ธresponsive.scss
$tablet: 768px;
$laptop: 1024px;
$pc: 1280px;
// ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ํ์ฉํด ๋ฐค์ํ ์น ๋์์ธ ํ๊ธฐ!
@mixin responsive($device) {
@if $device == "tablet" {
@media (min-width: $tablet) {
@content; }
}
@else if $device == "laptop" {
@media (min-width: $laptop) {
@content; }
}
@else if $device == "pc" {
@media (min-width: $pc) {
@content; }
}
}
โ๏ธ ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๊ธฐ๋ฅ์ ํ์ฉํด ๋ฐ์ํ ์น๋์์ธ์ ํ์๋ค.
โ๏ธ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ์ต์ ๋๋น๋ฅผ ์ค์ ํด, ์ฐฝ์ ํฌ๊ธฐ๊ฐ ๋ณํํ ๋ ๋์์ธ์ด ๋ณ๊ฒฝ๋๋๋ก ์ค์ ํ์๋ค.
โ โ โ
โ๏ธ$(๋ณ์)
: ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉํ ๊ฐ์ ๋ณ์๋ก ์ ์ฅํ์ฌ ํธ๋ฆฌํ๊ฒ ๊ด๋ฆฌํ ์ ์๋ค.
//์ ์ธ๋ ๋ธ๋ก ๋ด์์๋ง ํจ๋ ฅ์ด ์๋ค.
๐ธ $tablet: 768px;
โ โ โ
โ๏ธ Mixin
: Mixin์ ํ์ฉํด ์ง์ ํ ์คํ์ผ์ ์ฌ์ฌ์ฉํ ์ ์๋ค.
: 2๊ฐ์ .scss ํ์ผ ์ฐ๊ฒฐํ ํ ๋ชจ๋ ์ฌ์ฉํ๊ธฐ !
/* ์ฌ์ฉ๋ฒ
๐ธ์ ์ธ
@mixin mixin๋ช
(์ ๋ฌ ๋ฐ์ ์ธ์) { }
๐ธ์ ์ฉ
@include mixin๋ช
(์ ๋ฌํ ์ธ์) {}
*/
โ โ โ
โ๏ธ @if, @else if
: ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ถ๊ธฐ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค!
@if ๋ณ์ (์กฐ๊ฑด๋ฌธ) {
์กฐ๊ฑด๋ง์กฑ์ ์๋ต ๊ตฌ๋ฌธ
}
@else if ๋ณ์ (์กฐ๊ฑด๋ฌธ) {
์กฐ๊ฑด๋ง์กฑ์ ์๋ต ๊ตฌ๋ฌธ
}
@else if ๋ณ์ (์กฐ๊ฑด๋ฌธ) {
์กฐ๊ฑด๋ง์กฑ์ ์๋ต ๊ตฌ๋ฌธ
}
โ โ โ
๊บพ์๋๋ฐ๋ ๊ทธ๋ฅ ํ๋ ๋ง์ใ ใ ใ ์ข๋ค์! ์ฃผ์ฐ๋ TIL ์ต๊ณ ..