Sublime2 + SASS + Koala 测试

最新推荐文章于 2022-07-04 21:59:19 发布

weixin_34327761

最新推荐文章于 2022-07-04 21:59:19 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/byxxw/p/4903605.html

本文详细介绍了如何使用SublimeSASS语法高亮插件及Koala编译scss文件，并提供了中文支持的解决方案，通过实例展示了SCSS的基本语法和特性，包括变量、嵌套、继承、重用代码块、高级特性等，以及如何解决Koala编译scss不支持中文的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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\rubygems\gems\sass-3.4.9\lib\sass
修改 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\rubygems\gems\sass-3.4.9\lib\sass
修改 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 */