230113 SCSS component와 사용

SCSS
- npm i scss (뭔가 잘 안된다면 npm i sass도 같이 해보기)
- npm start

 

 

ScssComponent.js

import './style/ScssComponent.scss'
import './style/style.css'

const ScssComponent = () => {
  return (
    <div className='wrap'>
      <h1>Hello, Scss</h1>
      <ul className='scss_ul'>
        <h2>scss is...</h2>
        <li>Scss01</li>
        <li className='scss_first'>Scss02</li>
        <li>Scss03</li>
      </ul>
      <ul className='scss_ul_01'>
        <li className='scss01 scss'>Scss01</li>
        <li className='scss02 scss'>Scss02</li>
        <li className='scss03 scss'>Scss03</li>
      </ul>
    </div>
  )
}

export default ScssComponent

 

App.js

// 사용하지 않는 것은 절대 넣지 말 것
import './App.css';
import ScssComponent from './Component/ScssComponent';

function App() {
  return (
    <>
      <ScssComponent />
    </>    
  );
}

export default App;

 

ScssStyle.scss

// 모든 component에서 공통적으로 사용할 내용 기입

* {margin: 0; padding: 0;}
li {list-style: none;}

$color: #8869ed;

@mixin size {
  width: 100px;
  height: 30px;
}

@mixin style {
  text-align: center;
  line-height: 30px;
  border: 1px solid #999;
  border-radius: 5px;
}

 

ScssComponent.scss

@import './ScssStyle.scss';

.wrap {
  width: 500px;
  height: 400px;
  background-color: #ccc;
  margin: 0 auto;
  padding: 30px;
  box-sizing: border-box;

  > h1 {
    color: $color;
    text-decoration: underline;
  }

  ul.scss_ul {
    h2 {
      font-size: 20px;
      color: $color;
      margin: 10px 0;
    }    
    li {
      @include size;
      @include style;
      &.scss_first { // &:nth-child(3)
        color: $color;
        margin: 5px 0;
      }
    }
  }

  ul.scss_ul_01 {
    margin: 10px 0;
   
    li {
      @include size;
      @include style;
      &:nth-child(2) {
        margin: 5px 0;
      }
    }
  }
}

 

 

style.css

/* css와 scss 혼용해서 사용가능 */

.wrap .scss_ul_01 .scss02 {
  font-weight: bold;
}

 

 

 

 

 

SCSS

- npm i styled-components (라이브러리 설치. js에서 css 사용.)

- npm start

 

 

StyledComponents.js

import styled, { keyframes } from "styled-components";

const Wrap = styled.section `
  width: ${(props) => props.width};
  height: 300px;
  background-color: #ccc;
`

const Title = styled.h1 `
  font-size: 24px;
  text-align: center;
  line-height: 300px;
  color: ${(props) => props.color? 'blue' : 'green'};
  /* React는 if문 사용불가. => 3항 연산자로 사용. */
`

const Button = styled.button `
  width: 150px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: ${(props) => props.bg || 'white'};

  &:hover {
    background-color: black;
    color: white;
  }
`

const FirstButton = styled(Button) `
  width: 200px;
`

const rotate = keyframes `
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
`

const Rotate = styled.div `
  font-size: 50px;
  padding: 30px;
  display: inline-block;
  animation: ${rotate} 1s infinite linear;
`

const StyledComponents = () => {
  return (
    <>
      <Wrap width='300px'>
        <Title color>Front-End</Title>
        <Title>React</Title>
      </Wrap>
      <Button bg='yellow'>click</Button>
      <Button>click</Button>
      <FirstButton bg='pink'>click</FirstButton>
      <Rotate>*</Rotate>
    </>
  )
}

export default StyledComponents

 

 

App.js

import './App.css';
import StyledComponents from './Component/StyledComponents';

function App() {
  return (
    <>
      <StyledComponents />
    </>    
  );
}

export default App;

 

 

 

 

 

↓  VSCODE에서 SCSS 컴파일 하는 방법

https://peamexx.tistory.com/113

vscode에서 scss 컴파일 하는 방법