SCSS: SCSS Ep.1

15 Dec 2022 • TIL

개요

sass의 문법은 두개가 있다고 보면 된다. scss와 sass!
sass가 기존의 css와 호환이 잘 안되는 문제로 인해 scss가 생기게 되었다.
scss는 기존의 css와 호환이 잘 되기 때문에 sass보다 더 유용하게 사용 할 수 있다.

  • sass

    // sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
  
body
font: 100% $font-stack
color: $primary-color

    중괄호도 없고 세미콜론도 존재하지 않는다.
    들여쓰기 형태로 구분해서 해석한다.
    따라서 작성된 코드를 보면 scss보다 기호가 적어서 깔끔해 보인다.
    하지만, 내용이 복잡해지면 어디에서 시작하고 끝나는지 판단이 되지 않을 수 있다.

  • scss

    // scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
  
body {
font: 100% $font-stack;
color: $primary-color;
}

    기존의 css 문법과 동일하다.
    css의 문제를 개선해서 나온 것이기 때문에 sass보다 사용하기 더 유용하기에 sass보다 scss를 사용하기를 권장한다.

  • scss, sass로 스타일을 작성하는 이유

    sass를 이용해서 문법을 작성하면 실제 웹에서 동작하기 위해서는 css로 변환이 되어야 한다.

    그런데, 여기서 드는 의문점. 어차피 css로 변환을 해야하는데 왜 sass로 작성을 해야 하는 것일까?
    기존 css로 작성했을 때, 우리는 하나의 요소에 스타일을 주기 위해서 모든 조상요소들을 다 소환해야 했다.
    header .main-menu .item .item_contents .contents_menu > ul
    이런식으로 매번 모든 조상요소들을 길~게 작성을 해줘야하는 번거로움이 발생했다.
    하지만, sass의 중첩기능을 사용하면 손쉽고 간편하게 작성해줄 수 있다.

    그리고 기존 css에서 색상을 작성할 때 색상 코드번호를 이용해서 작성한다.(#2C2A29 등) 이렇게 되면 다른 페이지에 사용할 때 혹시 오타라도 나게 되면 색상이 완전 달라지는 문제가 발생한다.

    하지만, sass의 변수기능을 사용하여 해당 색상에 변수를 설정해주면 다른 페이지에서 사용할 때에도 오타 없이 안전하게 해당 색상을 사용할 수 있다.

  • css 전처리 도구

    우리의 컴퓨터 → sass를 사용하여 작성
    사용자 브라우저 → 기존의 css만 동작 가능

    우리는 sass 문법을 css 문법으로 변환을 해줘야 한다.
    이 변환되는 과정을 컴파일이라고 한다.

    이 컴파일을 해주는 것이 css 전처기 도구(css 전처리기)이다.
    표준의 css의 전처리기는 sass, scss, less, stylus 등이 있다.

프로젝트 생성

# 프로젝트 폴더로 이동

# npm  설치 (package.json 폴더 생성)
npm init -y

# parcel-bundler 설치
npm i -D parcel-bundler

package.json


"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
  • index.html 파일에 link 태그를 통해 main.scss 파일 연결

  • 간단하게 코드 작성

    <body>
  <div class="container">
    <h1>Hello SCSS</h1>
  </div>
</body>

  • scss 중첩 기능

    .container {
  h1 {
    color: red;
  }
}

    container 클래스 안에 h1 태그를 넣는다 → 해당 기능이 중첩이다.
    다음과 같이 작성하면 글자 색상에 빨강으로 변환 것을 볼 수 있다.

  • scss 변수 기능

    $color: yellow;
  
.container {
  h1 {
    color: $color;
  }
}

    ‘$’을 통해 변수를 생성한다. 생성한 변수를 h1 태그의 색상으로 넣어준다. 글자 색상이 노랑색으로 변환 것을 볼 수 있다.

  • 기본적인 원리

    index.html 파일에 link 태그를 통해서 main.scss 파일을 연결했다.
    우리가 설치한 parcel-bundler 패키지를 통해서 분석돼서 실제 브라우저에서는 css로 변환되어 동작한다.

    확인할 방법은 dist 폴더를 보면 main.~~.css파일을 볼 수 있다.

    package.json 파일을 보면 sass 패키지가 설치된 것을 볼 수 있다. 이것 또한 parcel-bundler 패키지가 자동으로 main.scss 파일이 연결 된 것을 확인해서 필요한 모듈을 설치한 것이다.

    결과적으로 sass 패키지를 설치해서 scss 파일을 css 파일로 변환해서 브라우저에서 동작시키게 된 것이다.

 TIL  SCSS

Comments

Related Posts