부트스트랩 Saas

Sass란?

Sass는 "Syntactically Awesome Stylesheets"의 약자입니다. Sass는 스타일시트 언어로서, 웹 개발에서 CSS를 효과적으로 작성하고 관리하기 위한 확장된 기능을 제공합니다. Sass는 CSS의 슈퍼셋(Superset)이며, 좀 더 간결하고 유지보수가 쉬운 코드를 작성하는 데 도움이 되는 여러 기능을 제공합니다.

Sass는 다음과 같은 주요 특징을 포함하고 있습니다:

1. 변수(Variables): 값을 재사용하고 코드를 더 유지보수하기 쉽게 만드는 변수를 지원합니다.

2. 중첩(Nesting): 선택자의 중첩을 지원하여 코드의 가독성을 높이고 계층 구조를 명확하게 표현할 수 있습니다.

3. 믹스인(Mixins): 코드의 재사용을 촉진하기 위해 믹스인을 사용할 수 있습니다. 믹스인은 여러 스타일 규칙을 그룹화하고 다양한 선택자에 적용할 수 있게 합니다.

4. 확장(Extend): 기존 스타일을 확장하여 중복을 줄이고 코드를 간소화할 수 있습니다.

5. 연산(Operations): 산술 연산을 지원하여 값을 계산하거나 단위를 조작할 수 있습니다.

Sass는 CSS와 호환성이 있어 기존의 CSS 코드를 Sass로 변환하거나 Sass 코드를 CSS로 컴파일할 수 있습니다. Sass는 .scss 확장자를 가진 파일에 작성되며, 이 파일은 Sass 컴파일러를 사용하여 CSS로 변환됩니다. Sass는 프론트엔드 개발에서 효율적이고 강력한 스타일링 도구로 널리 사용되고 있습니다.

// Colors
$blue:       #0d6efd;
$indigo:     #6610f2;
$purple:     #6f42c1;
$pink:       #d63384;
$red:        #dc3545;
$orange:     #fd7e14;
$yellow:     #ffc107;
$green:      #28a745;
$teal:       #20c997;
$cyan:       #0dcaf0;
$white:      #fff;
$gray:       #6c757d;
$gray-dark:  #343a40;
$primary:    $blue;
$secondary:  $gray;
$success:    $green;
$info:       $cyan;
$warning:    $yellow;
$danger:     $red;
$light:      $gray-light;
$dark:       $gray-dark;

// Spacing
$spacer: 1rem;
$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
);

// Typography
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-size-base:              1rem;
$line-height-base:            1.5;
$headings-margin-bottom:      (.5 * $spacer);

// Components
$border-width:                  1px;
$border-color:                  $gray-300;
$border-radius:                 .25rem;
$border-radius-lg:              .3rem;
$border-radius-sm:              .2rem;

// Buttons
$btn-padding-x:               ($spacer * .75);
$btn-padding-y:               $btn-padding-x / 2;
$btn-line-height:             1.25;
$btn-font-weight:             $font-weight-bold;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .125);

// Forms
$input-padding-x:             .75rem;
$input-padding-y:             .375rem;
$input-line-height:           1.25;
$input-border-width:          $border-width;
$input-border-radius:         $border-radius;
$input-box-shadow:            inset 0 1px 1px rgba($black, .125);

// Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);