๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’ฌ/ใ…ใ……ใ…Œใ…‹ใ…ใ…… ์ฑŒ๋ฆฐ์ง€

29์ผ์ฐจ

๐Ÿฆ 

29์ผ์ฐจ

 

Part 6. SCSS

Ch 1. SCSS

 


 

 

Ch 1. SCSS

 

 

SCSS์˜ ์ค‘์ฒฉ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ์„ ํƒ์ž ๋ฐ˜๋ณต์„ ์ค„์—ฌ์ค€๋‹ค!
SCSS๋ฅผ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ํ†ตํ•ด CSS๋กœ ๋ณ€ํ™˜(์ปดํŒŒ์ผ)ํ•œ๋‹ค.

 

https://sass-lang.com/guide

 

Sass: Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s

sass-lang.com

https://www.sassmeister.com/

 

SassMeister | The Sass Playground!

SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...

www.sassmeister.com

 

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <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="./main.scss" />
  </head>
  <body>
    <body>
      <div class="container">
        <h1>Hello SCSS!</h1>
      </div>
    </body>
  </body>
</html>
/* main.scss */

$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}

 

 

์ค‘์ฒฉ
&amp;amp;amp;amp; - ์ƒ์œ„(๋ถ€๋ชจ) ์„ ํƒ์ž ์ฐธ์กฐ 1
&amp;amp;amp;amp; - ์ƒ์œ„(๋ถ€๋ชจ) ์„ ํƒ์ž ์ฐธ์กฐ 2

๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ž€ ์ด๋ฆ„์„ ํ†ตํ•ด ๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•œ ๋ฒ”์œ„๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๊ฒƒ์œผ๋กœ ์ผ์ข…์˜ ์œ ํšจ๋ฒ”์œ„๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ•œ๋‹ค.

์ค‘์ฒฉ๋œ ์†์„ฑ
๋ณ€์ˆ˜(Variables)
๋ณ€์ˆ˜ - ์œ ํšจ ๋ฒ”์œ„, ์žฌํ• ๋‹น
์‚ฐ์ˆ  ์—ฐ์‚ฐ 1
์‚ฐ์ˆ  ์—ฐ์‚ฐ 2
์žฌํ™œ์šฉ(Mixins)
์žฌํ™œ์šฉ(Mixins) - ์ธ์ˆ˜
์žฌํ™œ์šฉ(Mixins) - ์ธ์ˆ˜ - ๊ธฐ๋ณธ๊ฐ’
๋ฐ˜๋ณต๋ฌธ @for
ํ•จ์ˆ˜ @function
์ƒ‰์ƒ ๋‚ด์žฅ ํ•จ์ˆ˜

/* ๊ฐ€์ ธ์˜ค๊ธฐ */

@import "./sub", "./sub2.scss";

$color: royalblue;

.container {
  h1 {
    color: $color;
  }
}
/* ๋ฐ์ดํ„ฐ ์ข…๋ฅ˜ */

$number: 1; // .5, 100px, 1em
$string: bold; // relative, "../images/a.png"
$color: red; // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true; // false
$null: null;
$list: orange, royalblue, yellow; // ๋ฐฐ์—ด
$map: ( // ๊ฐ์ฒด
    o: orange,
    r: royalblue,
    y: yellow
);

.box{
    width: 100px; // number
    color: red; // color
    position: relative; // string
}

๋ฐ˜๋ณต๋ฌธ @each
์žฌํ™œ์šฉ @content

 

'๐Ÿ’ฌ > ใ…ใ……ใ…Œใ…‹ใ…ใ…… ์ฑŒ๋ฆฐ์ง€' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

31์ผ์ฐจ  (0) 2022.03.18
30์ผ์ฐจ  (0) 2022.03.18
28์ผ์ฐจ  (0) 2022.03.17
27์ผ์ฐจ  (0) 2022.03.17
26์ผ์ฐจ  (0) 2022.03.16