개발자.. 너란놈..

테일윈드를 사용하면 절대로 쓸 일이 없는 구문이긴 하지만 테일윈드나 다른 프레임워크를 설정하기 어려워서 하나 만들어 보았습니다.

Padding

//숫자를 200 -> 1000 하면 1000까지 가능
@for $i from 0 through 200 {
    .pd-#{$i} {
        padding: #{$i}px !important;
    }

    .pt-#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr-#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl-#{$i} {
        padding-left: #{$i}px !important;
    }
}

Margin

//숫자를 200 -> 1000 하면 1000까지 가능 (조절가능)
@for $i from 0 through 200 {
    .md-#{$i} {
        margin: #{$i}px !important;
    }

    .mt-#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr-#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml-#{$i} {
        margin-left: #{$i}px !important;
    }
}

WebPack에서 그냥 실행 했을 경우에는 개발자 도구 시 소스가 깨져서 보이는 경우가 있다.

개발 시에는 개발자 도구를 통하여 디버깅을 할 수도 있기 때문에 webpack 세팅을 2개로 나눠서 하는 경우가 좋다.

2개로 나눠서 아래와 같이 개발 실행 시에는 개발자 도구에서 볼 수 있게 세팅을 해주면 된다.

devtool : 'inline-source-map',

Webpack에서 scss를 사용하기 위해서는 아래와 같이 세팅이 필요하다.

module: {
    rules: [
      {
        test: /\.s[ac]ss/i,
        use: [
          'style-loader',
          // css-loader 소스맵 옵션 활성화
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          // sass-loader 소스맵 옵션 활성화
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ],
        exclude: /nodeModules/,
      },    
    ],
  },