Sass(Node-sass)의 환경 구축을 해본다

1. Sass 개요

Sass는 CSS 전처리기로
Sass 기법과 Scss 기법 (Sassy CSS)이 있습니다.
현재 주류는 Scss입니다.

CSS에서 Scss로 마이그레이션 할 때의 이점은
1. 설명의 간략화(중첩 구조)
2. 전용의 코멘트(CSS인데 1행 코멘트 등)
3. 변수를 사용하여 같은 값을 쓸 수 있습니다.
4. extend를 사용하여 선택기를 사용합니다.
5. mixin을 사용하여 스타일을 함께 사용
6. Partial을 사용하여 여러 Sass를 하나의 CSS로 결합할 수 있습니다.
7. 조건 분기나 반복 처리가 CSS인데 가능하게
8. CSS로 컴파일할 때는 압축할 수 있다
9. 다양한 프레임워크의 기초가 되고 있다

그래서 Sass를 도입해 보았습니다.

2.2개의 Sass에 대하여

Sass는 크게 나누어
　·node-sass(LibSass)
・Ruby Sass　
있습니다.

Ruby Sass는 Ruby에서 개발된 Sass이지만
node-sass는 C/C++에서 개발된 Sass입니다.

그러므로 node-sass는
Node.js 이외 (PHP, Phython, Scala)에서도 사용할 수 있습니다.
가장 큰 장점은 Ruby sass보다 압도적으로 빠르다는 것입니다.

그래서 이번에는
mac 환경에서 node-sass의 환경 구축을 해 나갑니다.

3.Node.js 설치

먼저 Node.js를 다운로드하겠습니다.

htps : // 그래서 js. 오 rg / 그럼 /
특별한 이유가 없으면 왼쪽의 권장 버전이 될 수 있습니다.

해동되는 대로,
터미널 (검정 화면)으로 이동,

node -v

그리고 치면
node.js 버전을 확인할 수 있습니다.
(이것으로 제대로 설치할 수 있었는지 확인할 수 있습니다.)

4.gulp 설치

이 gulp는 태스크 러너 소프트웨어이며,
다양한 처리를 자동화하는 역할입니다.

Sass를 사용하는 경우 궁극적으로 CSS로 컴파일해야하기 때문에
작업 러너를 사용하여 자동화하고 있습니다.

4-1.gulp-cil 설치

gulp를 설치하려면
Node.js의 패키지 관리 관리자 인 npm을 사용합니다.

nmp install --global gulp-cil

이제 전 세계적으로 설치할 수 있었으므로,
설치한 컴퓨터의 모든 디렉토리
gulp 명령을 사용할 수 있습니다.

gulp -v

를 사용하여 설치할 수 있습니까?
확인해 둡시다.

※------------------------------------------------- -
자신의 경우에는 먼저
"permission denied"라는 에러(요점은 권한 부족)이 나왔기 때문에

chmod ７７７ 5_sass_test.txt

로 회피했습니다.
permission denied로 괴로워 되었기 때문에 공부해 보았다
※------------------------------------------------- -

4-2. package.json 만들기

이제 package.json이 만들어집니다.

npm init -y;

4-3. gulp 설치

다음으로 gulp와 gulp-sass를 설치합니다.

npm install --save-dev gulp

실행하고 성공하면 이렇게
"package.json"이 생성됩니다.

4-4. gulp-sass 설치

이것만으로는 자동 업데이트되지 않기 때문에
gulp-sass도 추가

npm install --save-dev gulp-sass

4-5. gulpfile.js 만들기

여기까지 자동화를 실시하는 기초가 생겼으므로,
다음에 javascript 파일에, 자동화의 내용을 기입해 갑니다.

하지만, 기본적으로는 코피페로 괜찮습니다.

gulupfile.js는 다음 사이트에서 가져옵니다.
htps //w w. 음 pmjs. 코 m / Pac 가게 / Gup lp

다양한 버전이 있지만,
가장 기본적인이 녀석 (아래)을 gulpfile.js로 수동으로 작성

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

이것으로 끝입니다.
수고하셨습니다.

같은 환경을 만들고 싶다면

동일한 환경을 만들고 싶다면,

4-1.gulp-cil 설치

nmp install --global gulp-cil

다음에 이번에 만든 package.json이있는 상태에서

npm install

이렇게하면 모든 패키지가 설치됩니다.

같은 환경을 만들려면 package.json이 중요하다는 것입니다.