Anybuild提供了编辑CSS SCSS的智能工具。
网页编码标准和Web开发响应CSS编码的比例正变得越来越复杂。 Anybuild推出了SCSS大幅降低,快速维护CSS编码时间。
该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; }
因为,你可以声明一个变量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; }
该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; }
该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; }