.scss寫法及如何轉化為.css

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

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

官網：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;
}