복잡한 CSS 코딩을 프로그램화 하여 누구나 쉽고 빠르게 작업 할 수 있습니다.
웹표준 코딩 및 반응형웹 개발에 있어서 CSS코딩의 비중은 점점 고도화되어가고 있습니다. 애니빌드는 CSS 코딩 시간을 획기적으로 줄이고, 빠른 유지보수를 위해 SCSS를 도입하였습니다.
서비스 특징
-
1
SCSS에서는 반복되는 네임을 하나로 압축하여 코딩 할 수 있습니다.
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } } .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } }
>#navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; } .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
-
2
SCSS에서는 변수를 선언 할 수 있기때문에, CSS를 좀 더 프로그램화 하여 관리 할 수 있으며, 고객의 요구사항에 좀 더 손쉽게 유지 보수 할 수 있습니다.
$main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } }
>#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }
-
3
SCSS에서는 연산이 가능 합니다. 고객의 홈페이지 가로 사이즈가 1000px에서 800px로 줄인다던가 전체적인 색감을 10%정도 밝게 수정해야하는 상황이라면 전면적인 수정인 불가피한 상황이 발생됩니다. 하지만 SCSS 사용시 매우 획기적으로 관리 할 수 있습니다.
#navbar { $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } }
>#navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; }
-
4
SCSS에서는 함수 선언이 가능하며, 반복되는 CSS 및 복잡한 연산등을 쉽게 해결 할 수 있습니다.
@mixin rounded($vert, $horz, $radius: 10px) { border-#-#-radius: $radius; -moz-border-radius-##: $radius; -webkit-border-#-#-radius: $radius; } #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); } #sidebar { @include rounded(top, left, 8px); }
>#navbar li { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } #footer { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; } #sidebar { border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }