草莓牛奶

# CSS预处理器

# Sass/Scss

  1. Sass于2007年诞生,是最早最成熟的css预处理器,但不兼容css
  2. 后面受Less的影响,进化为了全面兼容css的Scss

# Less

  1. 2009年诞生,借鉴了Sass的长处,并兼容css语法
  2. 文件名以.less结尾

# Stylus

  1. 2010年诞生,出自Node.js社区,主要给Node项目进行CSS预处理支持
  2. 文件名以.styl结尾

# Sass与Scss的关系

Sass有两套语法:

  • 第一个或最新的语法称为Scss,是css语法的扩展,文件名以.scss结尾
  • 第二种或之前的语法称为Sass,提供了更简洁的css编写方式,文件名以.sass结尾
  • 任何一种格式可以直接导入(@import)到另一种格式中使用

# 环境配置

less,scss(sass)和stylus代码不能被浏览器直接解析,必须先将它们编译成css代码,现有框架已经集成,相关配置会自动帮我们生成

# 命令行编译工具(不依赖编辑器)

  • Node环境下的node-sass
  • Node环境下的dart-sass 推荐使用
  • Ruby环境下的sass模块
  • Dart环境下的sass模块

# 命令行编译工具(依赖编辑器)

  • webstorm 安装sass插件
  • vsCode 安装Easy Sass(编译)和Sass(代码提示)插件

# 安装

npm与yarn

npm init                    # 初始化
npm install xx              # 本地安装
npm install xx -g           # 全局安装
npm install                 # 根据dependencies配置安装依赖
npm install xx --save       # 将安装包信息加入到dependencies
npm install xx -S           # 将安装包信息加入到dependencies
npm install xx --save-dev   # 将安装包加入到devDependencies
npm install xx -D           # 将安装包加入到devDependencies
npm uninstall xx            # 卸载
1
2
3
4
5
6
7
8
9
yarn init                   # 初始化
yarn                        # 安装所有依赖
yarn add xx                 # 本地安装,将安装包信息加入到dependencies与yarn.lock文件
yarn add xx --dev           # 将安装包加入到devDependencies
yarn add xx -D              # 将安装包加入到devDependencies
yarn remove xx              # 删除
yarn global add xx          # 全局安装依赖
1
2
3
4
5
6
7

# node-sass

npm install -g node-sass    # 全局安装
node-sass -v                # 可以看是否安装成功
1
2

# dart-sass

  • sass官方已经将dart-sass作为未来主要的的开发方向
  • dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node 环境中使用
  • 替换 node-sass 之后有一个地方需要注意，就是它不再支持之前 sass的那种 /deep/ 写法，需要统一改为 ::v-deep 的写法
npm install sass -S -D
1

起步 →