Sass

Sass 공식 문서
https://sass-lang.com/

설치

• 설치를 하면 node-modules 폴더에 sass폴더가 생성된다
  npm install sass --save
• --save:로 package.json에 설치된 패키지의 이름과 버전 정보를 업데이트 한다

// package.json
{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }
}

.css파일의 확장자 .scss로 바꾸기

• .css확장자파일을 .scss확장자로 바꾼다

Nestin 기능 적용

• Sass의 가장 기본적인 기능은 Nesting이다

//자식의 선택자들을 부모의 선택자 블록 안에 넣어준다
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

      li {
        display: inline-block;
      }
    }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

변수의 활용과 &연산자, mixin 등 기본 기능 적용하기

$theme-color: blue;              // 변수명앞에 $달기
$border-style: 1px black solid;

@mixin flex-center {            //@mixin으로 함수 선언
  display: flex;
  justify-content: center;
  align-items: center
}

.login-container {
  @include flex-center;         //@include로 함수 실행

  button {
    width: 200px;
    height: 100px;
    background-color: $theme-color;

    &:hover {                    //
      background-color: red;
      cursor: pointer;
    }
  }

  input {
    background-color: $theme-color;

    &:focus {
      background-color: red;
    }
  }
}