서비스 특징

1. 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. 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. 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. 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; }