[Sass/SCSS] 기초 문법 공부

혼자 공부하고 정리하려고 만들었지만
혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝
전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오..

https://sass-lang.com/guide를 참고하였습니다.

변수(Variables) - $변수이름

자주 사용하는 정보들을 변수에 저장하여 사용할 수 있다.

example :

$main-color: #aaa
$font-color: #555

nav{
  background-color : $main-color;
  color : $font-color;
}

---

중첩(Nesting)

HTML에서는 중첩 및 계층 구조가 분명하게 구분되지만, CSS는 그렇지 않다. 😥
그러나, Sass(SCSS)는 HTML에서와 같이 계층 구조를 시각적으로 보여준다!

중첩의 중첩도 가능하다. 몇 단계까지 중첩이 되는지는 테스트를 해봐야겠다.

example :

nav{
  ul{
    width: 80%;
    
    li{
      display: inline-block;
      padding: 5px 10px;
    }
  }
}

---

모듈 시스템(Modules)

하나의 파일에 모든 내용을 작성할 필요가 없다.
모듈처럼 다른 파일을 가져와서 쓸 수 있다.
@use를 사용하면, 가져오는 파일의 믹스인, 함수, 변수를 모두 가져올 수 있다.

@use "url"

@use는 CSS의 @import 기능과 유사하다.

왜 @import를 쓰지 않고 @use를 사용할까?
(출처 : https://blueshw.github.io/2019/10/27/scss-module-system/)

• Pure CSS의 @import와 구분이 되기 때문에
• @use는 모듈 시스템과 동일하게 동작하기 때문에 컴파일 중 단 한번만 import 한다. 컴파일 속도가 느려지는 것을 방지할 수 있다.
• @use를 사용하면 모듈 별로 별도의 namespace를 가지므로 각 변수와 함수는 독립적으로 사용된다.

* 주의 사항 : @use 는 스타일 규칙 및 다른 규칙들보다 먼저 작성되어야 한다.(@forward 제외)
                 하지만, 모듈을 구성할 때 사용할 @use 전에 변수를 선언할 수는 있다.

example :

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

지금은 기본 문법 공부니까 이쯤 해두고 나중에 더 자세히 공부를 해봐야 할 것 같다..!

---

믹스인(Mixins) - @mixin 믹스인이름(변수속성값)

공통적으로 사용하고 있는 CSS 선언들을 재사용하는 방법 🤩💛
값을 전달할 수도 있다!!

example : 

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

---

확장 / 상속(Extend/Inheritance) - @extend 속성세트이름

@extend를 사용하여 CSS 속성 세트를 공유할 수 있다. 동일한 속성을 그대로 가져올 수 있다.

example :

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

동일한 속성을 가져온 .message, .success, .error, .warning은 CSS로 컴파일 될 때 콤마(,)로 같이 표시된다.

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

---

연산자(Operator)

더하기, 빼기, 곱하기, 나누기, 나머지 연산이 가능하다.

example : 

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}