[SCSS]SCSS 기본 문법과 예시 calc 포함

 

SCSS(Sass)는 CSS를 더 쉽게 작성하고 관리할 수 있도록 돕는 CSS 전처리기입니다. SCSS는 Sass의 구문 중 하나로, CSS와 매우 유사한 구문을 사용합니다. SCSS의 기본 문법을 몇 가지 예시로 설명하겠습니다.

1. 변수 (Variables)

변수를 사용하여 재사용 가능한 값을 정의할 수 있습니다.

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

2. 중첩 (Nesting)

중첩을 사용하여 CSS 선택자를 계층적으로 작성할 수 있습니다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  li { 
    display: inline-block; 
  }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }
}

3. 믹스인 (Mixins)

믹스인은 재사용 가능한 코드 블록을 정의할 때 사용합니다.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

4. 함수 (Functions)

함수를 사용하여 계산된 값을 반환할 수 있습니다.

@function calculate-rem($px, $base: 16) {
  @return #{$px / $base}rem;
}

body {
  font-size: calculate-rem(16); // 1rem
}

5. 상속 (Inheritance)

상속을 사용하여 한 선택자의 스타일을 다른 선택자에 적용할 수 있습니다.

.message {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

6. 조건문 (Conditionals)

조건문을 사용하여 조건에 따라 스타일을 적용할 수 있습니다.

$theme: dark;

body {
  @if $theme == dark {
    background-color: black;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

7. 반복문 (Loops)

반복문을 사용하여 반복적인 스타일을 적용할 수 있습니다.

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

@each $color in red, green, blue {
  .#{$color}-text {
    color: $color;
  }
}

예제: SCSS 기본 설정

다음은 위의 요소들을 포함한 기본 SCSS 설정의 예제입니다.

// 변수
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

// 함수
@function px-to-rem($px, $base: 16) {
  @return #{$px / $base}rem;
}

// 믹스인
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 스타일 정의
body {
  font-family: $font-stack;
  font-size: px-to-rem(16);
  color: $primary-color;
}

.container {
  @include flex-center;
  padding: px-to-rem(20);
}

button {
  background-color: $secondary-color;
  color: white;
  border: none;
  padding: px-to-rem(10) px-to-rem(20);
  border-radius: px-to-rem(5);
  
  &:hover {
    background-color: darken($secondary-color, 10%);
  }
}

.alert {
  @extend .message;
  background-color: lighten($primary-color, 40%);
  border-color: $primary-color;
}

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / 3 * $i;
  }
}

 

이 예제를 통해 SCSS의 다양한 문법과 기능을 사용할 수 있습니다. 이러한 기능을 활용하여 CSS 코드를 더 효율적이고 유지보수하기 쉽게 작성할 수 있습니다.