scss安装及使用总结_安使用scss

安装 scss

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

模块化开发

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

非模块化开发

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

1. 安装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版本号。
2. 切换源
   正常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

3. 安装 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项

1. program是用来找到找到我们安装的sass目录，sass在安装成功后，会在ruby的安装目录bin文件夹下生成一个sass.bat文件，这里就是要找输入这个路径：
   
2. 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文件同名的样式文件；
3. 剩下的两个参数不用修改

   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的强大不止于此，这里不做详细介绍，官网的教程已经足够优秀~