試用sass

使用sass需要安裝ruby,再安裝sass. 安裝命令：gem install sass

sass文件名後綴是.scss.

編譯有四個選項，nested 默認選項，compact 簡潔格式的，compressed壓縮的，expanded沒有縮進的。

cmd切換到工作路徑監聽我的文件夾：sass --watch ./sass:./css --style compressed  

或者監聽文件：sass --watch style.scss:style.css

test.scss

@charset "UTF-8";  
$side : left;  
.rounded {border-#{$side}-radius: 5px;}   
$slide : right;  
$var :1200px;  
$mycolor: #cd1217; /* 定義變量 */  
.application { border-#{$slide}-radius: 5px;} /* 嵌套在字符串中 */  
.class1{border:1px solid #e2e2e2;}  
   
/* 嵌套字符還可以出現在classname上 */  
.slide_#{$side}{  
    color: red;  
}  
.class2{  
    @extend .class1;   /* 繼承class1 編譯出來是class1 .class2 */  
    font-size:120%;  
    width:500px+1000px; /* 使用算式 */  
 }  
  
@mixin left{  /* 定義@mixin 可重複使用的代碼塊 */  
    float: left;  
    margin-left:10px;  
}  
.aliang{  
    @include left; /* 使用宏 */  
    width: $var;  
    border-left:2px dotted #ee0000;  
}  
/* @mixin 強大之處可以傳遞參數和缺省值 */  
  
@mixin right($value : 10px){  
    float: right;  
    margin-right: $value;  
}  
.flex-item{  
    @include right(50px); /* 傳遞參數 */  
    padding:10px;  
}  
.flex-item1{  
    @include right; /* 使用缺省值 */   
}

/* 使用繼承 @extend  讓一個選擇器繼承另一個選擇器中定義的樣式 包絡它的子選擇器 */
.alert{
  padding: 15px;
}
.alert a{
    line-height: 1.6em;
    font-weight: bold;
}
.alert>span{
    padding-right: 10px;
}
/*alert-info 繼承 alert */
.alert-info{
  @extend .alert; /* 會複製.alert和其子選擇器的所有屬性 和.alert組成羣組選擇器 */
  background-color: #e2e2e2;  /* 會生成獨有的 */
}
  
/* 使用內置的改變顏色的函數 */  
.mycolor{  
    background-color: lighten(#cd1217, 10%);  
    background-color: darken(#cd1217, 10%);  
    background-color: grayscale(#cd1217);  
    background-color: complement(#cd1217);  
}  
.oldColor{  
    background-color: #cd1217;  
}  
  
/* 可以循環 */  
@for $i from 1 to 5{  
    .border-#{$i}{  
        border: #{$i}px solid blue;  
    }  
}  
/* 可以使用while循環 */  
$i:3;  
@while $i > 0{  
    .item-#{$i}{width:2em * $i;}  
    $i: $i - 1;  
}  
/* 可以使用each */  
@each $member in a,b,c,d{  
    .item-#{$member}{  
        @include right(8px);  
        background: $mycolor url(../img/icon-#{$member}.png) left top no-repeat;  
    }  
}  
  
/* 可以自定義函數 */  
@function HoverColor($hcolor){  
    @return lighten($hcolor, 10%);  
}  
.invsdcli a{  
    &:hover{background-color: HoverColor($mycolor);}  
}  
  
/* 可以用if來判斷 */  
.content{  
    @if 1+1 != 3 {  
        border: 1px solid #e2e2e2;  
    }  
    @else{  
        border: 1px solid transparent;  
    }  
} 

編譯後的test.css

@charset "UTF-8";
.rounded {
  border-left-radius: 5px; }

/* 定義變量 */
.application {
  border-right-radius: 5px; }

/* 嵌套在字符串中 */
.class1, .class2 {
  border: 1px solid #e2e2e2; }

/* 嵌套字符還可以出現在classname上 */
.slide_left {
  color: red; }

.class2 {
  /* 繼承class1 編譯出來是class1 .class2 */
  font-size: 120%;
  width: 1500px;
  /* 使用算式 */ }

.aliang {
  /* 定義@mixin 可重複使用的代碼塊 */
  float: left;
  margin-left: 10px;
  /* 使用宏 */
  width: 1200px;
  border-left: 2px dotted #ee0000; }

/* @mixin 強大之處可以傳遞參數和缺省值 */
.flex-item {
  float: right;
  margin-right: 50px;
  /* 傳遞參數 */
  padding: 10px; }

.flex-item1 {
  float: right;
  margin-right: 10px;
  /* 使用缺省值 */ }

/* 使用繼承 @extend  讓一個選擇器繼承另一個選擇器中定義的樣式 包絡它的子選擇器 */
.alert, .alert-info {
  padding: 15px; }

.alert a, .alert-info a {
  line-height: 1.6em;
  font-weight: bold; }

.alert > span, .alert-info > span {
  padding-right: 10px; }

/*alert-info 繼承 alert */
.alert-info {
  /* 會複製.alert和其子選擇器的所有屬性 和.alert組成羣組選擇器 */
  background-color: #e2e2e2;
  /* 會生成獨有的 */ }

/* 使用內置的改變顏色的函數 */
.mycolor {
  background-color: #ec262b;
  background-color: #9e0e12;
  background-color: #707070;
  background-color: #12cdc8; }

.oldColor {
  background-color: #cd1217; }

/* 可以循環 */
.border-1 {
  border: 1px solid blue; }

.border-2 {
  border: 2px solid blue; }

.border-3 {
  border: 3px solid blue; }

.border-4 {
  border: 4px solid blue; }

/* 可以使用while循環 */
.item-3 {
  width: 6em; }

.item-2 {
  width: 4em; }

.item-1 {
  width: 2em; }

/* 可以使用each */
.item-a {
  float: right;
  margin-right: 8px;
  background: #cd1217 url(../img/icon-a.png) left top no-repeat; }

.item-b {
  float: right;
  margin-right: 8px;
  background: #cd1217 url(../img/icon-b.png) left top no-repeat; }

.item-c {
  float: right;
  margin-right: 8px;
  background: #cd1217 url(../img/icon-c.png) left top no-repeat; }

.item-d {
  float: right;
  margin-right: 8px;
  background: #cd1217 url(../img/icon-d.png) left top no-repeat; }

/* 可以自定義函數 */
.invsdcli a:hover {
  background-color: #ec262b; }

/* 可以用if來判斷 */
.content {
  border: 1px solid #e2e2e2; }

/*# sourceMappingURL=test.css.map */