SASS基础

作者: 多叉树；转载须注明出处

介绍

SASS 是 css的一种扩张语言，即兼容css，同时扩展了css的语法， 在使用过程中更利于理解和维护

下面我们介绍一下SASS的基本使用方法

安装插件（Live Sass Compiler）

Live Sass Compiler 是一款即时编译的插件，可以把sass文件实时转成css文件，同时也能检查我们代码当中的存在的错误

安装步骤

1. VsCode插件市场下载

1. 打卡工程路径，开启Watch 功能

基本使用

当我们安装并开启上述插件后，编写一个文件，就可以实时将 scss文件转成css文件

举例

编一个一个后缀名为scss的文件 demo.scss

.header{
    font-size: 12px;
    span {
        color: red;
        // &号代表上一层 span
        &:hover {
            color: gray;
        }
    }
}

当我们保存后， 会看到插件会将scss文件转译成css文件 demo.css

.header {
  font-size: 12px;
}
.header span {
  color: red;
}
.header span:hover {
  color: gray;
}/*# sourceMappingURL=demo.css.map */

scss 和 sass 的区别

我们平时会看到两种后缀名scss和sass的文件，两种格式的文件主要是书写方式的不同，sass不能有大括号和分号等，主要靠缩进来代表层级关系.

比如上面的例子中，我们用sass编写，展示如下

.header
    font-size: 12px
    span
        color: red
        // &号代表上一层 span
        &:hover 
            color: gray

嵌套

其实我们上面展示的scss文件当中的都是嵌套语法，嵌套语法的优势有两个

1. 减少重复编写选择器
2. 层级关系有利于看出父子结构

// 非嵌套方式
div span {
    color: red;
}

// 非嵌套方式 div 、 span 出现了两次
div span a {
    color: blue;
}

// 嵌套方式有利于减少标签的数量
div {
    span {
        color: red;
        a {
            color: blue;
        }
    }
}

变量

看一个例子

var.scss文件

$small-font: 14px + 2px;
$text-color: #555;

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

.subtitle {
    color: darken($text-color, 20%);
    font-size: $small-font;
}

.text {
    color: $text-color;
    font-size: $small-font;
}

编译后的css文件

var.css

.title {
  color: #888888;
}

.subtitle {
  color: #222222;
  font-size: 16px;
}

.text {
  color: #555;
  font-size: 16px;
}/*# sourceMappingURL=var.css.map */

在scss中，我们定义了两个变量， 在编成var.css后， 原来的变量被真实的数值代替， 并且用Sass语法还支持变量的符号运算。

公共样式抽取

在项目开发过程中， 会有一些重复的、通用的样式、颜色、字体。

这些相同的样式会被不同的地方出现，我们不希望看到重复的样式在多个地方定义多次。

因此，我们抽离出一个通用的样式文件，然后需要用的地方去引用这些变量

举例

本示例中，我们存放公共变量的地方叫 _common.scss

$color: red;
$font-size: 12px;

common.scss 只存一些公共变量，所以我不希望它被单独编译成对应的后缀名为css的文件，所以我们 下划线 ‘_’开头， 这样Sass规范就不会此文件单独编译成css文件

我们在 demoref.scss 使用 @import来引用

demoref.scss

@import 'common.scss'; // 此处可以不写 _ 

.header {
    color: $color;
}

混入

开发中经常遇到重复代码块， 这个时候我们就可以使用 (Mixin)来解决这个问题

举例： 下面的代码是用来解决字体超出就省略不显示的， 显然两个样式块中都有相同的代码。

mian.scss

.text {
    width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.content-text {
    width: 1000px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

我们用minx改造它

_mixin.scss

在_mixin.scss 文件中定义 一个混入的方法，并且这个方法还可以接收传参

@mixin single-line-ell($width) {
    width: $width ;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

main.scss

修改main.scss文件，使用 @include 引用这个样式

@import 'mixin.scss';

.text {
    @include single-line-ell(600px)
}

.content-text {
    @include single-line-ell(1000px)
}

变量 和 混入 都是重复问题的，区别在于 变量可以替换重复的单个值， 而混入可以替换掉重复的样式块

参考资料

https://sass-lang.com/documentation/ (opens new window)

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass (opens new window)

https://www.sass.hk/skill/sass154.html (opens new window)

扫码关注（有广告，介意请勿关注）