易于书写阅读的CSS开发工具--SASS_html/css_WEB-ITnose

gem -vruby -v

gem install sass

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l

gem install sass

gem update sass

sass init.sass

sass init.scss init.css

sass --style compressed init.sass init.css

nested：嵌套并且缩进，默认值expanded：嵌套但不缩进compact：简洁格式compressed：压缩

sass --watch init.scss:init.css --style compressed

@charset "utf-8"

$cl: #333body	color: $cl

$sz: 14px$ln: $sz * 1.5

.index	border: 1px solid #ccc		top: 3px solid #999		radius: 5px	a		color: #666		&:hover,&.active			#333

/* 首页 *///导航条

html	height: 100%.index	@extend html

@mixin txt ()	overflow: hidden	white-space: nowrap	text-overflow: ellipsis@mixin rads ($v: 2px)	-webkit-border-radius: $v	-moz-border-radius: $v	border-radius: $v.index	width: 200px	@include txt	@include rads(50%)

@import '../base/set'

$cl: #333.index	@if lightness($cl) > 30%		color: #666	@else		color: #999

@for $i from 1 to 10	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$i: 0@while $i < 10	$i: $i + 1	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)@each $i in $arr	.module_#{$i}		background: url(../image/module_#{i}.png) 50% no-repeat

@function large ($v)	@return $v * 1.5.index	font-size: large(14px)