scss ( nesting, mixin, extend )

css를 보다 편리하게 사용하기 위해서 scss를 작성한 뒤 sass를 사용하여 css로 변환을 시킬 수 있다.

즉 scss파일만 작성해서 html에게 보내주면 html은 읽지 못한다. ( scss말고 css를 내놔 )

그럼 scss를 어떻게 css로 바꾸냐? gulp라는 것을 사용하여 바꿀 수 있다. scss

그렇게 하는게 더 복잡해 보일 거같은데 라는 생각을 할 수도있다.

 

gulp는 파이프를 사용하여 전에 수행된 것을 그대로 인자로 받아서 수행을 하고 다시 다른 파이프로 넘기는 식의 패턴을 사용한다.

 

먼저 아래와 같이 필요한 모듈을 받아온다. 그리고 routes를 통해 우리가 접근하고자 하는 diretion을 정해 둔다.

 

style이라는 함수가 scss를 css로 변환시켜주는 것이다. 먼저 gulp.src를 사용해서 해당 directory에 있는 source들을 읽어온 뒤 pipe를 사용하여 다음 인자로 넘긴다. 다음에서는 sass()를 활용하여 css로 변환 시킨 뒤 오류가 있다면 log로 출력하라는 것 까지 추가해준다. 그리고 autoprefixer는 구형 브라우저에도 호환이 가능하도록 설정해주는 옵션은 사용해봤는데 flexbox와 grid옵션은 잘 모르겠다. 그리고 다음 pipe에서는 압축시켜주는 minifty()를 실행하고 그 다음 파이프에는 css로 변환된 파일을 저장할 directory를 적어둔다. 이렇게 하면 완성이다. 그리고 gulp.series를 사용하여 우리가 사용할 함수들을 배열에 넣어두면 차례로 실행이된다. 

 

clean, live 함수는 기존의 파일을 지우고 다시 만드는 clean, live는 scss파일이 변환되면 자동으로 수행되도록하는 역할을 한다.

import gulp from "gulp";
import del from "del";

import minify from "gulp-csso";
import autoprefixer from "gulp-autoprefixer";
const sass = require('gulp-sass')(require('sass'));
sass.compiler = require("node-sass");

const routes = {
  css: {
    watch: "src/scss/*",
    src: "src/scss/*.scss",
    dest: "dist/css"
  }
};

const styles = () =>
  gulp
    .src(routes.css.src,{allowEmpty: true})
    .pipe(sass().on("error", sass.logError))
    .pipe(
      autoprefixer({
        flexbox: true,
        grid: "autoplace"
      })
    )
    .pipe(minify())
    .pipe(gulp.dest(routes.css.dest));

const watch = () => {
  gulp.watch(routes.css.watch, styles);
};

const clean = () => del(["dist/"]);

const prepare = gulp.series([clean]);

const assets = gulp.series([styles]);

const live = gulp.parallel([watch]);

export const dev = gulp.series([prepare, assets, live]);

 

이렇게 하면 scss를 사용할 수 있다.

_variables.scss라는 파일을 만들고 거기에 $를 사용하여 변수로 만들 수 있고 styles.scss에서 @import "./variables.scss"를 통해 그 변수들을 읽어올 수 있고 바로 아래와 같이 사용 가능하다.

 

Nesting

_variables.scss
$red : #b53f51;
$blue : #3f51b5;



styles.scss
@import "./variables.scss";
body {
    h2 {
        background-color: $red;
    }
    &:hover {
        background-color: $blue;
    }
    color : $blue;
}

css에서는 .box .item h1 { color : red}( class가 box인 곳 안의 class가 item인 곳의 h1태그의 글자색을 빨간색으로 하라 이런 뜻이지만 scss에서는 아래과 같이 표현할 수 있다. 하나의 클래스안에 여러개의 정의가 가능하여 일기 수월하다. 

그리고 자기 자신을 뜻할 때는 &을 사용하면 된다. &:hover < 

.box {
    .item {
        h1 {
            color : $ red;
        }
    
    }
}

 

Mixins

_mixins.scss라는 파일을 만들고 그 안에 아래와 같이 타이핑을 해주자

_mixins.scss

styles.scss에서 import해온 뒤 @include를 사용해서 함수처럼 사용하면  

styles.scss

아래와 같이 잘 적용이 된 것을 확인할 수 있다.

함수처럼 사용할 수 있으므로 인자를 받아서 사용할 수 있다. 태그를 만들어 보겠다.

_mixins.scss

_variables.scss

styles.scss

index.html

이렇게 활용할 수 있다. 

심지어 if else문을 사용하여 분기 처리도 가능하다.

Extends

같은 코드를 중복하고 싶지 않을 때 사용한다. html에서도 jinja template를 사용했을 때 기본 base.html을 만들어두고 그걸 extends해왔던 것을 떠올리면 될 것 같다.

 

 

_button.scss라는 파일을 만들고 아래와 같이 %button을 정의해주자 %를 붙여야 한다.

_button.scss

import 해온 뒤 @extend를 사용하여 앞서 정의한 %button을 불러서 a와 button에 각 각 붙여준 뒤 추가로 넣을 기능을 넣어주자.

styles.scss

이렇게하면 a태그와 button을 같게 만들어 줄 수 있다.