7.1：scss安装问题

https://blog.csdn.net/kai_vin/article/details/90763326

安装 scss
这里说一下比较常用的方法，我这里主要是针对项目开发方式的不同，使用两种不同的方法：

模块化开发
模块化开发通常因为会使用gulp、grunt、 webpack等工具，所以scss会作为项目的一个模块来使用，这种情况下，通常是通过npm包管理来下载scss相关插件包，并在项目中设置好让scss能正常工作的配置，关于这些配置，可以看我的webpack4.x系列的样式配置相关文章。

非模块化开发
这里主要说非模块化开发过程中，怎么在自己的项目中使用scss，

安装ruby环境
下载该工具因为外网原因，都是十几KB的速度~，最好是有vpn，没有的话可以使用我网盘里下载好的版本 https://pan.baidu.com/s/1xZaJCKZ85j_LwySgfedFBQ 提取码：1cpw ，这个是64位2.5.1版本。
下载完成后，运行工具，点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成。
完成后，在cmd中输入 ruby -v 如果安装成功，则会显示安装的ruby版本号。
切换源
正常ruby运行环境在国外，国内不能正常运行，需要更换为国内源，可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加国内的源https://gems.ruby-china.com，然后查看下当前使用的源是哪个，如果是国内的，就可以开始下载sass了。
执行这些命令需要先打开ruby的终端命令行，开始菜单中搜索ruby 打开Start Command Prompt with Ruby，然后逐步输入以下命令:
// 移除默认源
gem sources —remove https://rubygems.org/
// 添加国内源
gem sources —add https://gems.ruby-china.com
// 查看当前源
gem sources -l
1
2
3
4
5
6
安装 sass
换好源后，输入以下命令：
gem install sass
1
等待安装结束，会显示 sass 的版本，说明安装成功，到这里电脑的环境就算配置完成了。

配置 scss
安装完sass后，项目开发过程中，还需要做能自动编译scss的配置，这里主要介绍两种编辑器的配置方法：

webstrom编辑器
在webstrom中配置scss，就需要每新开一个项目都配置一下，因为该编辑器会在该项目的根目录下生成一个.idea的文件夹，就是独属于这个项目的webstrom配置，配置scss参数的位置：File - Settings - Tools - File Watchers -SCSS，这里找到file watchers后，需要点击+号按钮，添加scss，这里也有sass，但一般都是使用scss，sass在后来改名为scss，但是两者都还能用。

添加了scss后，会弹出弹框如下：

需要配置的就是图中圈中的4项

program是用来找到找到我们安装的sass目录，sass在安装成功后，会在ruby的安装目录bin文件夹下生成一个sass.bat文件，这里就是要找输入这个路径：

arguments就是主要的编译scss的配置参数，里面可以配置压缩、生成sourcemap、生成路径，三个主要作用：
// 在 scss 文件的父目录的 css 中生成 .css 文件，同时生成 sourcemap
—no-cache —update —sourcemap —watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

// 在 scss 文件的当前目录下的 css 文件夹下生成 .css 文件，同时生成 sourcemap
—no-cache —update —sourcemap —watch $FileName$:$ProjectFileDir$\css\$FileNameWithoutExtension$.css

// 在 scss 文件的当前目录下 css 文件夹下生成 .css 文件，同时压缩该文件，并生成 sourcemap
—no-cache —update —style compressed —sourcemap —watch $FileName$:$ProjectFileDir$\css\$FileNameWithoutExtension$.css
1
2
3
4
5
6
7
8
—style compressed：生成压缩后的样式文件；
—sourcemap：生成sourcemap文件；
$ProjectFileDir$\css\$FileNameWithoutExtension$.css：当前文件同级的css文件夹下生成与scss文件同名的样式文件；
$FileParentDir$\css\$FileNameWithoutExtension$.css：当前文件父级的css文件夹下生成与scss文件同名的样式文件；
剩下的两个参数不用修改
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.css
1
2
有不需要编译的scss文件，要以_开头命名
到此整个scss的配置就完成了，现在就可以在webstrom中使用scss编写样式了。
vscode编辑器
vscode中使用scss需要在扩展中下载插件支持，在扩展中搜索easy sass，sass，将这两个插件下载下来，之后打开vscode的配置文件：

打开配置文件后，需要点击右上角的{}进行编辑，在配置文件中，添加如下配置：

“files.associations”: {
“*.css”: “scss”,
},
“easysass.compileAfterSave”: true,// 保存scss文件后自动编译
“easysass.excludeRegex”: “_”,// 配置忽略编译的文件格式 eg：_variable.scss
“easysass.formats”: [
{
“format”: “compact”, // 没有缩进、扩展的 compact：简洁格式的 css 代码 nested：嵌套缩进的 css 代码
“extension”: “.css”
},
{
“format”: “compressed”, // 压缩
“extension”: “.min.css”
}
],
“easysass.targetDir”: “./css”,// 自定义css输出文件路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
添加完成后重启vscode，就能在vscode中使用scss了，在vscode中，做了配置后，不需要每新开始一个项目都重新配置，这些参数，这里是全局配置。

使用 scss
scss的作用就是让我们在编写样式时，能更方便快捷，能精简代码量，能更易于维护，我觉得这些是最根本最实用的。

这里只简单介绍下，具体scss教程，看官网即可。

变量
// 设置变量
$primary: #2a88c5 !default;//主色
$auxiliary: #de9345 !default;//辅色
// 引用变量
p{
color:$primary;
background-color:$auxiliary;
}
1
2
3
4
5
6
7
8
占位符
// 设置占位 居中
%center-block{
margin-left: auto;
margin-right: auto;
}
// 引用占位
p{
width:300px;
height:200px;
@extend %center-block;
}
1
2
3
4
5
6
7
8
9
10
11
混合宏 mixin
// 设置mixin （闭合子元素浮动）
@mixin clearfix {
&:before,
&:after {
content: “”;
display: table;
}
&:after {
clear: both;
}
}
// 设置占位 引用mixin
%clearfix{
@include clearfix;
}
// 引用占位
ul{
width:100%;
@extend %clearfix;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
嵌套
上面的例子用到了scss的嵌套功能

// 样式中使用嵌套
ul{
width:100%;
@extend %clearfix;
li{
height: 32px;
a{
color:$primary;
&:hover{
color:darken($primary,10%);
}
}
}
}
// 编译结果
ul:before, ul:after { content: “”; display: table; }
ul:after { clear: both; }
ul { width: 100%; }
ul li { height: 32px; }
ul li a { color: #2a88c5; }
ul li a:hover { color: #216b9b; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
上面用到了scss自带的颜色函数darken()，还有lighten()

继承
// 样式中使用继承
.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}
// 编译结果
.class1, .class2 { font-size: 19px; }
.class2 { color: black; }
.class1, .class2 { font-weight: bold; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.class2后面设置的.class1也被继承了，由此可以看出scss的编译是递归编译

引用外部样式文件
@import “core/_setting”;
1
这些都是最简单的使用方法，scss的强大不止于此，这里不做详细介绍，官网的教程已经足够优秀~

————————————————
版权声明：本文为CSDN博主「IQkevin」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kai_vin/article/details/90763326