컴포넌트 스타일 Sass

Syntactically Awesome Style Sheets
유지보수, 모듈화

두개의 확장자

.sass( 중괄호 없이 작성 가능 ),
. scss ( 중괄호 포함하여 작성 )

시작하기

npx create-react-app [파일이름]
yarn add node-sass

사용법

• 대체로 .scss 파일로 생성

• 글로벌 적으로 선언 하고 싶은 것은 $ 통해 해도된다.

• css 와 비슷하게 className으로 설정한 것을 통해서 스타일을 설정해 준다.

• 동적인 느낌을 주려면 &을 통해서 따로 설정 하면된다. ( & 는 자기 자신을 가르킨다. )

 &:hover {
    background: lighten($blue, 10%);
  }

  &:active {
    background: darken($blue, 10%);
  }

• classnames 라이브러리 를 사용하면 객체일때의 값도 문자열로 나타내어서 사용할 수 있다.

ex ) classNames ( 'busan' , { seoul : true }, undefined, 0 , 'jeju' );
=> 'busan seoul jeju'

• 버튼여러개에서 간격을 주기 위해서는 각각의 버튼을에 margin값을 주면 된다.

버튼 클래스 중괄호 밖에 선언해도 되고 안에 설정해도 된다.

<밖>
  
.Button + .Button {
  margin-left: 1rem;
  
}

<안>
  
& + & {
  margin-left: 1rem;
  
}

• 중복되는 코드가 있을때는 내장 되어있는 mixin을 사용해줍니다.
• 인자를 줄것을 지정합니다.

@mixin button-color($color) {
  
   background: $color;

  &:hover {
    background: lighten($color, 10%);
  }

  &:active {
    background: darken($color, 10%);
  }
}
// 원래는 각각의 버튼마다. 위의 코드를 중복적으로 가지고 있었습니다.
// 이렇게 모듈화 시켜서 사용할 때는 include를 사용합니다.

&.blue {
	@include button-color($blue)
}


&.gray {
	@include button-color($gray)
}

• outline, fullWidth 두 개의 값은 불린이다. 그래서 객체 안에 넣어서 표현하면 된다.

• ...rest 를 사용하여 이벤트 처리

전체적인 코드

button.js

import React from "react";
import classNames from "classnames";
import "./Button.scss";

export default function Button({ children, size, color, outline, fullWidth }) {
  return (
    <button
      className={classNames("Button", size, color, { outline, fullWidth })}
    >
      {children}
    </button>
  );
}

Button.defaultProps = {
  size: "medium",
  color: "blue"
};

button.scss

$blue: #228be6;
$gray: #868e96;
$pink: #ffc9c9;


@mixin button-color($color) {
  background: $color;

  &:hover {
    background: lighten($color, 10%);
  }

  &:active {
    background: darken($color, 10%);
  }

  &.outline {
    color: $color;
    background: none;
    border: 1px solid $color;

    &:hover {
      background: $color;
      color: white;
    }
  }
}

.Button {
  display: inline-flex;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  cursor: pointer;

  padding-left: 1rem;
  padding-right: 1rem;

  &.large {
    height: 3rem;
    font-size: 1.25rem;
  }

  &.medium {
    height: 2.25rem;
    font-size: 1rem;
  }

  &.small {
    height: 1.75rem;
    font-size: 1rem;
  }

  &.blue {
    @include button-color($blue)
  }

  &.gray {
    @include button-color($gray)
  }

  &.pink {
    @include button-color($pink)
  }

  &+& {
    margin-left: 1rem;
    margin-bottom: 1rem;
  }

  &.fullWidth {
    width: 100%;
    justify-content: center;

    &+& {
      margin-left: 0;
      margin-top: 1rem;
    }
  }
}

// .Button + .Button {
//   margin-left: 1rem;

// }