Sass: 초능력을 가진 CSS

이 자료는 원래 기사The Power of CSS Processors in Web Applications Development의 일부로 Codica 블로그에 게시되었습니다.

CSS 전처리기는 오래 전부터 필수 프런트 엔드 개발 도구가 되었습니다. 고급 기능이 탑재되어 있어 프로그래머가 읽기 쉬운 코드를 작성하는 데 도움이 됩니다. 가장 일반적인 전처리기는 Sass, Less 및 Stylus입니다.

Codica에서는 이러한 도구가 코드를 단순화하고 생산성을 높일 수 있다고 믿습니다. 우리는 수행의 예를 바탕으로 그들의 힘을 보여주고 싶습니다.

사스는 무엇입니까?

Sass 정의부터 시작하겠습니다. 이 CSS 확장의 official website에서 찾을 수 있습니다.

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Sass Mixins, 맵 및 루프 사용 방법

이제 루프와 맵 기능을 살펴보겠습니다. 이러한 놀랍고 희귀한 도구를 사용하여 CSS의 모든 기능을 수용할 수 있습니다.

우리는 SCSS를 CSS 구문의 확장으로 알고 있습니다. Codica에서는 웹 프로젝트 개발에 자주 사용합니다. 네이티브 CSS에 더 가깝고 브라우저에서 코드를 복사할 때 추가 작업이 필요하지 않습니다.

아래 코드 스니펫에서 웹 글꼴이 CSS에서 어떻게 선언되는지 확인할 수 있습니다. 이 예제는 스타일 시트의 코드 중복을 명확하게 보여줍니다.

@font-face {
 font-family: 'OpenSans-Light';
 src: url('opensans-light.eot');
 src: url('opensans-light.eot?#iefix') format('embedded-opentype'),
      url('opensans-light.woff2') format('woff2'),
      url('opensans-light.woff') format('woff'),
      url('opensans-light.ttf') format('truetype'),
    url('opensans-light.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Regular';
 src: url('opensans-regular.eot');
 src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
      url('opensans-regular.woff2') format('woff2'),
      url('opensans-regular.woff') format('woff'),
      url('opensans-regular.ttf') format('truetype'),
    url('opensans-regular.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Bold';
 src: url('opensans-bold.eot');
 src: url('opensans-bold.eot?#iefix') format('embedded-opentype'),
      url('opensans-bold.woff2') format('woff2'),
      url('opensans-bold.woff') format('woff'),
      url('opensans-bold.ttf') format('truetype'),
    url('opensans-bold.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

이 코드 스니펫을 보면 중복 코드를 보고 있는 것처럼 느껴질 수 있습니다.



매트릭스의 팬들은 네오가 검은 고양이가 지나가고 다른 고양이가 같은 방식으로 행동하는 것을 본 장면을 기억할 것입니다. 이 순간은 Hotel Ambush 동안 데자뷰의 명확한 예였습니다.

다행스럽게도 맵 함수와 믹스인이라는 Sass 구성 요소의 도움으로 중복 코드 문제를 쉽게 해결할 수 있습니다.

언급된 도구가 코드를 단순화하는 데 어떻게 도움이 되는지 알아보겠습니다.

처음에는 맵 글꼴로 글꼴을 설명하겠습니다. 이 프로세스는 다음과 같습니다.

/* Fonts map format
 $fonts: (
   $file-name: '$font-name'
 )
*/

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-bold: 'OpenSans-Bold',
);

다음으로 map-get 함수를 사용하여 변수 글꼴을 선언합니다.

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_bold: map-get($fonts, opensans-bold);

@mixin 기능을 사용하면 코드 반복을 방지할 수 있습니다.

@mixin font-face($font-name, $file-name) {
 /* '/assets/fonts/' - relative path to the fonts folder */
 $filepath: '../assets/fonts/' + $file-name;

 @font-face {
   font-family: #{$font-name};
   src: url($filepath+'.eot');
   src: url($filepath+'.eot?#iefix') format('embedded-opentype'),
        url($filepath+'.woff2') format('woff2'),
        url($filepath+'.woff') format('woff'),
        url($filepath+'.ttf') format('truetype'),
      url($filepath+'.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }
}

위에서 언급한 반복자 @each 및 @mixin 다음에는 각 글꼴에 대해 font-face를 선언하는 데 도움이 됩니다.

/* Font face declaring */
@each $file-name, $font-name in $fonts {
 @include font-face($font-name, $file-name);
}

이제 새 글꼴을 추가하거나 삭제하려면 이전에 예제에서 변수$filepath ('../assets/fonts/'에 선언한 경로에 있는 글꼴 파일을 업로드하거나 삭제해야 합니다. 맵 $fonts에 선언된 파일 이름 지정을 따르고 변수를 선언하거나 삭제하는 것을 잊지 마십시오.

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-semibold: 'OpenSans-Semibold',
 opensans-bold: 'OpenSans-Bold',
);

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_semibold: map-get($fonts, opensans-semibold);
$ff_bold: map-get($fonts, opensans-bold);

결론

이 게시물에서는 CSS를 프로젝트 스타일화의 핵심 부분으로 만드는 기능과 도구에 중점을 두었습니다.

Sass를 포함한 CSS 전처리기는 프런트 엔드 개발자가 깔끔하고 효율적이며 더 중요하고 쉽게 유지 관리할 수 있는 코드를 작성할 수 있도록 합니다. 대부분의 복잡한 웹 프로젝트의 경우 손쉬운 유지 관리가 가장 기본적인 요구 사항입니다.

계속 지켜봐 주시기 바랍니다

또는 전체 기사 읽기: The Power of CSS Processors in Web Applications Development.