조금의 sass 그리고 css module

https://codesandbox.io/s/pedantic-darwin-jvgioy?file=/src/styles.module.scss 

pedantic-darwin-jvgioy - CodeSandbox

 

sass 에 대해 조금 배웠다.

변수를 선언할수도 있고, if문 for 모두 사용할 수 있었다. 

가장 와닿았던 것은 mixin 기능인데 다음처럼 sample 이라는 mixin 을 만들면 재사용이 가능하게끔 만들어져있다.

@content 를 추가하면 @include 한 class 에서 css 를 추가할 수도 있다.

.App {
  font-family: sans-serif;
  text-align: center;
}

@mixin sample{
	display: flex;
	justify-content : center;
	align-items : center;
  @content
}

.yell {
  @include sample();
  background-color:yellow;
}

.re {
  @include sample();
  background-color:red;
}

 

css module

이걸 왜 이제야 알게되었을까.. 

현재 프로젝트를 진행하는 것에서 css 클래스가 겹쳐서 골치가 아픈 상황이 참 많았는데 css module 을 사용하면 딱 그 css 파일만 사용하게 되므로 css 겹쳐서 원하지 않은 스타일이 들어가는 것을 막을 수 있었다.

 

import React from "react";
import style from "./day.module.scss";
const test = () => {
  return <div className={style.yell}>test</div>;
};

export default test;

 

styled-component 에서 mixin 을 적용하는 방법

import React from "react";
import Styled, {css} from "styled-components";

const Button = Styled.button`
  color: white;
  background-color: black;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
`;

const hover = css`
  &:hover {
    background-color: skyblue;
  }
`;

const PinkButton = Styled(Button)`
  background-color: pink;
  ${hover}
`;

const GreenButton = Styled(Button)`
    background-color: green;
    ${hover}
`;

function App() {
  return(
    <div className="App">
      <Button>Button</Button>
      <PinkButton>PinkButton</PinkButton>
      <GreenButton>GreenButton</GreenButton>
    </div>
  )
}

export default App;

https://codesandbox.io/s/vibrant-lamport-fhcy7k?file=/src/App.js 

 

 

Props 를 사용해 가변 css 주는 방법

const Button = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 50px;
  border-radius: 10px;
  background-color: ${(props) => props.back};
  color: white;

  ${(props) =>
    props.margin &&
    css`
      margin-top: 5px;
    `}

  ${(props) =>
    props.ma &&
    css`
      margin-top: 100px;
    `}
`;