Scss 를 다양하게 사용해보자!

요즘 scss 를 이용해 마크업 작업을 하고있지만 빠르게 작업하는데만 열중해 중첩만 사용하고 나머지 문법은 아예 사용하고 있지 않은 나를 발견

배운지 몇달 되기도 했고 사용하고 있지 않기도 해서 기억이 가물가물해 정리해보는 포스트다.

 

1. @at-root

: 부모 클래스 밖에서도 사용되는 것을 알게 되었을 때 사용

Scss

.parent_class {
  .class1 {
    color: blue;
  }
  @at-root .class2 {
    color: gray;
  }
}

CSS

.parent_class .class1 {
  color: blue;
}
.class2 {
  color: gray;
}

2. @extend

: 특정 선택자를 상속할 때 사용

Scss

.box {
	padding: 20px;
    border: 1px solid black;
}

.yellow-box {
	@extend .box;
    border: 1px solid yellow;
}

CSS

.box, .yellow-box {
	padding: 20px;
    border: 1px solid black;
}

.yellow-box {
  border: 1px solid yellow;
}

placeholder 선택자 % 를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일되지 않는다.

Scss

%box {
  padding: 0.5em;
  border: 1px slide black;
}

.yellow-box {
  @extend %box;
  color: yellow;
}

.green-box {
  @extend %box;
  color: green;
}

CSS

.yellow-box, .green-box {
  padding: 0.5em;
  border: 1px slide black;
}

.yellow-box {
  color: yellow;
}

.green-box {
  color: green;
}

3. mixin

: extend 와 비슷하지만 인수를 받는다는 점에서 다르다.

선언할 때는 @mixin 사용할 때는 @include

Scss

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

CSS

h1 {
  color: green;
  font-size: 12px;
}

Scss

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

CSS

.container {
  width: 900px;
}
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

#{ } 표현은 특정 문자열을 그대로 출력 할 때 사용된다.

@content directive 를 사용하면 나중에 @include 하였을 때, 그 선택자 내부의 내용들이 @conent 부분에 나타나게 된다.

 

4. function

: mixin 과 비슷하지만 믹스인은 스타일을 반환하지만 함수는 값을 반환한다는 점에서 다르다.

Scss

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

@function cp($target, $container) {
  @return calc-percent($target, $container);
}

.my-module {
  width: cp(650px, 1000px);
}

css

.my-module {
  width: 65%;
}

5. & (상위 선택자 참조)

Scss

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

CSS

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

6. @if

 

7. @for

 

8. @each

 

9. @while

 

10. Built-in Functions

: SASS 에서 기본적으로 제공하는 내장함수

 

 

... 추가 예정. 

 

출처

https://velopert.com/1712

https://heropy.blog/2018/01/31/sass/