Hello! Scss!

tech · 29 Apr 2021 · ksj

CSS를 좀 더 편리하고 확장해서 사용하는 방법 -> SCSS 왜 SCSS를 사용하게 되었는지 ? SCSS를 사용하기 위해 기본 셋팅 부터 ~ 사용방법까지

Why Scss ?

현재 회사에서 스타일링을 하는 부분에 있어서 CSS로만 되어 있는데 좀 더 css를 프로그래밍 적으로 작업하고 싶었고 복잡한 네이밍 구조로 인하여 해당 클래스가 어디를 가리키는지 항상 불편하다고 느꼈다. 그래서 해당 부분을 개선하기 위해서 앞으로 CSS 말고 다른 기술을 사용하고자 SCSS에 관심을 가지게 되었다..! 👍🏼

🎨Scss

CSS pre-processor(CSS 를 컴파일해서 일반 CSS처럼 만드는 개념)라 불리운다.

Sass → Scss로 공식적인 syntax로 릴리즈 되었음. ( Sass, Scss는 같다고 볼 수 있음 )

CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장

⭐️Scss Advantages

점점 대다수 업계 표준이 되고 있음 (소수의 사람들만 CSS 사용)
CSS를 프로그래밍 언어처럼 사용 할 수 있음
sytax를 개선하고 좋은 걸 사용 할 수 있음 (아래 Scss 특징 참조)

🕹Scss Use

브라우저에서 Scss구문을 이해하지 못하기 때문에 이 Scss를 사용하기 위해서는 CSS로 변환하는 compile & bulid 단계가 필요 → gulp 사용

✏️Development sequence

IDE는 VSC 기반으로 진행하였다. ( VSC, ATOM,인텔리제이 등 다른 IDE를 사용해도 좋은 것 같다.. 개인적으로 나는 프론트 작업을 진행할때는 VSC를 자주 이용한다..! )
노드환경에서 테스트 하기 위해 제일먼저 컴파일링을 해주는 패키지인 node-sass 설치한다.
빌드 자동화 도구인 gulp를 설치하기 위하여 다음과 같은 패키지 설치! gulp, gulp-sass

👀 전처리 언어 중 less도 있지만 요즘은 sass를 사용하는 분위기였다. → c언어 구현체가 있는 sass의 빠른 빌드 속도 때문인듯 싶다.

👀 gulp-sass는 위에서 살펴본 node-sass를 Gulp에서 사용할 수 있도록 만들어진 플러그인

Gulp

gulp를 설명하기 위해서는 따로 글을 하나 다시 작성할 정도로 많지만 간략하게 생각하면 반복적이고 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 쉽게 처리하기 위한 존재라고 생각하면 된다.

📋SCSS 특징

변수의 사용
조건문과 반복문 사용
Import
Nesting
Mixin
Extend
Inheritance

** 변수와 Mixin이 Scss 특징의 꽃이라고 불리우는데 우리가 작성한 코드의 재사용성을 높이는데 강력하다.

Web Page Clone -> 링크

독일에서 서비스하고 있는 해외 웹진 사이트로 여러 회사 이미지를 홍보해주는 사이트

해당 프로젝트를 시작하기전에 Scss를 사용하기 위한 기본 셋팅을 다음과 같이 설정 !

👀출처 : Nomad Coders https://nomadcoders.co/css-layout-masterclass ( 설정 부분은 해당 유료 강의를 참조하여 작성하였습니다. )

📌Setting

{
  "name": "rodicdavidson",
  "version": "1.0.0",
  "description": "html, scss pracitce",
  "main": "index.js",
  "scripts": {
    "dev": "gulp dev"
  },
  "author": "KSJ",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.11.6", // transform 과 관련한 기능 제공
    "@babel/preset-env": "^7.11.5", // 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만 지금은 env로 합쳐짐
    "@babel/register": "^7.11.5", // 각각의 모듈을 결합하기 위한 후크 모듈
    "del": "^5.1.0", 
    "gulp": "^4.0.2", // 빌드 자동화 도구
    "gulp-autoprefixer": "^7.0.1", // CSS 구문을 분석해 브라우저 업체별 접두어 속성 자동 추가
    "gulp-csso": "^4.0.1",  // gulp minify지원 플러그인
    "gulp-sass": "^4.1.0", // node-sass를 걸프에서 사용할 수 있게 한 플러그인
    "node-sass": "^4.14.1" // Node를 컴파일러인 LibSass에 바인딩한 플러그인
  },
  "browserslist": {
    "browsers": [
      "last 2 versions"
    ]
  }
}

babel과 gulp를 사용하기 위해 위 플러그인들을 사용하였다. ( 각 플러그인들에 대하여 설명은 간략하게 주석으로 남겼습니다! )

import gulp from "gulp";
import del from "del";
import sass from "gulp-sass";
import minify from "gulp-csso";
import autoprefixer from "gulp-autoprefixer";

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

