SASS

介绍

SASS是一款强化的CSS的辅助工具,它在CSS语法的基础上增加了变量variables,嵌套(nested rules),混合(mixins),导入(import),以及函数(functions)等功能,这些额外的功能帮助CSS开发者在开发过程中更加高效和简洁地书写CSS代码

参考文档

• SASS官网
• SASS中文文档
• SASS教程

安装

• 你可以使用如下两种方式来体验SASS

• 通过sass的npm包自主编译

• 首先你需要按照下面命令创建一个新的项目,然后使用npm命令初始化生成package.json文件,如下:

mkdir sass-learn
npm init -y

执行完以上命令后,代码结构如下所示:

-- sass-learn
|    |-- package.json

接着,通过 编辑器终端安装sass:

# 安装sass
npm install sass

紧接着 在package.json文件中添加两个命令,如下:

// dev为本地开发命令，--watch是监听文件变化，自动编译
// build为正式打包命令，--style为打包风格，compressed为压缩模式，expanded为展开模式
{
  "scripts": {
    "dev": "npx sass index.scss output.css --watch",
    "build": "npx sass index.scss index.css --style=compressed"
  }
}

然后 在项目中创建index.scss,并写如下内容

.box{
  color:red;
}

最后运行如下命令,并且进入本地开发模式

npm run dev

此时完整目录结构如下所示:

|-- sass-learn
|   |-- index.scss
|   |-- output.css
|   |-- output.css.map
|   |-- package.json

Scss 还是 Sass

SASS 支持两种不同的语法,分别是文件后缀为.scss和.sass这两种语法功能一样,仅仅风格不同

// .scss语法：有括号，有分号
.box {
  button {
    outline: none;
    border: 1px solid #ccc;
  }
}

// .sass缩进语法：无括号，无分号，只有缩进和换行
.box
  button
    outline: none
    border: 1px solid #ccc

所以叫scss还是sass其实都一样，具体如何使用根据个人喜好即可。