패스트캠프 프론트앤드 인강 38일차 css 전처리기의 종류와 scss를 작성하고 컴파일해보았다.
css문법은 row한 원시적인 문법이다. 간단한 프로젝트일경우엔 매우편하지만 프로젝트의 규모가 커지면서
작업의 내용이 고도화되면 고도화될수록 css를 작성하는데 불편함이 굉장히많아진다.
css의 이러한 단점을 보완한 개념으로 새로운
CSS preprocessor
전(예비)처리기인 sass(SCSS)와 less로 css가 동작하기전에 사용하는 기능으로 css의 확장개념이다.
웹에서는 표준 css에서만 동작할수있다. 그래서 쉬운문법, 고도화된 sass(SCSS)는 바로사용할수없고 컴파일하여 css로 다시전환시키면된다.
Sass와 SCSS의 차이?
재사용가능한 기능을 만드는 방식인 mixin의 경우에도 지시어의 차이가 있다. sass는 =,$,+등의 기호를 사용하고 scss의 경우 @mixin, $, @include를 사용한다.
컴파일방법
Sass(Scss)를 표준 CSS로 컴파일하는방법에는 여러가지가 있다.
Node.js(자바스크립트 개발환경)에서 추천하는 몇가지 방법이 있는데
webpack을 사용하거나 SassMeister를 사용하거나 parcel 혹은 node-scss라이브러리를 npm으로 전역설치해 사용할수있다.
SassMeister 사이트활용
SassMeister | The Sass Playground!
SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...
www.sassmeister.com
반드시 상단옵션에 문법은 scss로 컴파일러를 lib~로 선택해준다.
scss에 이렇게 타이핑해보면 css로는 어떻게 나타나는지 확인해볼수있다.
.container{
width:100px;
.item{
width:200px;
}
}
percel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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;
}
}을 입력하고 terminal창을 열어서
npm init -y을하면 package.json파일이 생성된다.
npm install --save-dev parcel-bundler
npx parcel index.html
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr
'Frontend' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 40회차 미션 (0) | 2020.09.18 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 (0) | 2020.09.17 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 37회차 미션 (0) | 2020.09.15 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 36회차 미션 (0) | 2020.09.14 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션 (0) | 2020.09.13 |
