React - Sass(Scss)

이진아·2021년 1월 16일
0

React

목록 보기
6/11
post-thumbnail

이번에는 React에서 Scss의 대해서 공부를 해봤다.
Scss는 Sass보다 조금 더 늦게 나왔고 둘이 비슷하다고 보면 된다.

1. Sass의미

우선 Sass는 syntactically awesome stylesheets의 줄임말이다.

CSS pre-processor로 복잡한 작업을 쉽게 작업 할 수 있고, 코드의 재활용성을 높여줄 뿐 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해주는 장점을 가지고 있다. 그리고 CSS와 다르게 함수와 변수를 사용할 수 있다.

또한 전처리역할을 하여 컴파일이 필요한 CSS로 결과가 나오는 프로그래밍이다. 그래서 이는 가능한 한 간단하게 유지되어야 한다.

2. Classname 라이브러리

Classname는 이름을 지을 때 조금더 편하게 쓰기 위하여 사용을 한다.

classnames("Button", "Size"); // classname="Button Size"
classnames("Button", {Size: true})   //"Button Size"
classnames("Button-Size": flase)   // ''
classnames({Button: true}, {Size: true})    //Button Size
classnames({Button: true, Size: true})   //Button Size

3. Nesting

Nesting 이란 원래 기존에 html,css에서 사용했던 복잡한 구조를 조금 더 간편하게 사용할 수 있도록 하는 것이다.

.div {
  margin: 0 auto;
  background: pink;
  p{
  font-size:15px;
  }
  button {
  color:blue;
}

4.import

import는 외부에서 scss, sass 파일을 불러와서 현재 파일에서 같이 사용할 수 있도록 하는 것이다.

4. extend

extend는 확장 기능으로 속성이 같을 경우에 사용을 한다.
extend를 사용하는 목적으로는 규칙 간에 확장된 선택자 내에서의 관계를 유지하기 위함이다.
그래서 속성을 중복하지 않고 합치기 때문에 파일 크기에서 많은 도움이 되고 있다.

한마디로 선택자 내에서 관계 유지시 사용하는 것이 좋다.

%button {
  margin: 0 auto;  
  color: orange;
  }
}

.button {
  @extend %button;
  font-size: 20px
}

여기에서 .button이 @extend %button으로 확장함으로써 %button에서 사용했던 margin과 color를 자동적으로 불러올 수 있다.

5.mixin

mixin이란 공통된 속성을 묶어서 더 간편한 코드로 만들어 준다. mixin에서는 함수처럼 전달인자를 취할 수도 있다.

@mixin button-color($color){
    background: $color;
    &:hover {
        background: lighten($color: $color, $amount: 10%); //기존 색상보다 10% 밝게
    }

    &:active {
        background:  darken($color: $color, $amount: 10%); //기존 색상보다 10% 어둡게
    }
}

이렇게 코드를 짰을 때

&.blue {
        @include button-color(($blue));
}

    &.gray {
        @include button-color(($gray));
    }

    &.pink {
        @include button-color(($pink));
    }

이렇게 깔끔하게 사용할 수 있다.

참조 사이트
https://sass-guidelin.es/ko/

profile
새싹 개발자><

0개의 댓글