Sass

sass

css의 전처리기이다.즉 변수,상속,혼합,중첩 등의 다양한 기능을 제공한다.

브라우저는 css만 적용가능하다. 즉, sass는 전처리기이기 웹에 적용하는것은 불가능하기 때문에 컴파일러를 통해 css로 컴파일이 필요하다.

sass vs scss

• Sass
  : CSS와는 다르게 중괄호가 아닌 들여 쓰기를 사용한다.
• SCSS
  : CSS와 같이 {}와 ;을 사용한다.

설치

npm install sass --save

확장자 변경

.css 확장자를 .scss로 변경해줘야 한다.(자바스크립트 파일의 import 구문도 같이 수정)

Nesting 기능 적용

Nesting은 sass의 가장 기본적인 기능이다. jsx 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해줘야 하고, .scss파일에서도 최상위 요소 안쪽에서 하위 요소의스타일 속성을 정의하면 된다.

예시)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

      li {
        display: inline-block;
      }
    }

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

코드를 보면 nav상위 요소안에 ul,a가 들어있고 ul안에 li요소가 들어가있다.

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

sass에는 nesting 외에도 여러가지 기능이 있다.

공식문서를 참조하면 더 많은 기능들을 적용할수 있다
공식문서

.login-container {
  display: flex;
  justify-content: center;
  align-items: center
}

button {
  width: 200px;
  height: 100px;
  background-color: blue;
}

button:hover {
  background-color: red;
  cursor: pointer; 
}
 
input {
  background-color: blue;
}

input:focus {
  background-color: red;
}

mixin을 적용해보면 ▼

$theme-color: blue;
$border-style: 1px black solid;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center
}

.login-container {
  @include flex-center;

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

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

  input {
    background-color: $theme-color;

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

이 경우에는 스타일 적용이 같은 값만 적용될때
변수를 선언해서 그 값을 사용할때마다 변수를 적용하면 더욱 편리하게 이용가능하다.

여기서 적용한건 $theme-color : blue; 선언해서 블루컬러를 적용하고 싶으면 $theme-color 를 적용하면 된다.
css상에선 변수를 선언할때 $를 적어야한다.