Posted on

scssphp 로 섹시한 css를 만들자

Sass를 써야하는 이유

Sass(Syntactically Awesome StyleSheets)는 문법적으로 환상적인 스타일쉬트이다. Sass 로 만들어진 css 는 가볍고 상괘해보인다. 홈페이지를 멋지게 포장해주는 css에 프로그램밍 개념을 적용하여 css를 보다 효율적 만들어내서 일관성있고 군더더기 없는 css를 만들어낸다. 간결하고 알아보기 쉽기 때문에 재활용 및 유지보수를 효율적으로 할 수 있다.

반복적으로 사용되는 코드에 변수를 사용하거나 html구조에 맞게 부모요소와 자식요소간에 계층을 잘 드러나게 css코드를 만들어내기 때문에 코드가 읽기쉽고 직관적으로 이해하기 쉽다.

사용자에게 보여지는 부분을 담당하는 프론트엔드 개발자에게는 반드시 읶혀야하는 기술이다.

scss 컴퍼일 하면 css 가 만들어진다

확장자가 file-name.scss 파일을 컴파일해서 example-style.css 파일이 만들어진다. css 파일 처럼 부라우저에서 바로 읽어올 수는 없고 컴파일 해서 css를 만들어낸다.

 

php 에서 사용환경 만들기

scss파일을 php환경에서 수정하기 위해서는 scssphp라는 php로 만들어진 프로그램으로 컴파일해야한다.

scssphp 개발자 사이트인 https://leafo.github.io/scssphp/ 에 가서 설치파일을 다운로드 한다.

압축을 풀고 사용하려는 php서버에 업로드한다. 주의할 점은 php 버전이 5.4이상에서 작동한다.

sample php파일을 하나 만든다. 예: style.php

아래 코드를 붙여 넣는다.

<?php
require_once "scssphp/scss.inc.php";
use Leafo\ScssPhp\Compiler;
$scss = new Compiler();
echo $scss->compile('
  $color: #abc;
  div { color: lighten($color, 20%); }
');

style.php 파일을 업로드하고 부라우저에서 확인한다.

sass-1

위와 같이 css파일이 만들어지면 성공이다.

삽질기…

구글 검색에서는 http://leafo.net/scssphp/ 사이트가 먼저 나온다. 개발자가 이전 사이트를 방치해서 그걸 보고 하다가 삽질 마~니 했다. ㅠㅠ~

<?php
require "scssphp/scss.inc.php";
$scss = new scssc();

echo $scss->compile('
  $color: #abc;
  div { color: lighten($color, 20%); }
');

위 코드처럼 이 사이트에 있는 코드를 사용하면 500에러가 나온다.

sass-2

위 화면은 카페24 설치 계정에서의 에러메세지다.

아! 그리고 서버 php가 5.3이어서 5.5로 업그레이드 했다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.