[CSS] CSS preprocessor : SASS

SASS 

SASS는 CSS를 보완하고 더 효율적으로 스타일링 할 수 있도록 도와주는 CSS 프리프로세서.

Sass는 CSS의 확장된 문법을 사용하며, 간결하고 가독성이 좋은 코드를 작성 가능한 다양한 특징 제공.

 

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

🛠️  설치  방법 

$ npm install -g sass

 

 

🔍 사용법

변수 (Variables)

$ 기호를 사용하여 변수 정의. 

$maincolor:#444444;
$titlecolor:#222222;

 

 

믹스인 (Mixins)

코드의 재사용을 위해 믹스인을 정의하고 사용할 수 있습니다.

@mixin 키워드를 사용해서 Mixin 이름을 정하고 중괄호 내에 스타일 속성을 작성하고 

@include로 사용

@mixin roundborder($border:5px){
  border-radius:$border;
  padding:5px 10px;
  border:  3px solid #ccc;
}

h1{
  color:$titlecolor;
  @include roundborder;
}

nav h1{
  @include roundborder($border:20px)
}

 

 

 

중첩 (Nesting)

CSS의 중첩 구조를 사용하여 스타일 규칙을 계층적으로 작성할 수 있습니다.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-block;

            a {
                text-decoration: none;
                display: block;
                padding: 6px 12px;
            }
        }
    }
}

---

 

input.scss 파일에서 작성 후

$maincolor:#444444;
$titlecolor:#222222;


@mixin roundborder($border:5px){
  border-radius:$border;
  padding:5px 10px;
  border:  3px solid #ccc;
}

body{
  color:$maincolor;
}
h1{
  color:$titlecolor;
  @include roundborder;
}

nav h1{
  @include roundborder($border:20px)
}

 

input .scss 를 컴파일하여 변환된  output .css 생성 

 $ sass input.scss output.css
 
 $ sass main.scss index.css

output.css에 css 문법으로 변경 완료

body {
  color: #444444;
}

h1 {
  color: #222222;
  border-radius: 5px;
  padding: 5px 10px;
  border: 3px solid #ccc;
}

nav h1 {
  border-radius: 20px;
  padding: 5px 10px;
  border: 3px solid #ccc;
}

/*# sourceMappingURL=main.css.map */