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;
  }
}

CSS

相关