[SCSS] SCSS(SASS) 소개 / Live Sass Compiler

문지은·2023년 7월 30일

Live Sass Compiler Sass scss

SCSS

목록 보기

1/11

SCSS(SASS)

SCSS(SASS)를 사용하는 이유

선택자의 중첩(Nesting)을 통해 반복되는 부모요소 사용을 현저히 줄일 수 있다.
변수(Variable)를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다.
프로그래밍 언어에서 사용하는 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능하다.

scss

.frame {
  padding : 20px;
  .items {
    font-weight: bold;
    color: crimson;
    .item {
      margin: 20px;
      font-size: 18px;
      border: 1px solid #000;
    }
  }
}

css

.frame {
  padding : 20px;
}
.frame .items {
  font-weight: bold;
  color: crimson;
}
.frame .items .item {
  margin: 20px;
  font-size: 18px;
  border: 1px solid #000;
}

SCSS vs SASS

SASS(Syntactically Awesome Style Sheets)가 먼저 생겼고 나중에 SCSS(Sassy Cascading Style Sheets)가 생겼으며 둘은 완벽하게 호환됨.
- 요즘은 SCSS를 더 많이 사용한다고 함
{} 중괄호와 ; 세미콜론의 유무에 따라 사용방식이 아주 조금 다름
- SASS 는 중괄호와 세미콜론을 사용하지 않고, SCSS 는 중괄호와 세미콜론을 사용함
파일 확장자는 SASS는 .sass 이고 SCSS는 .scss
재사용 기능을 만드는 방식인 믹스인(Mixins)에서 거의 유일한 차이가 있음

scss

.frame {
  padding : 20px;
  .items {
    font-weight: bold;
    color: crimson;
    .item {
      margin: 20px;
      font-size: 18px;
      border: 1px solid #000;
    }
  }
}

sass

.frame 
  padding : 20px
  .items 
    font-weight: bold
    color: crimson
    .item 
      margin: 20px
      font-size: 18px
      border: 1px solid #000

Live Sass Complier (with vscode)

Complie과 CSS 전처리기

.sass 파일과 .scss 파일은 브라우저가 인식하지 못함
- 브라우저가 인식하는 파일은 .css
따라서 .sass 파일과 .scss 파일을 .css 로 변환(compile) 해야 함
웹개발을 하면서 보통 라이브 프리뷰를 확인하기 때문에 html 파일이 브라우저에서 라이브 프리뷰가 되려면 html 내에 링크된 .css 파일이 실시간으로 갱신되어야 함

SCSS 라이브 HTML 프리뷰 세팅

vscode의 Live Sass Compiler 확장 프로그램은 SCSS 파일을 CSS 파일로 자동 컴파일해줌
확장 프로그램 설치
확장 프로그램 설치 후 vscode 환경설정 화면(ctrl+,)에서 sass 검색 후 Livs Sass Compiler 클릭
Settings : Formats 의 settings.json 클릭
아래 코드 추가 (기본으로 입력되어 있는 경우도 있음)

"liveSassCompile.settings.formats": [
    
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": null,
        "savePathReplacementPairs": null
    }
]

참고

"savePath": null
- .scss 파일이 있는 위치에 .css 파일이 저장됨
"savePath": /
- .scss 파일이 있는 위치와 관계 없이 .css 파일이 루트(root) 폴더의 가장 상단에 저장
"savePath": /css
- .scss 파일이 있는 위치와 관계 없이 .css 파일이 루트(root) 폴더안에 css 폴더를 만들고 이 폴더 안에 저장됨

이제 .scss 파일을 만들면 하단에 Watching.. 이라는 표시와 함께 자동으로 .css 파일이 생성된다.

생성된 .css 파일을 html 에 link 하여 사용

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SCSS start</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1 class="red-color">Start SCSS Study!</h1>
</body>
</html>

style.scss

$main-color : crimson;

.red-color {
    color: $main-color;
}

문지은

코드로 꿈을 펼치는 개발자의 이야기, 노력과 열정이 가득한 곳 🌈

다음 포스트