01-개요 및 예시

1. Sass

Sass 공식 사이트
- CSS을 확장하는 Preprocessing
- Sass 가이드
cf. MDN CSS 전처리기

1.1 예제 : 가이드 따라해보기

1$ npm install sass

1.1.1 App.js

1import './App.css'
2import Example from './components/SassExample/Example'
3// import EmotionExample from './components/EmotionExample/EmotionExample';
4// import StyledComponentsExample from './components/StyledComponentsExample/StyledComponentsExample';
5
6export default function App() {
7  return (
8    <div className="App">
9      <Example />
10      {/* <EmotionExample /> */}
11      {/* <StyledComponentsExample /> */}
12    </div>
13  )
14}

1.1.2 Example.jsx

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10    </div>
11  )
12}

2. 예제1 : Variables

1// src/components/SassExample/Example.scss
2$font-stack: Helvetica, sans-serif;
3$primary-color: red;
4
5.font {
6  font: 100% $font-stack;
7  color: $primary-color;
8}

3. 예제2 : Nesting

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24    </div>
25  )
26}

1// src/components/SassExample/Example.scss
2// 1. Variables
3$font-stack: Helvetica, sans-serif;
4$primary-color: red;
5
6.font {
7  font: 100% $font-stack;
8  color: $primary-color;
9}
10
11.text {
12  font: 100% $font-stack;
13}
14
15// 2. Nesting
16nav {
17  ul {
18    margin: 0;
19    padding: 0;
20    list-style: none;
21  }
22
23  li {
24    display: inline-block;
25  }
26
27  a {
28    display: block;
29    padding: 6px 12px;
30    text-decoration: none;
31  }
32}

4. 예제3 : Modules

1// src/components/SassExample/foundation/_base.scss
2$font-stack: Helvetica, sans-serif;
3$primary-color: hotpink;
4
5.base {
6  font: 100% $font-stack;
7  color: $primary-color;
8}

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// 3. Modules
7.inverse {
8  background-color: base.$primary-color;
9  color: white;
10}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26    </div>
27  )
28}

5. 예제4 : Mixins

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// 4. Mixins
7@mixin theme($theme: DarkGray) {
8  background: $theme;
9  box-shadow: 0 0 1px rgba($theme, 0.25);
10  color: #fff;
11}
12
13.info {
14  @include theme;
15}
16.alert {
17  @include theme($theme: DarkRed);
18}
19.success {
20  @include theme($theme: DarkGreen);
21}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29    </div>
30  )
31}

6. 예제5 : Extend/Inheritance

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// 5. Extend/Inheritance
7/* This CSS will print because %message-shared is extended. */
8%message-shared {
9  border: 1px solid #ccc;
10  padding: 10px;
11  color: #333;
12}
13
14.message {
15  @extend %message-shared;
16}
17
18.success2 {
19  @extend %message-shared;
20  border-color: green;
21}
22
23.error {
24  @extend %message-shared;
25  border-color: red;
26}
27
28.warning {
29  @extend %message-shared;
30  border-color: yellow;
31}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29      <p className="message">message</p>
30      <p className="success2">success2,</p>
31      <p className="error">error,</p>
32      <p className="warning">warning,</p>
33    </div>
34  )
35}

7. 예제6 : @if and @else

https://sass-lang.com/documentation/at-rules/control/if

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// 6. @if and @else
7@mixin avatar($size, $circle: false) {
8  width: $size;
9  height: $size;
10  background-color: aqua;
11
12  @if $circle {
13    border-radius: $size / 2;
14  }
15}
16
17.square-av {
18  @include avatar(100px, $circle: false);
19}
20.circle-av {
21  @include avatar(100px, $circle: true);
22}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29      <p className="message">message</p>
30      <p className="success2">success2,</p>
31      <p className="error">error,</p>
32      <p className="warning">warning,</p>
33      <div className="square-av">square-av,</div>
34      <div className="circle-av">circle-av,</div>
35    </div>
36  )
37}

8. 예제7 : @function

