LearnApplyShare

[scss] 주요 문법 정리

August 10, 2018 - [scss, syntax]

변수 사용

scss

$jb-font: "Times New Roman";
$jb-size: 20px;
$jb-color: #444444;
h1 {
  font-family: $jb-font;
  font-size: $jb-size;
  color: $jb-color;
}

css

h1 {
  font-family: "Times New Roman";
  font-size: 20px;
  color: #444444;
}

&

현재 적용 중인 실렉터 참조

scss

a {
  text-decoration: none
  &:hover { text-decroation: underline; }
}

css

a {
  text-decoration: none;
}
a:hover {
  text-decoratino: underline;
}

@mixin

재사용 가능한 css 블럭을 설정

scss

@mixin flex {
  // write the css here
  display: -webkit-flex;
  display: flex;
}

.row {
  @include flex;
}

css

.row {
    display: -webkit-flex;
    display: flex;
}

@content

@mixin 구문 안에서 사용되며, @include 문의 중괄호 안에 정의된 내용을 참조

scss

@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

@include media(320px) {
  background: red;
}

css

@media only screen and (max-width: 320px) {
  background: red;
}

@import

다른 scss 파일을 현재 코드 영역으로 가져온다.

scss

@import "whiteglass/base", "whiteglass/layout", "whiteglass/syntax-highlighting";

@extend

특정 실렉터의 css정의를 상속받는다

scss

// 베이스 클래스
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

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

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

css

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

.message {
  border-color: green;
}
.error {
  border-color: red;
}

Ref.