服务特色

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可以计算出来。 客户的网站1000像素由800像素降低在整体明亮的颜色必须由10％修改将导致全面的修改必然水平尺寸deonga情况。 但是你可以在一个非常戏剧性的使用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; }