在线scss转换为less

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

scss讲解地址:

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

 less，scss区别:

http://www.kuqin.com/language/20120325/319416.html

安装环节

 

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;
}/*编译结果*/
@charset "GBK";
.text {
 line-height: 24px;
 margin: 12px;
 color: #333333; }.bg {
 background: #333333; }.container{
 color:#ccc;
 h1{ font-size:18px;}
 ul{
 position:relative;
 margin-top:15px;
 li{
 background:#ddd;
 }
 }
}/*编译结果*/
.container {
 color: #ccc; }
 .container h1 {
 font-size: 18px; }
 .container ul {
 position: relative;
 margin-top: 15px; }
 .container ul li {
 background: #ddd; } 
@mixin float{
 .clear{
 clear:both;
 }
 .left{
 clear:left;
 }
 .right{
 clear:right;
 }
}div{
 @include float
}

 

@mixin rounded-corners ($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#header {
  @include rounded-corners;
}
#footer {
  @include rounded-corners(11px);
}

/*编译结果*/
div .clear {
clear: both; }
div .left {
clear: left; }
div .right {
clear: right; }

#header{
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}
#footer{
  border-radius:11px;
  -webkit-border-radius:11px;
  -moz-border-radius:11px;
}

/*继承*/
.relative{
 display:block;
 position:relative;
}
.title{
 @extend .relative;
 font-size:18px;
 color:#fff;
}/*编译结果*/
.relative, .title {
 display: block;
 position: relative; }.title {
 font-size: 18px;
 color: #fff; }/*混合运算*/
$selector_name:'clear';
@mixin clearfix{
 #{$selector_name}{
 color:red;
 }
}body{
 @include clearfix;
}/*编译结果*/
body clear {
 color: red; }/* 加减乘运算 */
$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%);
}/*编译结果*/
#header {
 color: #333333;
 border-left: 1px;
 border-right: 2px; }#footer {
 color: #114411;
 border-color: #7d2717; }/* 作用域 */
$color_11: #00c; /* 蓝色 */
#header_11 {
 $color_11: #c00; /* red */
 border: 1px solid $color_11; /* 红色边框 */
}
#footer_11 {
 border: 1px solid $color_11; /* 蓝色边框 */
}/*编译结果*/
/* 蓝色 */
#header_11 {
 /* red */
 border: 1px solid #cc0000;
 /* 红色边框 */ } 
#footer_11 {
 border: 1px solid #cc0000;
 /* 蓝色边框 */ } 
 
@for $i from 1 to 10 {
 .border-#{$i} {
 border: #{$i}px solid blue;
 }
}/*编译后的结果*/
.border-1 {
 border: 1px solid blue;
}.border-2 {
 border: 2px solid blue;
}.border-3 {
 border: 3px solid blue;
}.border-4 {
 border: 4px solid blue;
}.border-5 {
 border: 5px solid blue;
}.border-6 {
 border: 6px solid blue;
}.border-7 {
 border: 7px solid blue;
}.border-8 {
 border: 8px solid blue;
}.border-9 {
 border: 9px solid blue;
}