Sublime SASS语法高亮插件下载地址:https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2
koala_2.0.4_setup.exe 下载地址:http://pan.baidu.com/s/1o6ktn5o
测试代码(参考阮一峰:http://www.ruanyifeng.com/blog/2012/06/sass.html)
scss.scss
/* koala 编译scss不支持中文解决方案: your disk:Koala ubygemsgemssass-3.4.9libsass 修改 engine.rb 文件 在require 最下面 加入以下代码 即可解决 Encoding.default_external = Encoding.find('utf-8') */ /* 导入外部scss文件 */ @import "base.scss"; /* 1.定义普通变量 */ /* 1.1 变量用作css的值*/ $blue : #1875e7; div { color : $blue; } /* 1.2 变量用在css的属性名中 */ $side: left; div { border-#{$side}: 1px solid #ccc; } /* 2.嵌套 */ /* 2.1 普通嵌套 */ #main { font-size: 14px; #nav { font-size: 20px; color:red; } .sidebar { width: 200px; border: 20px solid #ccc; border-radius: 50%; } } /* 属性嵌套 */ #warpper{ border: { color: $blue; size: 1px; #{$side}: 10px; } } /* 继承 */ #father { font-size: 20px; } #child { @extend #father; color:red; } /* 重用的代码块 */ @mixin test($color:red){ color:$color; } @mixin borderRadius($radius:5px){ border-radius: $radius; -moz-border-radius:$radius; -webkit-border-radius: $radius; } #footer { @include test(blue); @include borderRadius(50%); } /* 高级 */ $color: red; p{ @if $color == red { color: blue; } } /* for 循环 */ @for $i from 1 to 10{ .line-#{$i}{ border:#{$i}px #ccc solid; } } /* while循环 */ $i: 4; @while $i > 0{ .line#{$i} {font-size: 4px * $i;} $i: $i - 1; /* 注意变量前后的加空格 */ } /* each */ @each $item in top,left,bottom,right { .#{$item} {background: url(image/#{$item}.png);} }
base.scss
$globalfont-size:12px; body{ font-size: $globalfont-size; }
输出结果:
@charset "UTF-8"; /* koala 编译scss不支持中文解决方案: your disk:Koala ubygemsgemssass-3.4.9libsass 修改 engine.rb 文件 在require 最下面 加入以下代码 即可解决 Encoding.default_external = Encoding.find('utf-8') */ /* 导入外部scss文件 */ body { font-size: 12px; } /* 1.定义普通变量 */ /* 1.1 变量用作css的值*/ div { color: #1875e7; } /* 1.2 变量用在css的属性名中 */ div { border-left: 1px solid #ccc; } /* 2.嵌套 */ /* 2.1 普通嵌套 */ #main { font-size: 14px; } #main #nav { font-size: 20px; color: red; } #main .sidebar { width: 200px; border: 20px solid #ccc; border-radius: 50%; } /* 属性嵌套 */ #warpper { border-color: #1875e7; border-size: 1px; border-left: 10px; } /* 继承 */ #father, #child { font-size: 20px; } #child { color: red; } /* 重用的代码块 */ #footer { color: blue; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } /* 高级 */ p { color: blue; } /* for 循环 */ .line-1 { border: 1px #ccc solid; } .line-2 { border: 2px #ccc solid; } .line-3 { border: 3px #ccc solid; } .line-4 { border: 4px #ccc solid; } .line-5 { border: 5px #ccc solid; } .line-6 { border: 6px #ccc solid; } .line-7 { border: 7px #ccc solid; } .line-8 { border: 8px #ccc solid; } .line-9 { border: 9px #ccc solid; } /* while循环 */ .line4 { font-size: 16px; } /* 注意变量前后的加空格 */ .line3 { font-size: 12px; } /* 注意变量前后的加空格 */ .line2 { font-size: 8px; } /* 注意变量前后的加空格 */ .line1 { font-size: 4px; } /* 注意变量前后的加空格 */ /* each */ .top { background: url(image/top.png); } .left { background: url(image/left.png); } .bottom { background: url(image/bottom.png); } .right { background: url(image/right.png); } /*# sourceMappingURL=scss.css.map */