CSS vs SASS vs styled Component - FE study13

1. CSS

Cascading Style Sheet : 웹의 디자인을 담당(표준)

App.js

import './App.css'

App.css

.container {
  display: flex;
}

해당 js 파일에 css파일을 import 해서 사용.

특징 : 메뉴얼적인 방법으로 직접 Class , ID 네이밍하며 작성한다. 사용법이 간단함. 하지만 요소들이 많아질수록 관리가 힘들어지고 직관성이 떨어짐.

2. SASS

Syntactically Awesome StyleSheets : 문법적으로 굉장한 스타일시트 (!!)

App.scss

// 변수사용
$black: #000000;
// 함수사용
@mixin square($a) {
  $px: 32px * $a;
  width: $px;
  height: $px;
}

// .red 클래스가 .box 와 함께 사용 됐을 때
.box {
  // & : this의 역할
  &.red {
  background: $black;
  @include square(1); // 함수불러오기
  }
}

사용 시, node-sass 라이브러리를 통해 scss -> css 변환을 해주어야함.

특징 : 변수나 함수, 조건문 반복문 같은 프로그래밍적인 요소로 css를 컨트롤할 수 있어 css요소들을 관리하기 쉽고 가독성이 좋아진다.

3. styled-Components

style 요소들의 컴포넌트화

라이브러리 설치 : npm i styled-components

import styled from 'styled-components';

const MyBox = styled.div`
  border: 2px solid black;
  background: ${props => props.primary ? 'blue' : 'red'};
`;

// ...

return <div>
  <MyBox primary/>
</div>

특징 : 스타일을 컴포넌트화(props 사용가능) 해서 관리하기 때문에 js, css 따로 관리하지 않고 더욱더 직관적으로 관리 가능. 문법이 scss 와 유사함. 반대로 컴포넌트화를 남용할 경우, 더 헷갈릴 수도 있음