SCSS

euNung·2022년 6월 13일
0

SCSS

목록 보기
1/1
  • SCSS
    : Sass의 모든 기능을 지원하는 Superset

  • Sass(Syntehtically Awesome StyleSheets)
    : CSS 전처리기
    : 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공
    : CSS로 컴파이을 거친 뒤 실행 가능

  • Sass vs SCSS
    - Sass: 들여쓰기 사용

    • SCSS: {} 와 ; 사용
  • Variables
    : stylesheet에서 재사용하고 싶은 정보를 변수로 저장
    : $ 문자를 사용하여 변수로 만듦

    /* css */
    :root {
        --primary-color: #272727;
        --accent-color: #ff652f;
        --text-color: #fff;
    }
    // scss
    $primary-color: #272727;
    $accent-color: #ff652f;
    $text-color: #fff;
  • Nesting
    : & 문자는 현재 요소를 의미
    : #{&} 문자를 사용하여 부모요소 포함
	// & 예제
    .main {
      @include flexCenter(row);
      // operation 이 같아야 한다. %와 px 연산 불가
      width: 80% - 40%;
      margin: 0 auto;

      &__paragraph {
        font-weight: weight(bold);

        &:hover {
          color: pink;
        }
      }
    }
	/* 컴파일된 css 파일 */
    .main {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      width: 40%;
      margin: 0 auto;
    }
    .main__paragraph {
      font-weight: 700;
    }
    
    .main__paragraph:hover {
      color: pink;
    }
	// #{&} 예제
	.main {
      @include flexCenter(row);
      // operation 이 같아야 한다. %와 px 연산 불가
      width: 80% - 40%;
      margin: 0 auto;

      #{&}__paragraph {
        font-weight: weight(bold);

        &:hover {
          color: pink;
        }
      }
    }
	/* 컴파일된 css 파일 */
    .main {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      width: 40%;
      margin: 0 auto;
    }
    .main .main__paragraph {
      font-weight: 700;
    }
    
    .main .main__paragraph:hover {
      color: pink;
    }
  • maps
    : JS의 Array메서드 map과 같이 사용
	$font-weights: (
        "regular": 400,
        "medium": 500,
        "bold": 700
	);

    body {
        font-weight: map-get($font-weights, bold)
    }
  • Partials
    : _로 시작하는 파일 분리 가능 & CSS 파일로 컴파일x
    : @import '파일명'으로 불러내기 가능
    // _variables.scss
    $primary-color: #272727;
    $accent-color: #ff652f;
    $text-color: #fff;
    $font-weights: (
            "regular": 400,
            "medium": 500,
            "bold": 700
    );
    $mobile: 800px;

    // _resets.scss
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    // main.scss
    @import "./resets";
    @import "./variables";

    body {
      background: $primary-color;
      color: $text-color;
    }
  • Functions
    : JS의 함수 문법과 동일
    : 값 return
    @function weight($weight-name) {
      @return map-get($font-weights, $weight-name);
    }
  • Mixin
    : style 정의
	// 예제 1
    @mixin flexCenter($direction) {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: $direction;
    }

    .main {
      @include flexCenter(row);
      width: 80%;
      margin: 0 auto;
    }
    
    // 예제 2
    @mixin theme($light-theme: true) {
      @if $light-theme {
        background: lighten($primary-color, 100%);
        color: darken($text-color, 100%);
      }
    }
    
   	 // $light-theme 생략 가능
     // $light-theme:false인 경우 .light 선택자에 대한 css 코드 컴파일x
    .light {
      @include theme($light-theme: true);
    }
    
    // 예제 3
    @mixin mobile {
      @media (max-width: $mobile) {
        @content;
      }
    }
    
    .main {
      @include flexCenter(row);
      width: 80%;
      margin: 0 auto;
      
      ...

      @include mobile {
        flex-direction: column;
      }
    }
  • extends
    : 해당 선택자의 스타일 복사하여 불러옴
    .main {
      width: 80%;
      margin: 0 auto;

      #{&}__paragraph1 {
        font-weight: weight(bold);

        &:hover {
          color: pink;
        }
      }

      #{&}__paragraph2 {
        @extend  .main__paragraph1;

        &:hover {
          color: $accent-color;
        }
      }
    }
  • Operations
    : +, -, *, math.div(), % 와 같은 연산자 사용 가능
    : 같은 단위 연산만 가능 (% - px 간의 연산 불가)
    .main {
      width: calc(80% - 40%);
    }
    .main {
      width: 80% - 40%;
    }
profile
프론트엔드 개발자

0개의 댓글