이제부터는 SCSS에 대해 알아보겠다.
SASS
CSS는 상대적으로 배우고 쉽다. 하지만 불필요한 선택자의 과용과 연산기능의 한계, 구문의 부재등 프로젝트의 규모가 커질수록 아쉬움이 있는편.
하지만 웹에서는 표준 CSS만 동작 가능하기때문에 선택권이 없다.
CSS Preprocessor?
Sass,Less등 CSS 전처리기라고 하는것들로 CSS가 동작하기전에 사용하는 기능으로 CSS의 불편함을 상쇄할 수 있다.
Sass(SCSS)는 Sylus,Less와 크게 다르지는 않지만, 가장 오래된 CSS확장언어라 성숙도와 커뮤니티도 많고, 진입장벽도 낮은 편이기에 사용할 것이다.
Sass(Syntactically Awesome Style Sheets)의 3버전에서 등장한 SCSS는 CSS구문과 완전호환이 되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.
>> SCSS는 CSS와 거의 같은 문법으로 Sass를 지원한다.
Sass >> 중괄호와 세미콜론이 없음
SCSS >> 중괄호와 세미콜론이 존재
Sass는 웹에서 직접동작할 수 없기 때문에 CSS로 변환하는 (컴파일하는) 과정이 필요하다.
SassMeister : 간단한 Sass르 구현해볼수 있는 컴파일러
Parcel : 웹 애플리케이션 번들러로 단순하게 컴파일할 수 있다.
Parcel을 사용하면 웹팩이나 다른 걸 사용하는것보다 손쉽게 구현할 수 있기에 사용해보겠다.
먼저 node.js를 설치해야 한다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
위 링크에서 해당하는 버전을 설치하면 되는데, 공부용으로 설치할꺼기 때문에 안정적인 버전으로 설치해줬다.
npm install -g parcel-bundler그 후, 먼저 parcel을 전역으로 설치해주면 준비가 간단하게 끝난다.
다음에 예제파일과 실습파일을 아래와 같은 구성으로 만들어준다.
위 예제는 이미 parcel을 적용해서 그런데, index.html과 main.scss 파일 두개만 있으면 된다. 확장자를 scss로 해두는게 포인트.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCSS test</title>
<link rel="stylesheet" href="./main.scss">
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>.container{
$size : 100px;
.item{
width : $size;
height : $size;
background : tomato;
}
}그다음 html과 scss파일을 위와 같이 만들어준다. scss파일의 간단한 예시이다.
그 후, 터미널을 킨후 내 파일과 일치한지 확인해줘야한다.
처음에 파일위치가 일치하지 않았어서 조금 헤맸다...
그 이후,
npm init -y를 통하여 json파일을 만들어 준뒤
npm i -D parcel-bundler으로 필요한 parcel-bundler를 자동설치하게 해준다.
npx parcel index.html그 다음엔, index.html을 변환하여 나온 링크를 누르면 실행화면을 확인할 수 있다.
그럼이제 본격적으로 SASS문법에 대해서 공부해보겠다.
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| 13_SCSS_연산,재활용(mixin,include),확장 (0) | 2021.11.20 |
|---|---|
| 12_SCSS_중첩,변수,import (0) | 2021.11.20 |
| 10_CSS_Grid (0) | 2021.11.18 |
| 09_CSS_FLEX (0) | 2021.11.14 |
| 08_CSS_애니메이션 (0) | 2021.11.13 |