SCSS(Sass) 소개와 기능

 

SCSS(Sass) 소개

SCSS는 "Sassy CSS"의 줄임말로, CSS 전처리기 중 하나입니다. 이것은 기본 CSS의 모든 기능을 포함하면서도 중복을 줄이고, 변수, 중첩, 믹스인, 함수 등과 같은 힘을 제공함으로써 CSS를 더 강력하고 유지 관리하기 쉽게 만들어줍니다.

1. SCSS와 Sass의 차이

먼저, SCSS와 Sass는 동일한 CSS 전처리기인데도 불구하고 서로 다른 문법을 가지고 있습니다.

 

• Sass: 들여쓰기와 개행을 기반으로 하는 문법을 사용합니다.
• SCSS: CSS와 비슷한 문법을 사용하면서 중괄호 { }와 세미콜론 ;을 포함합니다.

이 글에서는 주로 SCSS에 대해 다룰 예정입니다.

2. SCSS의 기능

2.1. 변수

CSS의 반복되는 값들, 예를 들면 특정 색상이나 폰트 크기를 변수로 선언하여 재사용이 가능합니다.

 

$main-color: #3498db;

body {
    background-color: $main-color;
}

 

 

2.2. 중첩

SCSS는 선택자의 중첩을 지원하여 CSS를 더 간결하게 작성할 수 있습니다.

 

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li { display: inline-block; }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

 

 

2.3. 믹스인

반복되는 CSS 선언을 재사용하기 위해 믹스인을 사용할 수 있습니다.

 

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

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

 

 

2.4. 함수

SCSS에는 많은 내장 함수가 있으며 사용자 정의 함수를 생성할 수도 있습니다. 이 함수들은 색상 조작, 문자열 조작 등에 유용합니다.

 

 

3. SCSS 사용하기

SCSS를 사용하려면 먼저 sass를 설치해야 합니다. Node.js를 사용하면 npm install -g sass 명령으로 간편하게 설치할 수 있습니다.

 

4. 결론

SCSS는 CSS의 한계를 극복하고 웹 디자인과 개발 프로세스를 간소화하는데 큰 도움을 줍니다. 변수, 중첩, 믹스인, 함수와 같은 기능은 코드의 중복을 줄이고 유지 보수를 쉽게 만들어줍니다.

웹 디자이너나 개발자라면 SCSS를 통해 생산성을 향상시키고, 더욱 전문적인 CSS 코드를 작성하는 경험을 할 수 있습니다.

 

 

 

http://tlog.kr/

수출바우처 티로그 홈페이지제작

https://www.tloghost.com 

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