HTML | SCSS

SCSS

목차

1. CSS, SASS, SCSS?
2. SCSS란?
3. SASS, SCSS가 적용되는 원리
4. Styled-component
5. Styled-component vs SCSS

1. CSS, SASS, SCSS?

   • CSS : Cascading Style Sheets - 종속형 시트
   • SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트
     • 중첩으로 들여 쓰기 사용 + 속성 구분은 줄바꿈 이용
   • SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS
     • 중괄호로 중첩을 표현 + 세미콜론으로 속성을 구분함
   • 생성 순서 : CSS < SASS < SCSS
     
     

2. SCSS란?

   • SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가짐
   • 제공하는 기능
     • 변수(Variable) 할당 : 자주 사용하는 색이나 폰트 등등 변수로 지정하여 재사용할 수 있음
     • 중첩(Nesting) 구문 : 중첩기능을 통해 쉬운 구성과 높은 가독성을 가짐
     • 모듈화(Modularity) : @use를 사용하여 파일을 분할하고 모듈화 할 수 있음
     • 믹스인(Mixins) : 함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있음(재사용성)
     • 확장&상속(Extend/Inheritance) : @extend 사용 시 css 속성 집합을 상속받을 수 있음
     • 연산자(Operators) : sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용가능
       
       

3. SASS, SCSS가 적용되는 원리

   • SASS,SCSSS는 스크립팅 언어이기 때문에 바로 웹에 적용할 수 없음
   • 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용됨
     
     

4. Styled-component

   • SCSS 라이브러리 설치 없이 SCSS 문법을 사용할 수 있음
   • 자유로운 CSS 커스텀 컴포넌트 생성
   • 컴포넌트의 props를 참조할 수 있으며, props 값에 따라 스타일을 다르게 코딩할 수 있음
     
     

5. Styled-component vs SCSS

   Styled-component	SCSS
   css in js (전역에 중첩되지 않도록 만들어줌)	css in css
   컴포넌트 상태값 전환이 활발한 동적인 웹사이트라면 추가적인 렌더링이 많을 것	컴포넌트 상태값이 변해도 반응하기 쉽지 않음
   컴포넌트 단위로 개발 → react에 유용	보이지않는 컴포넌트까지 스타일정보를 불러오다보니, 불필요한 컴파일이 추가됨

   
   
   

---

출처

SCSS
SCSS 와 styled-component
SCSS 관련 썰