[베이직 포트폴리오] scss사용하기

SCSS를 사용하려는 경우, SASS를 설치해야 한다
SCSS 파일은 브라우저에서 직접 사용할 수 없기 때문에, SCSS를 CSS로 컴파일하는 도구가 필요하다
SASS는 SCSS 파일을 CSS로 변환하는 컴파일러 역할을 하고  아래 기능들을 제공해 준다

1. 중첩 규칙: CSS에서는 지원하지 않는 규칙의 중첩 허용
2. 변수 사용: CSS 코드에서 변수 사용
3. 믹스인(Mixin): 재사용 가능한 스타일 조각 생성.
4. 확장 및 상속: 기존 클래스의 스타일을 다른 클래스에 상속

 

1. 프로젝트에 sass 설치하기

npm	yarn
npm install sass --save-dev	yarn add sass --dev

---

2. SCSS 파일 생성, 작성하기

컴파일할 내용이 있어야 하기 때문에 필수
파일이 생성만 되어 있는 상태에서는 컴파일을 수행할 SCSS 코드가 없기 때문에, CSS 변환을 위해 대략 작성해 두자

// styles.scss
$primary-color: #3498db;

body {
    font-family: Arial, sans-serif;
    background-color: $primary-color;
    color: white;
}

---

3. scss파일 컴파일하기

터미널에 아래 명령어 입력

npx sass SCSS파일명.scss CSS파일명.css

scss 파일을 읽어 css로 컴파일
npx를 사용해 node_modules에서 설치된 sass 명령어를 실행
 
자동 컴파일 package.json의 스크립트를 다음과 같이 수정

"scripts": {
    "scss": "sass --watch styles.scss:styles.css"
}

 
자동 컴파일을 위해 터미널에 아래 명령어 입력 후 터미널 유지
yarn scss

---

4. Emmet 설정

HTML과 CSS를 빠르게 작성할 수 있도록 도와주는 텍스트 에디터 플러그인
SCSS 코드를 작성할 수 있도록 settings.json 파일생성 후 아래 내용 추가

{
  "emmet.includeLanguages": {
    "scss": "css"
  }
}

 
작업은 scss파일에서 하면 css파일에 자동으로 반영된다

---

확장 프로그램

 
SCSS IntelliSense
자동완성 및 구문강조 제공
 
 
 
 

 
Live Sass Compiler
자동으로 컴파일되도록 환경 세팅
이 Extensions를 설치하면  자동 컴파일이 되기 때문에 터미널을 열지 않아도 된다
 
 

---

나는 리액트가 아닌 그냥 html이랑 scss를 사용하려고 했고 위 방법으로 잘 썼는데 다른 방법도 있어서 다음에 사용해 보기 좋을 거 같다
 

참고블로그

https://cocoworld.tistory.com/158

[리액트/React] 리액트에 SCSS(Sass) 설치 및 적용 방법 :: LiveSassCompiler익스텐션을 활용