TIL
여전히 무서운 리액트
SCSS
SASS 의 3번째 버전에서 추가되었고 SASS 의 모든 기능을 사용할 수 있으며 CSS 와 호환도 잘 된다고 한다!!
SCSS 를 사용하려면 아래의 패키지 설치를 해야한다.
yarn add node-sass@4.141 open-color sass-loader classnames
SCSS 의 주요 문법
sassmeister 에서 검색하면 잔뜩 나온다고함.
- 기본문법은 CSS와 동일
( CSS를 갖다 붙여도 문제없음 ) - Nesting 이 가능
( 축약형으로 묶을 수 있음 )
div {
p {
color: #888888;
font: {
family:sans-serif;
size: 14px;
}
}
img {
width: 400px;
}
} // 내 눈엔 너무 보기 어지러운데,,,- 이어쓰기가 가능
( 상위 요소 이어쓰기는&로! 클래스명 등 글자도 가능 )
/scss
div {
background-color: green
&:hover { background-color: blue }
}
.div {
background-color: green
&_blue { background-color: blue }
}- 문자열을 치환할 수 있음
( 변수를 쓸 수 있다는 말! )
$defaultSize: 20px;
$className: blue;
p{
font-size: #{$defaultSize};
&.#{$className} {color: #{$className}}
}SCSS 를 사용하는 이유
기존의 순수 CSS 는
- state 값에 따라 스타일을 바인딩 해야 하는 경우
- props 가 많아지고 그에 따른 조건부 스타일링도 많아질 때
- 전체적으로 같은 형태이나 일부분만 변경해서 새로운 컴포넌트를 만들 때
- 같은 스타일은 가진 다른 선택자의 경우
- 색상 값과 같은 반복이 되는 키워드가 존재할 때
위의 경우 CSS 클래스가 많아지거나 길이가 길어질 수 있다는 단점이 있다.반면에 SASS 는 많은 CSS 파일이 얽혀있더라도 하나의 스타일 시트로 컴파일이 되어 HTTP 요청에 의한 성능 이슈를 해결할 뿐더러, 앞서 말한 SCSS 문법의 장점들로 구조화가 쉽고 협업에서도 구조를 논리적으로 파악할 수 있다는 장점 때문에 쓴다고 한다.
그렇다면 SCSS 도 단점이 있지 않을까?
SCSS 는 여전히 클래스 명에 대한 고민이 있으며, 정해진 가이드가 없으면 구조가 복잡해지고, 스크롤 지옥에 빠지게 되며, CSS 클래스로 조건부 스타일링을 해야 한다는 단점이 있다.그래서 사용하는 것이 styled-components!!!
Tagged 템플릿 리터럴을 이용해 스타일 정보를 실제 CSS 코드를 사용하여 자바스크립트 파일 안에 스타일을 선언하는 'CSS-in-JS' 방식 중 하나이다.
styled-components
더 이상 class 이름을 지을 필요가 없고,
컴포넌트에 스타일을 적기 때문에 간단하고 직관적이다.
yarn add styled-components패키지를 설치하고,
import styled from 'styled-components'로 불러오기!
const Nemo = styled.div`
width: 150px;
height: 150px;
background-color: #eee;
margin: 10px;
`
// Nemo는 div에 이름을 붙여준 거나 마찬가지 이며
<Nemo></Nemo>
// 처럼 사용할 수 있다.
찾아볼수록 styled-components 의 활용법은 많았다.
그래서 이만 줄이고 링크를 남겨보려구요,,
여기서 참고를 많이 했어요.
