[프론트엔드] Sass Crash Course 1

Sass Crash Course
Sass Documentation

---

변수 사용하기

$primary-color: #333;

body {
  color: $primary-color;
}

Nesting

기존 css 에서는 쓸 수 없는 nesting 구문이 사용 가능하다 (이게 ㄹㅇ 편함)

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

  li { display: inline-block; }

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

Modules

다른 파일을 모듈처럼 불러와서 사용이 가능하다

// basc.scss
$primary-color: #333;

body {
  color: $primary-color;
}

// style.scss
@use 'base';

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

Mixins & Functions

sass

@mixin transform($property) {
  -webkit-transform: $propery;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

css

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Inheritance

%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;
}

Operator

Sass : Operators
연산자의 사용이 가능하다 ( /, * )

Conditional

Sass : Flow Control Rules
조건문의 사용이 가능하다