이 글은 패스트캠퍼스 오늘 복습으로 [프론트엔드 개발 올인원 패키지 with React Online] 강의와 Sass(SCSS)완전 정복!을 보고 정리한 글입니다.
01.개요
01.SCSS 개요
css는 상대적으로 배우기 쉽고 재미있지만, 원시적인 문법이기 때문에 처음에 간단한 내용을 작성할 때에는 굉장히 편리하지만 프로젝트의 규모가 커지게 되면 css를 작성하는 데 불편함이 커지게 된다.
--> Sass를 통해 쉬운 문법으로 작성을 하고 나중에 CSS로 변환해서 사용!
CSS 전처리기란?
Sass, Less등을 말함.
사용방법
웹에서는 CSS만 동작하기 때문에 Sass, Less, Stylus 같은 전처리기는 직접 동작 X.
전처리기로 코딩한 것을 웹에서 동작 가능한 표준의 CSS로 컴파일을 하여 동작시킴. --> 컴파일러가 필요함
Sass를 사용하는 이유
Less나 Stylus에 비해 두 가지 전처리기의 장점을 모두 가지며 Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능함. 또한, 2006년부터 시작하여 가장 오래된 CSS확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있음
02. Sass와 SCSS의 차이점
SCSS: Sass의 모든 기능을 지원하는 CSS의 상위집합.
SCSS에는 중괄호와 세미콜론이 있지만 Sass에는 존재하지 않고, Mixin을 사용하는 문법에서 Sass는 =와 +기호로, SCSS는 @mixin과 @include로 기능을 사용함.
03. 컴파일 - SassMeister
웹에서 직접 동작할 수 없기 때문에 컴파일이 필요
다음의 사이트 사용 : SassMeister
중첩의 개념
CSS에서는 볼 수 없었던 다음의 문법을 볼 수 있음
중첩으로 container안에 item에 대한 속성을 작성해주면 다음과 같은 결과를 확인할 수 있음.
04. 컴파일 - Parcel
npm init -y를 사용하여 package.json을 생성.
그 이후로 다음의 명령어를 통해 parecel-bundler를 설치
npm install -D parcel-bundler
마지막으로 parcel로 자신이 가지고 있는 html파일을 실행
npx parcel index.html
02. 문법
01. 주석
CSS주석은 /* ... */ 이었는데
Sass(SCSS)는 다음의 두가지 스타일 주석 사용
// 컴파일 되지 않는 주석
/* 컴파일 되는 주석 */Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 중요한 것은 *의 라인을 맞추어야함
/* 컴파일되는
* 여러 줄
* 주석 */
// Error
/* 컴파일되는
* 여러 줄
* 주석 */SCSS는 각 줄에 *이 없어도 문제가 되지 않아서 기존 CSS와 호환이 쉽다.
/*
컴파일되는
여러 줄
주석
*/02. 데이터 종류
- Numbers: 숫자(1, .82, 20px, 2em)
- Strings: 문자(bold, relative, "/images/a.png", "dotum")
- Colors: 색상 표현(red, blue, #FFFF00, rgba(255,0,0,.5))
- Booleans: 논리(true, false)
- Nulls: 아무것도 없음(null)
- Lists: 공백이나
,로 구분된 값의 목록((apple, orange, banana), apple orange) - Maps: Lists와 유사하나 값이
Key: Value형태((apple: a, orange: o, banana: b))
특이사항
- Numbers: 숫자에 단위가 있거나 없다.
- Strings: 문자에 따옴표가 있거나 없다.
- Nulls: 속성값으로 null이 사용되면 컴파일하지 않는다.
- Lists: ()를 붙이거나 붙이지 않는다.
- Maps: ()를 꼭 붙여야 한다.
