使用vscode编译sass

in vscode with 0 comment

前言

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

  1. SCSS语法的变量示例:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {  border-color: $blue;  color: darken($blue, 10%);}
.border {  padding: $margin / 2; 
 margin: $margin / 2;  
border-color: $blue;
}

  1. 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,然后下载安装即可
image.png
安装默认编译路径为.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”。

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

编译

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

注意

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

X O