css와 scss의 차이점

안녕하세요! CSS와 SCSS의 차이점에 대해 알려드리겠습니다. CSS는 Cascading Style Sheets의 약어로, HTML 문서의 스타일을 지정하는 스타일 시트 언어입니다. CSS는 HTML과 같은 마크업 언어를 사용하여 문서의 내용을 작성하는 방식과 달리, 문서의 디자인과 레이아웃을 작성하는 데에 사용됩니다.

 

SCSS는 Sassy CSS의 약어로, CSS 전처리기(preprocessor)입니다. SCSS는 CSS의 문법을 따르며, CSS에서 지원하지 않는 기능을 추가하여 사용할 수 있습니다. 즉, CSS 코드를 더욱 간결하고 효율적으로 작성할 수 있도록 도와주는 도구라고 할 수 있습니다. CSS와 SCSS의 가장 큰 차이점은 바로 코드 작성 방법입니다. CSS는 단순한 텍스트 파일이며, 스타일을 지정하는 데에는 속성 이름과 값으로 이루어진 속성(Property)과 선택자(Selector) 등이 사용됩니다. 예를 들어, 다음은 CSS의 기본 구조입니다. 

 

홈페이지제작 :: 프로그램개발 - 부산홈페이지제작

css

selector {
  property: value;
}

반면 SCSS는 CSS의 문법을 따르면서도 변수, 연산자, 함수, 믹스인 등과 같은 다양한 기능을 제공합니다. SCSS에서는 변수를 사용하여 값에 이름을 부여하고, 이를 재사용할 수 있습니다. 또한, 연산자를 사용하여 값의 계산을 할 수 있습니다. 예를 들어, 다음은 SCSS의 예시 코드입니다.

 

css

$primary-color: #007bff;
$secondary-color: #6c757d;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

SCSS에서는 믹스인(Mixin)을 사용하여 스타일을 재사용할 수 있습니다. 믹스인은 CSS에서 반복되는 스타일을 하나의 코드 블록으로 작성하여, 코드의 가독성과 유지보수성을 높이는 데에 유용합니다. 예를 들어, 다음은 SCSS에서 믹스인을 사용한 예시 코드입니다.

 

css

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  @include flex-center;
}

또한, SCSS에서는 중첩 규칙(Nesting)을 사용하여, HTML의 구조와 유사한 방식으로 스타일을 작성할 수 있습니다. 예를 들어, 다음은 SCSS에서 중첩 규칙을 사용한 예시 코드입니다.

 

 

css

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

 

css

  a {
    color: #333;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

위 코드는 HTML에서 `<nav>` 요소의 하위 요소인 `<ul>`과 `<li>` 요소를 중첩하여 작성한 코드입니다. SCSS에서는 중첩 규칙을 사용하여 HTML의 구조를 반영하면서 코드의 가독성을 높일 수 있습니다. 

또한, SCSS에서는 조건문과 반복문과 같은 제어문을 사용할 수 있습니다. 조건문은 @if, 반복문은 @each, @for 등의 키워드를 사용하여 작성할 수 있습니다. 예를 들어, 다음은 SCSS에서 조건문과 반복문을 사용한 예시 코드입니다.

 

홈페이지제작 :: 프로그램개발 - 부산홈페이지제작

$colors: (primary: #007bff, secondary: #6c757d, success: #28a745);

@each $key, $value in $colors {
.bg-#{$key} {
background-color: $value;
}

.text-#{$key} {
color: $value;
}
}

@if not variable-exists('$btn-padding') {
$btn-padding: 10px;
}

.btn {
padding: $btn-padding;
}

위 코드에서는 $colors라는 맵(Map) 변수를 선언하고, @each를 사용하여 반복문을 작성하여 .bg-primary, .bg-secondary, .bg-success와 같은 클래스와 각각의 배경색을 지정하는 코드를 작성하였습니다. 또한, @if를 사용하여 $btn-padding이라는 변수가 존재하지 않을 경우에만 $btn-padding 변수를 선언하고 .btn 클래스에 padding 스타일을 지정하는 코드를 작성하였습니다.

이상으로 CSS와 SCSS의 차이점에 대해 알려드렸습니다. CSS는 스타일 시트 언어로, 문서의 디자인과 레이아웃을 작성하는 데에 사용됩니다. SCSS는 CSS 전처리기로, CSS의 문법을 따르면서도 다양한 기능을 제공하여 코드를 더욱 간결하고 효율적으로 작성할 수 있도록 도와줍니다. SCSS에서는 변수, 연산자, 함수, 믹스인, 중첩 규칙, 제어문 등 다양한 기능을 사용할 수 있습니다.

 

https://tloghost.com 

홈페이지 제작과 프로그램 개발의 전문가, 티로그에서 시작하세요

 

반면 SCSS는 CSS의 문법을 따르면서도 변수, 연산자, 함수, 믹스인 등과 같은 다양한 기능을 제공합니다. SCSS에서는 변수를 사용하여 값에 이름을 부여하고, 이를 재사용할 수 있습니다. 또한, 연산자를 사용하여 값의 계산을 할 수 있습니다. 예를 들어, 다음은 SCSS의 예시 코드입니다.