SCSS

중첩 Nesting

SCSS는 중첩을 통해 자식요소들을 쉽게 스타일링 할 수 있다.

.container {
  h1{
  	color: royalblue;
    font-size:24px;
    }
  ul{
  display:flex;
  	li{
     font-size:12px;
     }
   }
 }

1. 중첩된 속성

속성 기입 또한 부모요소에서 자식요소를 중첩하여 간편히 사용하는 것과 동일한 네임스페이스를 통해 사용할 수 있다.

.box{
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top:10px;
    left:20px;
  };
  padding: {
    top:10px;
    bottom:40px;
  }
}

2. &를 통한 상위 선택자 참조.

해당 범위의 선택자를 의미하게 된다.

.list{
  li{
   &:last-child{
     margin-left:0
    }
  }
}

하나의 틀을 만들 때 가독성과 편의성을 제공한다.

//font-size
.fs {
  &-small {
    font-size: 12px;
  }
  &-medium {
    font-size: 14px;
  }
  &-large {
    font-size: 16px;
  }
}
//background-color
.bc {
  &-dark {
    background-color: #a8a8a8;
  }
  &-normal {
    background-color: #daddad;
  }
  &-light {
    background-color: #faa2af;
  }
  &-emphasis {
    background-color: #f94855;
  }
}

변수

SCSS는 $(달러 사인)을 통해 쉽게 변수를 적용할 수 있다.

$deepdark: black;
$dark: darkgrey;
$light: orange;

.container{
  color:$deepdark;
  h1{
    color: $dark;
  }
}

변수는 선언된 범위 내에서 유효 범위를 갖는다.
자바스크립트의 스코프와는 다르게 변경 된 값은 범위 밖에서도 변경된 값으로 적용된다.

$size: 200px; // 전체 범위

.container {
	$size: 400px; // .container에서는 400px로 변경하여 사용
    .item{
    width: $size; // 400px
    }
}

.box {
	width: $size // $size는 계속 변경딘 400px로 사용된다.
    }

산술 연산

/를 단축속성을 구분짓는 기호로도 사용하기에 산술 연산으로 사용하기 위해서는
1. 소괄호를 묶어서 사용하거나
2. 수에 값을 담아 나누어주거나
3. calc를 사용한다

.div {
	width: 20px + 20px // 40px
    height: 40px - 10px // 30px
    margin: 30px / 2 //30px / 2 나누기는 적용되지 않음
    font-size: 10px * 2 // 20px
}
// 나누기 적용 방법 1.
    margin: (30px / 2) // 15px;

// 나누기 적용 방법 2.
$size: 30px;
	margin: $size / 2 // 15px;

// 나누기 적용 방법 3.
	margin: calc(30 / 2)px;

@mixin / @include

재활용코드를 만들어 코드량을 줄일 수 있다.

@mixin center{
  display:flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center;
  .item{
    @include center;
    font-size: 18px;
  }
}

@mixin의 매개변수와 인수 사용

@mixin d-flex($align:center){
  display:flex;
  justify-content: $align;
  align-items: $align;
}

.container {
  @include d-flex; // default parameter를 통해 자동 center로 정렬됨.
  .item{
    @include d-flex(flex-start);
    font-size: 18px;
  }
}

복수의 매개변수,인수를 받을 수 있다.

@mixin d-flex($horizon: center, $align: center, $color: #ff0){
  display:flex;
  justify-content: $horizon;
  align-items: $align;
  color: $color;
}

.container {
  @include d-flex(center,flex-start,#daddad);
  .item{
    @include d-flex($align:flex-start,#f94855);
    font-size: 18px;
  }
}

키워드 인수는 특정 매개변수를 지정하여 인수의 자리 순서와 상관 없이
사용자가 원하는 인수만을 전달할 수 있다.
위 예제어는 .item에서 키워드 인수를 사용하였다.

  .item{
    @include d-flex($align:flex-start,#f94855);
    font-size: 18px;
  }

SCSS의 반복문

변수명을 지정하고 from ~ through로 사용한다

@for $i from 1 through 10 {
  //scss의 보간 #{}
  .box:nth-child(#{$i}){
    width: 100px;
  }
}

SCSS의 함수

@mixin center{
  display: flex;
  justify-content: center;
  align-items: center;
}

@function ratio($size, $ratio) {
  @return $size * $ratio
}

.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 9/16); // 16:9의 비율을 쉽게 만들 수 있다.
  @include center;
}

//@mixin은 코드의 모음, 함수는 반환된 결과를 나타낸다.

SCSS의 내장 함수

// mix() 첫번째 인수에 들어오는 색상과 2번째 인수를 섞어 새로운 색상을 만들어 반환한다.
.box{
background-color:mix($color, red)
}

// lighten(),darken() 첫번째 인수에 들어오는 색상을 2번째 인수만큼 밝게,어둡게 만들어 반환한다
.box{
  background-color: lighten(#3533ff, 10%);
}
.box{
  background-color: darken(#3533ff, 10%);
}
// darken, lighten은 버튼의 호버 효과에 유용하게 쓰인다.
.button:hover{
  background-color: darken($color, 10%)
}

//grayscale() 회색으로 만들어준다
.box{
  background-color: grayscale(#3533ff);
}

//invert() 색상을 반전시킨다
.box{
  background-color: invert(#3533ff);
}

//rgba() 반투명하게 만들어준다. 표준보다 편리하여 유용하다
.box{
  background-color: rgba($color, .5);
}

@each

// @mixin의 @content

@mixin left-top{
  position:absolute;
  top:0;
  left:0;
  @content;
}

.container {
  width:100%;
  height: 100px;
  @include left-top;
}
// mixin에 @content를 작성하고 사용하는 요소에서 중괄호를 통해 속성을 추가할 수 있다.
.box{
  @include left-top {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}