// 각 파일들을 가져오고 내보내는 위치를 설정하는 routes (css 뿐만 아니라 js, img 등도 가능) 
const routes = {
  css: {
    watch: "src/scss/*",
    src: "src/scss/styles.scss",
    dest: "dist/css"
  }
};

const styles = () =>
  gulp
    .src(routes.css.src)
    .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/styles.css"]);

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

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

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

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

scss로 작업한 코드들을 css로 변환해주기 위한 바벨 관련 설정부분인데 자세한 부분은 gulp를 따로 검색해서 학습해보는걸 추천합니당

Scss

@import "_variables";

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin-top: 40px;
}

.header {
  width: 100%;
  height: 40px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  h1 {
    font-size: 24px;
    text-transform: uppercase;
  }
  nav {
    ul {
      display: flex;
      li {
        font-size: 20px;
        display: flex;
        align-items: center;
        letter-spacing: 2px;
        &:nth-child(1) {
          span {
            background-color: $bg-kultur;
          }
        }
        &:nth-child(2) {
          span {
            background-color: $bg-menschen;
          }
        }
        &:nth-child(3) {
          span {
            background-color: $bg-reisen;
          }
        }
        &:nth-child(4) {
          span {
            background-color: $bg-design;
          }
        }
        &:nth-child(5) {
          span {
            background-color: $bg-mode;
          }
        }
        &:nth-child(6) {
          span {
            background-color: $bg-pflege;
          }
        }
        &:nth-child(7) {
          span {
            background-color: $bg-fair;
          }
        }
        span {
          margin-right: 5px;
          height: 18px;
          width: 18px;
          border-radius: 50%;
        }
        a {
          color: inherit;
          text-decoration: none;
          text-transform: uppercase;
        }
        &:not(:last-child) {
          margin-right: 20px;
        }
      }
    }
  }
  .search {
    font-size: 24px;
    margin-right: 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
}

.posts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 50vh;
  .post {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    cursor: pointer;
    .post__header,
    .post__footer {
      display: flex;
      justify-content: space-between;
      color: $middle-gray;
    }
    &:nth-child(3n + 1) {
      background-color: $bg-mode;
    }
    &:nth-child(3n + 2) {
      background-color: $bg-menschen;
    }
    &:nth-child(3n + 3) {
      background-color: $bg-reisen;
    }
    &:nth-child(3n + 4) {
      background-color: $bg-fair;
    }
    &:nth-child(3n + 5) {
      background-color: $bg-design;
    }
    &:nth-child(3n + 6) {
          background-color: $bg-kultur;
    }
    .post__content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .post__content--left {
        width: 25px;
        margin-right: auto;
        text-align: left;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 5px;
      }
      .post__content--right {
        width: 25px;
        margin-left: auto;
        writing-mode: vertical-rl;
        padding: 5px;
      }
      .post__content--invisible {
        display: none;
        h3 {
          letter-spacing: 4px;
          line-height: 1.3;
          font-size: 24px;
          text-align: center;
         }
       }
      .post__content--visible {
        height: 50%;
        width: 100%;
        background-image: url("https://source.unsplash.com/user/erondu/1600x900");
        background-position: center center;
        background-size: cover;
        border-radius: 10px;
      }
    }
    &:hover {
      .post__content {
        .post__content--left,
        .post__content--right,
        .post__content--visible {
          display: none;
        }
        .post__content--invisible {
          display: block;
        }
      }
    }
  }
}

** &는 해당 클래스 자체를 가리키며, 속성을 적어주는 부분은 css와 동일하다.

Result

** 태그 안에 계속해서 선언한 클래스를 넣어줌으로써 스타일링하였다. Scss의 주요 특성중 Nesting개념인데 HTML구조를 반영한 CSS를 기술할 수 있다는 점에서 코드를 더 직관적이게 작성할 수 있다는점.

( 하지만 오히려 너무 깊은 Nesting은 많은 중괄호로 인하여 가독성을 나쁘게하고 셀렉터를 복잡하게 하니 주의하면서 사용해야 할 것 같다. )

** 폰트 색상이나 배경 색상은 따로 variables 파일에 분리하여 관리할 수 있도록 작성하였다.

🔔CSS 스타일링으로 SCSS를 사용하였으며 전체적인 레이아웃 구조는 CSS grid를 사용하였다.

CSS grid를 사용한 이유는 Beige사이트를 만드는데 가장 적합한 기술이라 생각하였고 정말 사용할 줄만 알면 이전에 레이아웃을 잡기 위해 사용했던 flex보다 더 반응형에 대해 대해서 강력하다..!

( 단점이라고 꼽자면 아직 IE에서는 제대로 적용되지 않는다는 점..? 적용하기 위해서는 IE에서 사용할 수 있는 Css Grid 속성을 모두 인지하고 지원하지 않는 속성들은 다른 방식으로 대응할 수 있도록 해야한다. )

⏳ CSS Grid는 따로 포스팅할 예정입니다😃

💎 더 상세한 코드들은 github 저장소에 따로 확인하실 수 있습니다. - https://github.com/JayKim3/Beige