ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • css - Sass의 네스팅 (nesting)
    CSS/SCSS 2020. 5. 18. 10:00

     

     

    SaSS란?

    : CSS를 보다 효율적으로 편리하게 사용하기 위해 만들어진 언어이다.

     

    SaSS를 쓰는 이유

    : 리엑트는 index.js와 index.html로 여기서 각종 컴포넌트들이 합쳐지기 때문에 방대한 양의 css의 class이름들이 겹쳐서 오류가 난다. 하지만, SCSS의 네스팅(nesting) 기능을 사용하면 오류가 나지 않을 것이다.

    그렇기 때문에 SCSS를 써야 한다.

     

    예시로 알아보자.

    소스는 여기서 확인!

     

    wjdxor133/westagram

    Contribute to wjdxor133/westagram development by creating an account on GitHub.

    github.com

     

    Login.css

    * {
      box-sizing: border-box;
    }
    body {
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    .login-form {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      background-color: white;
      border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
      width: 350px;
      height: 300px;
      padding: 0px 25px;
    }
    
    .login-form img {
      padding: 30px 45px 45px 45px;
      margin-bottom: 0px;
    }
    
    .login-form #userId {
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      margin-bottom: 5px;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #cdced0;
    }
    .login-form #userPw {
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      padding: 8px;
      border-radius: 4px;
      margin-bottom: 15px;
      border: 1px solid #cdced0;
    }
    
    .login-form .loginBtn {
      color: white;
      font-weight: bold;
      padding: 3px 0;
      background-color: #b2dffc;
      border: 1px solid #b2dffc;
      border-radius: 4px;
    }

    기존 로그인 css 파일이다.

    이제 이 소스를 네스팅 형식으로 바꿔보자.

    SaSS의 네스팅(nesting)이란?

    : 부모 루틴 안에서 자식 루틴을 넣어서 짜는 것이라고 보면 된다.

    ex) 네스팅 적용

    <div>
    	<p>nesting 예시</p>
    </div>
    div{
     	p {
        	color:red;
        }
     }

     

    이런 식으로, 변화시킨다.

    여기서 .Login은 react에서는 최상위 Element가 존재해야 한다.

     

    Login 컴포넌트

    render() {

        return (

          <div className="Login"> -> 최상의 Element의 이름은 컴포넌트의 이름과 통일시키는 것이 유지 보수할 때 좋다.

            <div className="login-form"> --> 부모

              <img src={imgalt="Logo" />

              <input

                className="userId" --> 자식

                type="text"

                placeholder="전화번호, 사용자 이름 또는 이메일"

                onChange={this.idInputCheck}

              />

              <input

                className="userPw" --> 자식

                type="password"

                placeholder="비밀번호"

                onChange={this.pwInputCheck}

              />

              <button

                className="loginBtn" --> 자식

                type="button"

                style={{ backgroundColor: this.state.btnColor }}

                onClick={this.btnClick}

              >

                로그인

              </button>

            </div>

          </div>

        );

      }

    Login.scss

    /* 최상위 Element */
    .Login {
      box-sizing: border-box;
      background-color: rgba(var(--b3f, 250, 250, 250), 1);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    
    /* 부모 */
      .login-form {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        background-color: white;
        border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
        width: 350px;
        height: 300px;
        padding: 0px 25px;
    	
        /* 자식 1 */
        img {
          padding: 30px 45px 45px 45px;
          margin-bottom: 0px;
        }
    
    	/* 자식 2 */
        .userId {
          background-color: rgba(var(--b3f, 250, 250, 250), 1);
          margin-bottom: 10px;
          padding: 8px;
          border-radius: 4px;
          border: 1px solid #cdced0;
        }
    
    	/* 자식 3 */
        .userPw {
          background-color: rgba(var(--b3f, 250, 250, 250), 1);
          padding: 8px;
          border-radius: 4px;
          margin-bottom: 15px;
          border: 1px solid #cdced0;
        }
    
    	/* 자식 4 */
        .loginBtn {
          color: white;
          font-weight: bold;
          padding: 3px 0;
          border: 1px solid #b2dffc;
          border-radius: 4px;
        }
      }
    }
    

    이런식으로 네스팅을 구성하면 다른 컴포넌트에서 사용한 class이름이 겹치지 않고, 부모 자식 관계로 나타내기 때문에 소스를 수정하거나 속성들을 적용시킬 때 더욱 편하게 느껴질 것이다.

    댓글

Designed by Tistory.