Dev log - 38, SCSS

CSS 확장언어

• CSS Preprocessor ( CSS 전처리기 )

• 문법 :
  변수 선언, function, nesting, mixin, if, for와 같은 반복 구문 등

• 종류 :
  SASS(SCSS) : 70~80% (https://sass-lang.com/)
  LESS,나머지 : 10~20%

SCSS 컴파일 CSS 변환 설치 방법

• Node.js 설치를 기본으로 함

• 두가지 방법

1. 응용 프로그램 설치 후 컴파일 (scout-app, https://scout-app.io/)

2. 코드 편집기 안의 플러그인 설치 후 컴파일 (sass-autocompile / 제작자 : armin-pfaeffle)
   -> 먼저 해야할 것은, 명령 프롬프트 창에서 'npm install -g sass' 명령어를 이용해 SASS를 설치
   그 후, 필요 버전에 맞는 NVM 설치 (설치 파일을 이용하여 설치 후, nvm 명령어를 이용하여 버전 선택 가능)

SCSS

• CSS에서 부모 자식 관계를 쉽게 나열할 수 있음

기존 CSS

nav ul {display: none;}
nav ul li {display: none;}

SCSS

nav {
  ul {
   display: none;
   li {
    display: none;
    }
  }
}

• 변수를 쉽게 활용할 수 있음

기존 CSS

:root{ --height: 50px; }

#test { height: var(--height); }

SCSS

$height: 50px;

#test { height: $height; }

• 변수를 배열로 사용할 수 있음 (#{} 형식으로 벡틱(`)이나 ''+'' 의 기능을 수행할 수 있음)

$numSizes : 100, 200, 300;

@each $size in $numSizes {
  .num-#{$size} {
    width: #{$size}px;
    height: #{$size}px;
  }
}

SCSS 페이지 실습

SCSS 파일 분화

• 다음과 같은 형식으로 파일을 분화해서 적용할 수 있다, 최종적으로는 style.scss 파일을 저장해야 적용

@import "var.scss"; // 공통 변수
@import "mixin.scss"; // 공통 mixin
@import "initial.scss"; // CSS 초기화
@import "common.scss"; // 공통 요소
@import "component.scss"; // 공통 컴포넌트
@import "layout.scss"; // 공통 레이아웃

SCSS 활용 기법

• @omport를 사용하여 다른 파일에서 변수를 처리했어도, style.scss에서 연동이 되었다면 전부 연동이 됨

• ' /// ' 주석을 사용해야 컴파일 되었을 때 보이지 않음

• ' & ' 을 사용하여, 자바스크립트의 this 와 같은 효과를 낼 수 있음

li { 
  margin-left: 30px;

  &:first-child {
    margin-left: 0;
  }
}