scss可视化工具:http://koala-app.com/index-zh.html

scss讲解地址:http://www.cnblogs.com/adine/archive/2012/12/18/2823669.html

官网：http://sass-lang.com/

安装环节

1．  安装rubyinstaller-2.0.0-p481-x64.exe一直next

2．  安装完成后开始菜单中找到ruby里的这哥，打开命令提示框

3．  使用gem install sass安装sass， gem install compass安装compass（sass大哥插件，练熟sass后再研究）

编译环节

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项：

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

sass --style compressed test.sass test.css

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

// watch a file

sass --watch input.scss:output.css

// watch a directory

sass --watch app/sass:public/stylesheets

$color_333:#333333;
$line_height24:24px;

.text{
line-height:$line_height24;
margin:$line_height24/2;
color:$color_333;
}

.bg{
background:$color_333;
}

.container{
color:#ccc;
h1{ font-size:18px;}
ul{
position:relative;
margin-top:15px;
li{
background:#ddd;
}
}
}

@mixin float{
.clear{
clear:both;
}
.left{
clear:left;
}
.right{
clear:right;
}
}

div{
@include float
}
/*继承*/
.relative{
display:block;
position:relative;
}
.title{
@extend .relative;
font-size:18px;
color:#fff;
}

$selector_name:‘clear‘;
/*混合运算*/
@mixin clearfix{
#{$selector_name}{
color:red;
}
}

body{
@include clearfix;
}
/* 加减乘运算 */
$the-border:1px;
$base-color:#111;
$red:#842210;

#header{
color:$base-color*3;
border-left:$the-border;
border-right:$the-border*2;
}
#footer{
color:$base-color+#003300;
border-color:desaturate($red,10%);
}
/* 作用域 */
$color_11: #00c; /* 蓝色 */
#header_11 {
$color_11: #c00; /* red */
border: 1px solid $color_11; /* 红色边框 */
}
#footer_11 {
border: 1px solid $color_11; /* 蓝色边框 */
}

.scss写法及如何转化为.css,古老的榕树,5-wow.com