SASS的使用

1.工具准备

Visual Studio Code 以及插件Live Sass Compiler

安装Live Sass Compiler插件： 用于转换scss/sass文件为css文件

 

2.基本用法

1】新建demo.scss文件，输写如下内容

.header {
    .top {
       color: red; 
    }
}　　

插件会自动将其转换成css文件

 

 

转换的内容：

 

2】sass文件写法（没有花括号，没有分号）

新建demo1.sass文件，输写如下内容

.header 
    .top 
       color: red

 

转换的内容：

 

3.变量用法

变量以$开头，变量需要写在引用地方的上面

1】基本用法

$width: 60px;
$font-size: 14px;
.header {
    .top {
       color: red;
       width: $width;
    }
}
.text {
    font-size: $font-size;
}

 

2】支持运算

$font-size: 14px + 4px;
.text {
    font-size: $font-size;
}

 

转换后的css

.text {
  font-size: 18px;
}

 

3】使用lighten 或者darken

$color: #555;

.light-color {
    color: lighten($color, 20%);
}

.deep-color {
    color: darken($color, 20%);
}

 

转换后的css

.light-color {
  color: #888888;
}

.deep-color {
  color: #222222;
}

 

4.外部引入使用

1】新增_viriables.scss文件（设置_开头表示不需要转义成css）

 

2】将变量拆出到viriables里

 

3】使用@import引入 

@import 'viriables';
.header {
    .top {
       color: red;
       width: $width;
    }
}

 

5.mixin混入使用

1】基本使用

1）新建_mixins.scss文件

关键字：@mixin

@mixin singleline--ellipsis {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}

 

2）使用

引入mixins文件并且需要使用@include

@import 'mixins';

.text {
    @include singleline--ellipsis;
}

 

转换后的css

.text {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

 

2】支持传入变量

@mixin singleline--ellipsis($width) {
    width: $width;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}

 

使用

.text {
    @include singleline--ellipsis(600px);
}

 

转换后的css

.text {
  width: 600px;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

 

6.mixin和媒体查询的配合使用

1】基本用法

@mixin ipad {
    @media screen and (min-width: 768px){
        @content;
    }
}

 

.header {
    @include ipad {
        width: 500px;
    }
}

@content用于替换width：500px

 

转换后的css

@media screen and (min-width: 768px) {
  .header {
    width: 500px;
  }
}

 

2】支持传值

@mixin ipad($height) {
    @media screen and (min-width: 768px){
        height: $height;
        @content;
    }
}

 

.header {
    @include ipad(100px) {
        width: 500px;
    }
}

 

转换后的css

@media screen and (min-width: 768px) {
  .header {
    height: 100px;
    width: 500px;
  }
}