<step66>'react_scss'

1) 

App.js

import './App.css';
import Buttons from './components/Buttons.js';

function App() {
  return (
    <div className="App">
      <div>
        <Buttons size="large" color="blue">Button</Buttons>
        <Buttons size="medium" color="blue">Button</Buttons>
        <Buttons size="small" color="blue">Button</Buttons>
      </div>
      <div>
        <Buttons size="large" color="gray">Button</Buttons>
        <Buttons size="medium" color="gray">Button</Buttons>
        <Buttons size="small" color="gray">Button</Buttons>
      </div>
      <div>
        <Buttons size="large" color="pink">Button</Buttons>
        <Buttons size="medium" color="pink">Button</Buttons>
        <Buttons size="small" color="pink">Button</Buttons>
      </div>
      <div>
        <Buttons size="large" color="blue" outline>Button</Buttons>
        <Buttons size="medium" color="pink" outline>Button</Buttons>
        <Buttons size="small" color="gray" outline>Button</Buttons>
      </div>
      <div>
        <Buttons size="large" color="blue" fullWidth>Button</Buttons>
        <Buttons size="large" color="pink" fullWidth>Button</Buttons>
        <Buttons size="large" color="gray" fullWidth>Button</Buttons>
      </div>
    </div>
  );
}

export default App;

App.css

.App {
  width: 600px;
  margin: 0 auto;
  margin-top: 80px;
  border: 1px solid black;
  padding: 20px;
}

Button.scss

$blue : #228be6;
$gray : #495059;
$pink : #f06598;
@mixin button-color($color){
    background: $color;
    &:hover {
        background: darken($color, 10%);
    }
    &.outline {
        color: $color;
        background: none;
        border: 1px solid $color;
        &:hover {
            background: $color;
            color: #fff;
        }
    }
}
.button {
    color: white;
    font-weight: bold;
    outline: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    padding: 16px;
    font-size: 18px;
    background: $blue;

    &+& {
        margin-left: 10px;
    }
    //사이즈 관리
    &.large {
        padding: 20px 60px;
    }
    &.medium {
        padding: 10px 30px;
    }
    &.small {
        padding: 5px 15px;
    }
    // color 관리
    &.blue {
        @include button-color($blue);
    }
    &.pink {
        @include button-color($pink);
    }
    &.gray {
        @include button-color($gray);
    }
    &.fullWidth {
        width: 100%;
        &+& {
            margin: 0;
            margin-top: 10px;
        }
    }
}

Buttons.js

import React from 'react';
import classNames from 'classname';
import './Button.scss';

const Buttons = ({children, size, color, outline, fullWidth}) => {
    return (
        // <button className={`button ${size} ${color}`}>{children}</button>
        <button className={classNames('button',size, color, {outline, fullWidth})}>{children}</button>
    );
};

export default Buttons;