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源文件中，编译后会被省略