SASS的使用

1.工具准备

Visual Studio Code 以及插件Live Sass Compiler

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

 

2.基本用法

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

?

1 2 3 4 5

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

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

 

 

转换的内容：

 

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

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

?

1 2 3

.header     .top        color: red

 

转换的内容：

 

3.变量用法

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

1】基本用法

?

1 2 3 4 5 6 7 8 9 10 11

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

 

2】支持运算

?

1 2 3 4

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

 

转换后的css

?

1 2 3

.text {   font-size: 18px; }

 

3】使用lighten 或者darken

?

1 2 3 4 5 6 7 8 9

$color: #555;   .light-color {     color: lighten($color, 20%); }   .deep-color {     color: darken($color, 20%); }

 

转换后的css

?

1 2 3 4 5 6 7

.light-color {   color: #888888; }   .deep-color {   color: #222222; }

 

4.外部引入使用

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

 

2】将变量拆出到viriables里

 

3】使用@import引入 

?

1 2 3 4 5 6 7

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

 

5.mixin混入使用

1】基本使用

1）新建_mixins.scss文件

关键字：@mixin

?

1 2 3 4 5

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

 

2）使用

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

?

1 2 3 4 5

@import 'mixins';   .text {     @include singleline--ellipsis; }

 

转换后的css

?

1 2 3 4 5

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

 

2】支持传入变量

?

1 2 3 4 5 6

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

 

使用

?

1 2 3

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

 

转换后的css

?

1 2 3 4 5 6

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

 

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

1】基本用法

?

1 2 3 4 5

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

 

?

1 2 3 4 5

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

@content用于替换width：500px

 

转换后的css

?

1 2 3 4 5

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

 

2】支持传值

?

1 2 3 4 5 6

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

 

?

1 2 3 4 5

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

 

转换后的css

?

1 2 3 4 5 6

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