[React] Sass 알아보자(1)

Sass 하나의 언어이다.

Sass 설치하기

npm install sass

---

scss 사용해보기

SassExample.jsx

import React from 'react';
import './Example.scss';

export default function SassExample() {
  return (
    <div>
        <p>Example</p>
        <p className='font'>Example</p>
    </div>
  )
}

Example.scss

$font-stack: Helvetica, sans-serif;
$primary-color:red;

.font{
    font:100% $font-stack;
    color:$primary-color;
}

css와 비슷하지만 css를 확장하여 변수를 쓸 수 있게 한다.

---

Nesting

SassExample.jsx

import React from 'react';
import './Example.scss';

export default function SassExample() {
  return (
    <div>
        <p>Example</p>
        <p className='font'>Example</p>
        <nav>
            <ul>
                <li>123</li>
                <li>
                    <a>456</a>
                </li>
            </ul>
        </nav>
    </div>
  )
}

Example.scss

$font-stack: Helvetica, sans-serif;
$primary-color:red;

.font{
    font:100% $font-stack;
    color:$primary-color;
}

.text{
    font:100% $font-stack;

}


nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }

위에 코드를 css로 변환해서 보면

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

scss가 css보다 훨씬 코드가 간결한 걸 할 수 있다.

---

Modules

foundation/_base.scss

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: pink;

.base {
  font: 100% $font-stack;
  color: $primary-color;
}

Example.scss

@use 'foundation/base';

@use를 통해 _base.scss에 있는 값을 가져와서 사용할 수 있다.

        <p className='base'>Hello,world</p>

Example.scss

  .inverse{
    background-color: base.$primary-color;
    color:blue;
  }

base의 있는 값을 가져다가 사용할 수 있다.

---

mixins

Example.scss

  @mixin theme($theme: DarkGray) {
    background: $theme;
    box-shadow: 0 0 1px rgba($theme, .25);
    color: #fff;
  }
  
  .info {
    @include theme;
  }
  .alert {
    @include theme($theme: DarkRed);
  }
  .success {
    @include theme($theme: DarkGreen);
  }
  

css 파일이라면

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

---

Extend/Inheritance

  /* This CSS will print because %message-shared is extended. */
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  
  // This CSS won't print because %equal-heights is never extended.
  %equal-heights {
    display: flex;
    flex-wrap: wrap;
  }
  
  .message {
    @extend %message-shared;
  }
  
  .success2 {
    @extend %message-shared;
    border-color: green;
  }
  
  .error {
    @extend %message-shared;
    border-color: red;
  }
  
  .warning {
    @extend %message-shared;
    border-color: yellow;
  }

---

Operators

특정 값을 비교하여 연산을 하여 css를 적용할 수 있다. (+,-,*,/,%)

---