Sass基本使用

引入

在一個scss文件中引入另外一個scss文件

style.scss

@import 'variables'; //引入varoables.scss文件複製代碼

變量

//   變量的定義
$font-size: 14px;
$side: left;

//  變量的使用
a {
    font-size: $font-size;
}

// 還能夠將變量和字符串串合起來使用
.rounded {
    border-#{$side}-radius: $font-size;
}複製代碼

嵌套

.header {    
    color: red;    
    .title {        
        font-size: 11px;        
        h1 {            
            color: aqua;        
        }        
        h2 {            
            color: chocolate;        
        }    
    }
}複製代碼

該scss文件通過編譯後的css文件內容爲

.header {  
    color: red;
}
.header .title {  
    font-size: 11px;
}
.header .title h1 {  
    color: aqua;
}
.header .title h2 {  
    color: chocolate;
}複製代碼

屬性也能夠嵌套：

SCSS：

p {
    border: {
        color: red;
    }
}複製代碼

## 屬性嵌套注意在後面加上冒號

CSS：

p {
    border-color: red;
}複製代碼

混入

至關於定義一個關於css的函數

@mixin 函數變量名（參數: 缺省值）{
    具體的函數
}複製代碼

引入

@include 函數變量名（具體參數）複製代碼

實例：

@mixin transform($property) {    
    transform: $property;
}
.header {    
    color: red;    
    .title {        
        font-size: 11px;        
        @include transform(rotate(-20deg));        
        h1 {            
            color: aqua;        
        }        
        h2 {            
            color: chocolate;        
        }    
    }
}複製代碼

通過編譯後的css文件:

.header {  
    color: red;
}
.header .title {  
    font-size: 11px;  
    -webkit-transform: rotate(-20deg);          
    transform: rotate(-20deg);
}
.header .title h1 {  
    color: aqua;
}
.header .title h2 {  
    color: chocolate;
}
.content {  
    font-size: 16px;
}複製代碼

繼承

能夠利用繼承來共用相同的代碼，達到代碼複用的效果

定義父類:

%變量名  {
  須要複用的樣式
}複製代碼

繼承:

@extend %變量名;複製代碼

實例：

@mixin transform($property) {    
    transform: $property;
}
%subfont-size {    
    font-size: 14px;    
    color: #eeeeee;
}
.header {    
    color: red;    
    .title {        
        font-size: 11px;        
        @include transform(rotate(-20deg));        
        h1 {            
            color: aqua;        
        }        
        h2 {            
            color: chocolate;            
            @extend %subfont-size;        
        }    
    }
}複製代碼

編譯後的css：

.header .title h2 {  
    font-size: 14px;  
    color: #eeeeee;
}
.header {  
    color: red;
}
.header .title {  
    font-size: 11px;  
    -webkit-transform: rotate(-20deg);          
    transform: rotate(-20deg);
}
.header .title h1 {  
    color: aqua;
}
.header .title h2 {  
    color: chocolate;
}複製代碼

也能夠繼承其餘類的屬性

.class1 {
    border: 1px solid #ddd;
}

.class2 {
    @extend .class1;
    font-size: 22px;
}複製代碼

計算功能

SASS容許在代碼中使用算式:

$legth: 2;
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $legth * 10%;
}複製代碼

高級用法：

1. 條件語句
2. 循環語句
3. 自定義函數

@if條件判斷語句

p {
    @if ($flag=true) {
     border:1px solid #eee; 
    } @else {
      border: 2px solid #eee;
    }
    
}複製代碼

@for循環語句

@for $i from 1 to 10{
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}複製代碼

@while循環語句

$i: 6;
@while $i >0 {
    .item-#{$i}: { width: 10px * $i}
    $i: $i-2;
}複製代碼

@each循環語句

@each $menber in a,b,b,d {
    .#{$member) {
        background-image: url("/images/#{$member).jpg");
    }
}複製代碼

自定義函數

@function double($n){
    return $n * 2;
}

.sidebar {
    width: double(5px);
}複製代碼

註釋

標準的CSS註釋/* comment */,會保留到編譯後的文件中

單行註釋// comment，只會保留在SASS源文件中，編譯後會被省略