SCSS 문법 간단 정리

8476 단어 scssscss

1. 변수

특정 값을 변수에 저장해 사용할 수 있다.

$main-color: #EEEEEE;

.test {
  color: $main-color;
}



2. 중첩

<div class="main">
  <h3>title</h3>
  <p>description</p>
</div>
.main {
  h3 {
    font-size: 24px;
  }
  p {
    font-size: 20px;
  }
}

가상클래스 선택자 사용 시, &기호를 앞에 붙여주면 된다.

/* 기존 css 파일 */
button:hover {
  color: red;
}
// scss 파일에서 중첩 기능을 사용
button {
  &:hover {
    color: red;
  }
}



3. @import

@import로 외부 파일을 가져올 수 있다.

@import '_reset';  // 기본으로 .scss 또는 .sass 확장자를 가져온다.

참고로 파일명 앞에 _가 붙으면 해당 파일은 컴파일하지 말라는 뜻이다.




4. @extend

특정 선택자가 다른 선택자의 스타일을 가져와 사용할 수 있다.

%.btn {
  padding: 10px;
}

.btn-yellow {
  @extend .btn;  // .btn 스타일을 가져온다.
  background-color: yellow;
}

참고로 선택자 앞에 %가 붙으면 컴파일하지 말라는 뜻이다.




5. @mixin

@mixin으로 스타일을 정의하고 @include로 가져와 사용한다.

@mixin box($color) {
  width: 300px;
  padding: 10px;
  background-color: $color;
}

.box {
  @include box(yellow);
}



6. 컴파일

➀ node 설치

➁ node-sass 설치

npm install -g node-sass

➂ scss 컴파일

vscode에서 "Live Sass Compiler" 확장 프로그램 설치

setting.json 파일에 아래 내용 추가

"liveSassCompile.settings.formats":[
  // This is Default.
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"  // ~/: 현재위치
  },
],
"liveSassCompile.settings.generateMap": false

scss 코드 작성 후 하단의 Watch Sass를 누르면 css 폴더 안에 .css 파일이 자동 생성된다.

이후 scss 코드를 추가로 작성하고 저장하면 자동으로 컴파일된다.

➃ HTML 문서에 적용

<head>
  <link rel="stylesheet" href="컴파일된.css">
</head>
폼 데 이 터 를 검사 하 는 자바 스 크 립 트 인 스 턴 스
Python – 디렉토리의 파일 나열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage