前言

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。
Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。

SCSS语法的变量示例：

$blue: #3bbfce;
$margin: 16px;
.content-navigation {  border-color: $blue;  color: darken($blue, 10%);}
.border {  padding: $margin / 2; 
 margin: $margin / 2;  
border-color: $blue;
}

Sass语法的变量示例：

$blue: #3bbfce
$margin: 16px.content-navigation 
border-color: $blue  
color: darken($blue, 10%).border 
padding: $margin/2 
 margin:  $margin/2 
 border-color: $blue

二段代码都能编译成

.content-navigation {
	border-color: #3bbfce;
	color: #2b9eab;
}

.border {
	padding: 8px;
	margin: 8px;
	border-color: #3bbfce;
}

直接编写css样式文件，大家都知道要做到统一很费劲，特别在修改的时候。
书写sass，然后编译成css，一定程度上能减轻这一负担。
至于语法格式，优点大家可参考sass中文网，这里只教大家如何在vcode书写并编译sass。

下载安装

只需要在商店里搜索easy sass，然后下载安装即可

安装默认编译路径为.scss所在路径，我们可以简单配置下

{
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "explorer.confirmDelete": false,
    "window.zoomLevel": -1,
    "terminal.integrated.rendererType": "dom",
    
    // sass 代码
    "easysass.formats": [
        {
            "format": "compact",
            "extension": ".css"
        },{
        "format": "compressed",
        "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/"
}

easysass.formats 是设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件，此处我只设置了一个 easysass.formats 项目，所以编译时只生成一个 CSS 文件。

easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS：
　　 nested：嵌套缩进的 css 代码。
　　 expanded：没有缩进的、扩展的css代码。
　　 compact：简洁格式的 css 代码。
　　 compressed：压缩后的 css 代码。
easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了，此处可以自定义文件名，输出的 CSS 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 easysass.formats[i].extension 为 ".min.css"，假设当前的 Sass 文件名为“style.scss”，则编译输出的 CSS 文件名为“style.min.css”。

配置文件可在菜单路径为：文件->首选项->设置中找到

编译

我们新建test.scss，然后将上面对应的代码写入，点击保存就能看到如下生成的文件

注意

这个文件后缀最好为.scss，因为.sass后缀的对格式有要求，不符合csss书写风格。当然需要提示的话，去商店里找插件，搜索sass即可。

本文由止戈创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Feb 5,2020

使用vscode编译sass

前言

下载安装

编译

注意