Sass
Syntactically Awesome Style Sheets
CSS Preprocessor, CSS 전처리기
웹에서는 CSS만 동작을 한다. 하지만 웹이 발전하면서 CSS로 할 수 있는 효과 및 기능이 많아졌다.
그로 인해 CSS코드가 복잡해졌다. 심지어 지금 진행하는 인스타그램 클론 코딩 프로젝트의 Main 페이지 CSS 코드는 500줄이 넘는다.(리팩토링 해서...)
따라서 CSS를 보다 덜 복잡하고 반복을 피하고 유지보수도 용이하게 해주는 CSS 전처리기들이 등장했다.
전처리기의 종류
Sass, Less, Stylus
더 고도화된 CSS를 구현하기 위해서 scss를 활용하여 코딩을 하고 sass가 컴파일 해주고 다시 css로 다시 사용자에게 나타난다.
Sass 설치
npm install sass --save
- --save가 없어도 설치는 되지만 package.json에 설치된 패키지의 이름과 버전 정보를 업데이트할 수 있따.
// package.json
{
"name": "westagram-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
}
}
CSS 파일 SCSS로 확장자명 변경 후 import
Sass 파일의 확장자는 '.scss' 이다. '.css' 확장자로 되어 있는 파일을 전부 '.scss' 확장자로 바꾸고 자바스크립트 파일의 import 구문도 수정해야 한다.
Nesting 적용하기
💡Sass의 가장 기본적인 기능으로는 Nesting이 있다. 이름에서 유추할 수 있듯 둥지를 튼다는 뜻인가? scss에서는 html파일처럼 부모요소와 자식요소의 관계를 형성할 수 있다. 이를 Nesting이라고 부른다.
-
이렇게 HTML 요소의 부모자식 관계처럼 scss의 파일에서도 .search 스타일 안에 .search의 자식인 .searchId 요소를 중괄호 안에 삽입한다.
-
가상 클래스를 사용하는 경우에는 & 기호를 작성하고 적용하려는 요소 안에 작성하면 된다.
sass의 특징
변수 사용가능
연산자
