{ SCSS } Features

SCSS Features

Nesting

• SCSS allows you nest CSS selectors.

• SCSS reduces the parent selector and allows you to write code easily depending on the HTML structure

• e.g.

Mixins

• SCSS allows you make css styles like a function.

• Defined @mixins can be reused throughout the website. (css 스타일을 함수처럼 만들 수 있음.)

• e.g.

@mixins function($param);

Extends

• It allows you to share styles.

• Extends and mixins are both ways of encapsulizaion and reusable styles.

• Souce code

Include & Content

• When a mixin is included, arguments can be passed by name in addition to passing them. (@mixin 함수 에 variable(argument) 를 전달 함으로써 재활용 가능하게 해줌)

• e.g.

@include function(argument) </em>;

@content

• It allows you add css style to another css style.

• By calling with @include {…}, you can write additional style codes inside {…}. ( @include로 호출해서 { …. } 내에 추가적인 스타일 코드 입력 하면 content 에 더해짐.)

• source code

@include function("iPhone") {
  color: blue;
}

@mixin function($device) {
  font-size: 28px;
  @if $device == "iPhone" @content ; // color: blue;
}