개발자.. 너란놈..

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

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;
    }
}

SASS란?

Sass: Syntactically Awesome Style Sheets의 약자로 CSS를 만들 때 좀 더 편리하게 쓸 수 있게 만들어주는 CSS 전처리기 언어 이다.

SASS 설치를 하기 위해서는 Node.js를 설치 하여야 한다.

Node.js 설치 주소

https://nodejs.org/ko

※보통은 안정성이 있는 LTS 버전을 사용하고 신규 버전은 새로운 것들이 추가되어 안정성이 있는 LTS 버전 보다는 안정성이 떨어져서 LTS 버전을 다운로드 받는 것을 추천한다.

node.js를 다운로드 받고 '다음'을 눌러서 설치를 완료하고 나면 '명령 프롬포트' 에서 정상 설치가 되었는지 확인 할 수 있다.

위와 같이 Node가 설치 되면 'npm' 을 사용하여 SASS를 설치 할 수 있습니다.

npm install sass -g

설치가 완료되고 나면 아래와 같이 VS code를 통해서 SASS / SCSS를 사용 할 수 있습니다.

1. VS CODE에서 터미널을 열고 (Ctrl + `)

2. 터미널에 명령어를 입력 합니다.

3. 명령어가 제대로 동작하면 scss 스타일에서 코딩 하는 것을 바로 CSS 전처리기인 SASS가 css로 변환 해줍니다.