Scss Config

环境配置

less、scss(sass)和stylus代码并不能被浏览器直接解析，所以必须先将它们编译成css代码

现有框架已经提供了css预处理器选项，编译相关配置会自动帮我们生成！所以只有在"练习"情况下才有必要安装该环境

sass和scss 的区别，sass 比较老，使用缩进的方式编写，scss 借鉴less 完全兼容css ，使用css嵌套的方式编写比较新运行环境 ruby node dart

就是在scss 文件中既可以些 css 也能些 scss

一、安装分类

1.不依赖编辑器

# 全局安装scss预处理器，使用终端命令实现编译

a. Node环境下的node-sass模块
b. Node环境下的dart-sass模块
c. Ruby环境下的sass模块
d. Dart环境下的sass模块

# 注：这里的推荐顺序针对的是"练习"场景，而开发环境下推荐使用的是dart-sass
# 本质：某个语言的第三方库或者命令行工具

2.依赖编辑器

a. IDE代表：Webstrom  前提是安装上述"1"中的命令行编译工具，配置自动命令，另安装一个代码提示插件scss
b. 编辑器代表：vscode   安装Easy Sass（编译）和Sass（代码提示）两个插件

二、安装步骤

1.不依赖编辑器

😀 Node环境

- node-sass

a.安装

1. 安装node  https://nodejs.org(官网) 或 https://npm.taobao.org/mirrors/node(镜像)
2. *安装cnpm(不推荐直接将源换为淘宝镜像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安装node-sass $npm i -g node-sass  或  $cnpm i -g node-sass
4. 检查是否安装成功$node-sass -v

b.使用

单文件编译

$node-sass  原有的scss文件 生成的css文件
$node-sass  原有的scss文件 -o 生成目录

# example:
$node-sass a.scss b.css
$node-sass a.scss css_files

多文件编译

$node-sass 原有的scss文件目录 -o 生成的css文件目录

# example:
$node-sass c -o d

文件监听模式

# 在"1"和"2"的基础上填加"-w"命令行参数即可
$node-sass -w 原有的scss文件 -o 生成目录
$node-sass -w 原有的scss文件目录 -o 生成的css文件目录

# example:
$node-sass -w scss -o css

# 效果：编译进程不结束，监听文件内容

- dart-sass

a.安装

1. 安装node  https://nodejs.org(官网) 或 https://npm.taobao.org/mirrors/node(镜像)
2. *安装cnpm(不推荐直接将源换为淘宝镜像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安装dart-sass $npm i -g sass  或  $cnpm i -g sass


# 注：该模块为第三方库，所以可以考虑使用cnpm i sass -D(-D == --save-dev)仅对某个小项目当做开发时依赖进行使用

b.使用

/* 该模块的官方文档：https://sass-lang.com/documentation/js-api */


const sass = require('sass');

sass.render({file: scss_filename}, function(err, result) { /* ... */ });
// OR
const result = sass.renderSync({file: scss_filename});

// 注：默认情况下renderSync()的速度是render()的两倍以上，这是由于异步回调所带来的开销而导致的

😀 Ruby环境

a.安装

1.安装Ruby   https://rubyinstaller.org/downloads
2.*配置镜像    $gem sources_scss -a https://gems.ruby-china.com/ -r https://rubygems.org/
3.*查看源 $gem sources_scss -l # 确保只有gems.ruby-china.com一个源
4.安装scss $gem install sass
5.检查是否安装成功 $sass -v

#注：如果出现了SSL错误，修改 ~/.gemrc 文件，增加 ssl_verify_mode: 0 配置
# ~表示用户根目录，windows的文件位置为C:\Users\用户名\.gemrc

---
:sources_scss:
- https://gems.ruby-china.com
:ssl_verify_mode: 0

b.使用

# 注：最好带上"-C --sourcemap=none "参数
# 注：Sass 命令行工具根据文件的拓展名判断所使用的语法格式，没有文件名时 sass 命令默认编译 .sass 文件，添加 --scss 选项或者使用 scss 命令编译 SCSS 文件。

单文件编译

$sass  原有的scss文件[:]生成的css文件

# example:
$sass a.scss b.css

多文件编译

$sass --watch 原有的scss文件目录:生成的css文件目录
# 注：必须加"--watch"

文件监听模式

$sass --watch 原有的scss文件:生成的css文件
$sass --watch 原有的scss文件目录:生成的css文件目录

# example:
$sass --watch -C --sourcemap=none scss:css

# 效果：编译进程不结束，监听文件内容

😀 Dart环境

a.安装

1.安装Dart   https://dart.dev/tools/sdk/archive
2.*配置镜像，添加环境变量 https://pub.flutter-io.cn 或 https://mirrors.tuna.tsinghua.edu.cn/dart-pub/
windows打开此电脑,添加系统变量 PUB_HOSTED_URL=https://pub.flutter-io.cn
Linux键入$echo 'export PUB_HOSTED_URL="https://pub.flutter-io.cn"' >> ~/.bashrc 或 /etc/profile

4.安装sass
全局安装：$pub global activate sass          (可执行文件)
项目安装：pubspec.yaml填写好依赖后，执行 $pub get      (.dart代码)
5.检查是否安装成功$sass -v

b.使用

全局安装模式

单文件编译

$sass  原有的scss文件[:]生成的css文件

# example:
$sass a.scss b.css

多文件编译

$sass 原有的scss文件目录/:生成的css文件目录/

# example:
$sass scss/:css/

文件监听模式

$sass --watch 原有的scss文件:生成的css文件
$sass --watch 原有的scss文件目录:生成的css文件目录
# 注：都必须加上":"

# example:
$sass --watch scss:css

# 效果：编译进程不结束，监听文件内容

局部安装模式

2.运行.dart代码
    // 前提是在pubsepc.yaml文件中添加依赖
    // dev_dependencies:
   //    sass: lastest

// main.dart
import 'package:sass/sass.dart' as sass;

void main(List<String> args) {
  print(sass.compile(args.first));
}
// or
void main(List<String> args) {
  var result = sass.compile(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result);
}
// dart main.dart styles.scss styles.css

2.依赖编辑器

😀 WebStrom

安装上述命令行工具之一（以node-sass为例演示）
依次打开并点击：webstrom -> Settings -> Tools -> Files Watchers -> + -> 选择SCSS文件标识
Name随意写，供自己看而已
File Type选择SCSS Style Sheet
Scope选择All Places
Program选择可执行文件的路径（这里以node-sass为例）
Arguments按需选择（这里以*$FileName$:$FileNameWithoutExtension$.css*为例）
Output paths to refresh按需选择（这里以*$FileNameWithoutExtension$.css*为例）
点击OK，配置完成

😀 VSCode

安装Easy Sass（编译）和Sass（代码提示）两个插件（注意大小写，否则找不到）
点击插件右下角的设置图标后点击”扩展设置”，最后点击”在settings.json中编辑”，开始设置关于Easy Sass的配置
会自动生成下方图片内的配置

添加*“easysass.targetDir”: $path*，可将编译后的css文件放入*$path*路径下(默认为当前路径)。例如生成到css文件下内