サービスの特徴

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