SCSS SASS CSS Styled-components

🙋🏻‍♀️·2022년 8월 2일
0

React-Sass 요약 링크
https://velog.io/@kimhyesu-_-/React-Sass



✍🏻CSS, SASS, SCSS?

1. CSS: Cascading Style Sheets

  • 종속형 시트/HTML을 꾸며줌/.css

2. SASS: Syntactically Awesome Style Sheets

  • 문법적으로 어썸한 스타일시트/.sass
  • 기존의 CSS의 유지보수의 불편함을 해결
  • 코드 중복을 줄일 수 있다.
  • 유효범위를 들여쓰기로 구분함
  • @import, @include, @mixin 등 다양한 함수 및 변수를 제공함

3. SCSS: Sassy CSS

  • 문법적으로 짱 멋진(Sassy) CSS/.scss
  • CSS보다 간단한 표기법. 유지보수 편의성 향상
  • CSS와 비슷함. {}중괄호와 ;세미콜론을 그대로 사용함
  • 유효범위를 중괄호로 구분함
  • 중첩(nesting)



✔️SASS와 SCSS 문법

/* SASS */
.main
  .side
    display:block
    text-align:center
    p
      color:#333
    a
      display:inline-block
      font-weight:bold

/* SCSS */
.main {
  .side {
    display: block; text-align:center;
    p{color:#333}
    a{display: inline-block;font-weight: bold;}
  }
}



🗨️결론

  1. SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주는 역할이며 추가 기능이 있는정도로 생각하면 좋을듯. SCSS와 SASS는 기능적으로는 유의미한 차이가 없음. 문법적인 방식에 차이가 있음.
  2. SASS보다 SCSS가 뒤에 나왔고 문법 차이가 있지만 SCSS가 더 넓은 범용성과 가독성이 좋고 CSS의 호환성등의 장점으로 SCSS를 사용하기를 권장하고 있다.





✍🏻styled-components란?

  • 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다. css 파일을 밖에 두지않고, 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다. 하지만 빠른 페이지로드에 불리하다는 단점이 있다.

✔️환경설정

npm install styled-components



📌wecode yakurt 프로젝트 캡쳐(스타일컴포넌트 사용)





✅Styled-components와 SCSS의 차이점

1. SCSS

  • css in css 문법으로 .js파일과 분리(이미 html 문서에 읽혀져 있는 상태라 처음엔 스타일 정보를 가져오는 양이 많더라도 추가적인 렌더링은 상대적으로 스타일컴포넌트보다 적음)
  • 다른 컴포넌트의 상태값이 변하더라도 반응하기 쉽지 않음
  • 브라우저에 보이지 않는 컴포넌트까지 읽기 때문에 불필요한 컴파일과정이 추가됨

2. Styled-components

  • css in js 방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽음
  • 동적인 이벤트가 많은 사이트=> 컴포넌트가 자주 렌더링 될 때 그만큼 스타일 정보도 다시 읽어와야 됨

0개의 댓글