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