[scss/sass] scss 사용법 익히기 (@debug, @at-root)

sass 공식문서 훑어보기

 

At-Rules

https://sass-lang.com/documentation/at-rules

Sass: At-Rules

 

@debug

@debug는 js 에서 console.log 찍는것과 똑같다고 보면 된다. 출력하고 싶은 값을 @debug 안에 넣어 출력하면 터미널에서 값을 확인할 수 있다.

@mixin inset-divider-offset($offset, $padding) {
  $divider-offset: (2 * $padding) + $offset;
  @debug ">>>>>>>>>>>>>>> divider offset: #{$divider-offset}";

}

div {@include inset-divider-offset(20, 40)}

출력 화면

 

 

@debug는 sass-loader 버전 ^12.0.0(또는 ^13.0.0) 에서 출력되지 않는 버그가 있다.

그래서 sass-loader 버전을 낮추고 웹팩을 사용해 빌드를 하니 출력 되었다.

 

1. pakage.json 수정 or 추가

  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "sass": "^1.52.3",
    "sass-loader": "11.1.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2"
  }

 

2. webpack.config.js 파일 생성 및 아래의 내용 추가

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'development',
  entry: {
    'test': path.resolve(__dirname, "css/test.scss"),
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
    ],
  },
};

  entry: {
    'test': path.resolve(__dirname, "css/test.scss"),  부분에 파일 이름과 경로를 잘 설정해주어야 함.
  },

 

3. npm install

 

4. npm run build 

 

5. 성공!!

 

 

@at-root

1. nest 문법 무시 하고 스타일 밖으로 빼내는 용도

scss를 작성하다 보면, 3중 이상의 중괄호를 사용하게 되는 경우가 있는데 이때 내부에 작성된 스타일을 root로 빼내는 역할을 하게 된다.

 

.container {
  ul {
    li {
      span {
        display: block;
        color: pink; 
        @at-root {
          span {background-color: blue;}
        }
      }
    }
  }
}

.container 안에 있는 ul 안에 있는 li 안에 있는 span 에 스타일을 주었다.

그런데, 그 스타일들 중에 background-color를 @at-root 를 적용 하면 어떻게 될까..............?

.container ul li span {
  display: block;
  color: pink;
}
span {
  background-color: blue;
}

이렇게 된다. 

정말 아예 네스트 된 덩어리 자체를 빠져나오게 된다.

근데 이게 왜 필요할까...?

그냥 처음부터 밖으로 빼서 쓰면 안되는걸까..? 아직은 이해불가

 

2. with, without 사용(ex. media query 사용 시)

 @at-root 내에 with 파라미터를 쓰면 특정 속성을 포함해서 적용 해달라. 

 @at-root 내에 without 파라미터를 쓰면 특정 속성을 제외하고 적용 해달라.  라고 생각하면 됨. 

 미디어 쿼리를 예로 들어보겠다.

 

@media screen {
  .page {
    width: 800px;
    background-color: pink;

    @at-root (without: print) {
      font-size: 5.2em;
    }

    @at-root (with: rule) {
      color: green;
    }
  }
}

이대로만 해석을 해보면, .page에 미디어 쿼리를 적용을 하는데 

screen 일 때 스타일은

    width: 800px;

    background-color: pink;

이다. 

 

그리고 미디어 상태가 print 일 때에는 

    @at-root (without: print) {

      font-size: 5.2em;

    }

얘를 적용하지 말라는 뜻. (= print 아닐 때만 적용해줘.)

 

상태가 어떻건 간에, 미디어 쿼리가 적용되어있는 구문에는 모두 적용 해야 한다는 뜻

    @at-root (with: rule) {

      color: green;

    }

(= 언제나 이 룰을 포함 해 달라. without 일 때 조차도.)

 

css로 컴파일 된 모습 확인

@media screen {

  .page {

    width: 800px;

    background-color: pink;

    font-size: 5.2em;

  }

}

.page {

  color: green;

}

css 만 가지고는 확인이 안되는 듯 하니까 화면을 보겠다.

 

screen 에서는 아래와 같이 적용 됨.

width: 800px;

background-color: pink;

font-size: 5.2em;

color: green;

 

// 모두 적용 됨

 

 

pint 모드 일 때에는 아래와 같이 적용 됨

color: green;

만 적용 됨. 

 

 

 

- 끗! -