https://sass-lang.com/documentation/at-rules/function

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 셍략
5
6// @function
7@function pow($base, $exponent) {
8  $result: 1;
9  @for $_ from 1 through $exponent {
10    $result: $result * $base;
11  }
12  @return $result;
13}
14
15.sidebar {
16  float: left;
17  margin-left: pow(4, 3) * 1px;
18}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29      <p className="message">message</p>
30      <p className="success2">success2,</p>
31      <p className="error">error,</p>
32      <p className="warning">warning,</p>
33      <div className="square-av">square-av,</div>
34      <div className="circle-av">circle-av,</div>
35      <div className="sidebar">sidebar,</div>
36    </div>
37  )
38}

9. 에제8 : @error

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// @error
7@mixin reflexive-position($property, $value) {
8  @if $property != left and $property != right {
9    @error "Property #{$property} must be either left or right.";
10  }
11
12  $left-value: if($property == right, initial, $value);
13  $right-value: if($property == right, $value, initial);
14
15  left: $left-value;
16  right: $right-value;
17  [dir='rtl'] & {
18    left: $right-value;
19    right: $left-value;
20  }
21}
22
23.sidebar {
24  @include reflexive-position(top, 12px); // 에러날 곳을 띄워줄 수 있다.
25  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
26  // Error: Property top must be either left or right.
27}

뒤 예제를 위해 확인이 끝나면 주석 처리

10. 예제9 : Interpolation

https://sass-lang.com/documentation/style-rules/declarations#interpolation

벤더 프리픽스

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// Interpolation
7@mixin prefix($property, $value, $prefixes) {
8  @each $prefix in $prefixes {
9    -#{$prefix}-#{$property}: $value;
10  }
11  #{$property}: $value;
12}
13
14.gray {
15  @include prefix(filter, grayscale(50%), moz webkit o ms);
16}
17
18.button {
19  @include prefix(background, linear-gradient(red, yellow), moz webkit o ms);
20}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29      <p className="message">message</p>
30      <p className="success2">success2,</p>
31      <p className="error">error,</p>
32      <p className="warning">warning,</p>
33      <div className="square-av">square-av,</div>
34      <div className="circle-av">circle-av,</div>
35      <div className="sidebar">sidebar,</div>
36      <div className="gray">Grays</div>
37      <div className="button">button</div>
38    </div>
39  )
40}

11. 예제10 : in-sassscript

https://sass-lang.com/documentation/interpolation#in-sassscript

1// src/components/SassExample/Example.scss
2@use 'foundation/_base.scss'; // 3. Modules
3
4// 생략
5
6// In SassScript
7@mixin inline-animation($duration) {
8  $name: inline-#{unique-id()};
9
10  @keyframes #{$name} {
11    @content;
12  }
13
14  animation-name: $name;
15  animation-duration: $duration;
16  animation-iteration-count: infinite;
17}
18
19.pulse {
20  @include inline-animation(2s) {
21    from {
22      background-color: yellow;
23    }
24    to {
25      background-color: red;
26    }
27  }
28}

1// src/components/SassExample/Example.jsx
2import React from 'react'
3import './Example.scss'
4
5export default function Example() {
6  return (
7    <div>
8      <p>Example</p>
9      <p className="font">Example</p>
10      <nav>
11        <ul>
12          <li>123</li>
13          <li>
14            <a>456</a>
15          </li>
16        </ul>
17      </nav>
18      <ul>
19        <li>123</li>
20        <li>
21          <a>456</a>
22        </li>
23      </ul>
24      <p className="base">Hello,</p>
25      <p className="inverse">Hello,</p>
26      <p className="info">Hello,</p>
27      <p className="alert">Hello,</p>
28      <p className="success">Hello,</p>
29      <p className="message">message</p>
30      <p className="success2">success2,</p>
31      <p className="error">error,</p>
32      <p className="warning">warning,</p>
33      <div className="square-av">square-av,</div>
34      <div className="circle-av">circle-av,</div>
35      <div className="sidebar">sidebar,</div>
36      <div className="gray">Grays</div>
37      <div className="button">button</div>
38      <div className="pulse">pulse</div>
39    </div>
40  )
41}

Index 02-Scss 요약