Sass

 

 

 

Sass: Syntactically Awesome Style Sheets

 

css전처리기는? css전에 무언갈 처리해주는 도구.

 

왜 필요한가? 브라우저가 읽을 수 있는 문서는 html뿐이다. 브라우저가 읽을 수 있는 스타일 시트는 css뿐이다.

근데 css는 쓰다보면 불편하다 그 불편함을 해소하기 위해서 만들어진게 css전처리기다. 

 

하는 일은 애네들이 제공하는건 css가 제공하지 않는 편리한 문법들을 통해서  css를 작성할 수 있게 해주는 것이다.

 

sass파일로 스타일시트를 만드는 것이다. 

 

sass는 전처리기다. 브라우저가 읽을 수 있는건 css밖에 없고 그래서 최종적으로 사용자한테 나가기전에 실제 서버가 뜨기전에 애네들이 그전에 처리를 해주는 것이다. sass를 css로 바꾸는 처리를 (css전처리기)

 

1. 설치

npm install node-sass@4.14.1 --save

• 설치 시 node-modules 폴더에 node-sass 폴더가 생성됩니다. (package source code)
• --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",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }
}

 

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

 

Sass 파일의 확장자는 .scss 입니다. .css 확장자로 되어 있는 파일을 전부 .scss 확장자로 바꿔주세요. (자바스크립트 파일의 import 구문도 수정해주세요.

 

3. Nesting 기능 적용하기

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있습니다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해주세요.

 

<Login.js>

import React from "react";
import "./Login.scss";

class Login extends React.Component {
  render() {
    return <h1 className="title">Login Page</h1>
  }
}

export default Login;

 

<Login.scss>

.title{
  color: red;
}

 

 

 

스타일링이 깨지는 이유. 

 

<Main.js>

import React from "react";

class Main extends React.Component {
  render() {
    return <h1 className="title">Hello Main</h1>
  }
}

export default Main;

Main.js는 따로 scss파일을 import하지 않았다.

 

 

 

그런데 Main경로를 들어가면 스타일이 적용되어 있다.

개발자 도구를 확인해보자.

 

Login.scss에서 준 스타일이 메인에도 적용되어있다.

왜이럴까?

 

<Routes.js>

import React from "react";
import { BrowserRouter as Router, Switch, Route } form "react-router-dom";
import Login from "./pages/Login/Login"
import Main from "./pages/Main/Main"
import Nav from "./components/Nav"
 
class Routes extends React.Component {
  render(){
    return(
      <Router>
        <Nav /> // 추가
        <Switch>
          <Route exact path="/" component={Login}/>
          <Route exact path="/main" component={Main}/>
        </Switch>
      </Router>
    )
  }
}
 
export default Routes;

그 이유는 Routes.js에서 다 합쳐지기 때문이다.

 

기존에 mpa(멀티플페이지)에서는 html이 따로 있었으니까 각기 css파일을 가지고 있었다.

그런데 spa는 html이 하나고 거기에 들어가는건 Routes컴포넌트고 Routes.js에서 모든 컴포넌트를 가져온다. 

그러면 Login.js에 딸려있는 Login.scss도 같이 가져오게 되는 것이다.

그러면 전체 페이지에 모든 컴포넌트에 붙여놓은 scss파일들이 다 한 번에 적용되고 있다.

그러니까 클래스네임이 겹치거나 하면은 스타일링이 다깨지는 문제가 발생하는 것이다.

 

이런 문제를 해결하기 위해서 네스팅을 해야한다.

 

<Login.js>

import React from "react";
import "./Login.scss";

class Login extends React.Component {
  render() {
    return(
      <div className="Login">
      <h1 className="title">Login Page</h1>
      </div>
    ) 
  }
}

export default Login;

네스팅을 할 때 제일 편리한거는 최상위 부모태그에서 클래스 네임을 부모컨퍼넌트와 똑같이 주는 것이다.

 

<Login.sass>

.Login .title{
  color: red;
}

이런식으로 네스팅을 해주면 되지만 이렇게 일일히 모두 네스팅을 해주는건 너무 힘들다.

그래서 sass의 기능을 이용할거다.

 

.Login{
 .tile{
   color:red;
 }
}

sass의 기능을 이용하면 이런식으로 네스팅할 수 있다.

 

 

 

터미널에 다음과 같이 치면 Login.css파일이 생기는데 Login.sass와 비교하면 

 

css파일로 변환했을 때 전처리기가 동작해서 해줘서 변환된걸 확인할 수 있다.

 

 

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

Sass 에는 Nesting 외에도 여러가지 기능이 있습니다. 공식 문서를 통해서 다른 기능들도 살펴보고 필요에 따라서 적절하게 활용해주세요.

 

변수

컬러들은 변수화시켜서 사용한다.

<Login.scss>

$button-color: blue /*$를 붙여 변수를 선언한다.*/

.Login{
 .tile{
   color:red;
 }
 
 .LoginBtn {
   color: $button-color;
 }
}

여러페이지들의 버튼이 이 변수를 쓰고 있으면 버튼 색을 바꾸고 싶을 때 이 $button-color의 값만 바꾸면 된다.

 

이런 변수들은 Login에서만 쓰지 않고 전체페이지에서 사용하니까 따로 파일을 만들어서 관리해줘야 한다.

variables.scss같은 파일명으로 관리해주자.

 

<variables.scss>

$button-color: blue 

 

 <Login.scss>

 

@import "../../styles/variables.scss"; /*분리한 variables를 import한 것 ;(세미콜론) 꼭 붙이자*/

.Login{
 .tile{
   color:red;
 }
 
 .LoginBtn {
   color: $button-color;
 }
}

 

 

common에서 변수까지 한 번에 관리해도 되는데 다른 scss파일들에서 변수를 쓰기 위해 common을 import를 하면 

매 scss파일마다 *{box-sizing: border-box;}가 붙어서 개발자도구에서 보면 중복돼서 여러개가 들어갈 수 있다.

 

그렇게 되면 보기가 불편하기 때문에 변수들만 따로 빼서 관리한다.

 

 

그러면 variable도 index.js에 넣어서 관리하면 안되나?

안된다! 최종css로 변환된게 라우터에 들어가는 것이기 떄문에 전에 처리할 때는 다 필요하기 때문에 variable이나 mixin은 

각각 import를 해줘야 한다!

 

Mixin

자주반복되는것들을 공통으로 묶어놓고 그것을 꺼내쓸수있다.

 

@import "../../styles/variables.scss";

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

.Login{
 @include flexCenter;
 .tile{
   color:red;
 }
 
 .LoginBtn {
   color: $button-color;
 }
}

 

 

mixin한 flexCenter가 클래스login에 잘 적용됐다.

 

 

.Login{
 .title{
   color:red;
   &:hover {   /* &는 부모인 title을 가리킨다. */
     color: blue;
   }
 }
 
 .LoginBtn {
   color: $button-color;
 }
}

또한 &는 부모를 가리킨다.

 

이거말고도 기능이 많다. mixin을 함수처럼 사용할 수도 있다. flex자체를 함수형으로 만들어서 justify랑 align을 그때그때 인자로 주게 설정할 수도 있다.

나중에 공식문서를 확인해보자.