【sass】入门自动编译为css文件|编译格式区别及设置|文件保存路径|Error: Invalid CSS after “.xxx{“: expected “}“, was “{“ 解决办法

钟鼓迟夜初长คิดถึง

已于 2024-01-08 21:21:48 修改

阅读量299

点赞数

文章标签：前端 css sass

于 2023-05-11 16:53:36 首次发布

本文链接：https://blog.csdn.net/CSDNer_323/article/details/130621106

版权

一、sass自学网站及插件安装配置：

1.Sass中文网www.sass.hk

2.sass插件Live Sass Compiler

3.如何自动编译

4.更改插件默认设置

二、报错：Error: Invalid CSS after ".xxx{": expected "}", was "{" 的解决办法

一、sass自学网站及插件安装配置：

1.Sass中文网www.sass.hk

包含快速入门及各种使用技巧Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网Sass(Scss)是世界上最成熟、稳定和强大的专业级CSS扩展语言,Sass(Scss)中文网主要致力于Sass(Scss)在中国的推广，通过Sass(Scss)来改变前端工程师，提高效率，降低成本。https://www.sass.hk/

2.sass插件Live Sass Compiler

在Visual Studio Code中按Ctrl+Shift+X打开扩展，搜索安装插件Live Sass Compiler

3.如何自动编译

安装后，新建scss文件，在vscode底部状态栏中点击watch sass，此时状态为 Watching，书写代码并Ctrl+S保存，即可自动编译sass为css文件

4.更改插件默认设置

这时可能并不能顺利完成实时编译，所以我们需要弄懂几个设置。

(1)format：编译格式

expanded:无缩进、扩展

compact:简介格式

compressed:压缩

nested:嵌套缩进

(2)extensionName:扩展名

可以是.css或.min.css 默认值为.css

区别：

.min为压缩版格式(去掉多余的注释、空格等)，文件较小，易于加载；

.css为未压缩，文件稍大，保留完整的注释、可读性强的标准格式化文件。

一般生产环境用.min.css(加载速度快,提升体验) ，开发试验阶段用.css(便于理解)。

(3)savePath:保存路径

转换后的css文件默认保存在scss文件的同级目录下，实际工作中，sass和css通常分别保存在对应的文件夹中，如图所示：

在VS Code中按Ctrl+Shift+X打开扩展，找到Live Sass Compiler插件，依次点击点击右下角齿轮图标—扩展设置—在 settings.json 中编辑

在settings.json中添加如下代码：

    "liveSassCompile.settings.formats": [
        // 扩展
        {
            "format": "nested",  //可定制的出口CSS样式（expanded:无缩进、扩展，compact:简介格式，compressed:压缩，nested:嵌套缩进）
            "extensionName": ".css",//编译后缀名
            "savePath": "~/../css/" //编译保存的路径
        } 
        
    ],

(4) generateMap:生成css.map文件

CSS.Map文件是一种用于调试CSS样式的文件,它与CSS文件一起使用,通常由处理CSS预处理器的工具生成。它本质上是一个映射表,将压缩后的CSS样式表中的CSS规则和选择器映射到源文件中具体的行和列。

有时可能我们并不需要生成该文件

在settings.json中添加如下代码：

    "liveSassCompile.settings.generateMap": true,  // 编译时是否同时生成css.map格式文件

(5)autoprefix:自动前缀

live sass compiler可以在编译时自动添加CSS兼容性前缀（-webkit-，-moz-，-ms，-o-等），

在settings.json中添加如下代码：

    "liveSassCompile.settings.autoprefix": [
        "> 1%",  // 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本
        "last 3 versions"  // 每个浏览器的最后3个版本
    ],

或者设置为具体的浏览器，如下：

    "liveSassCompile.settings.autoprefix": [
        "ie >= 6",  //IE6以上
        "firefox >= 8",  // 火狐8以上
        "chrome >= 24",  // 谷歌24以上
        "Opera>=10"  // 欧朋10以上
    ],

二、报错：Error: Invalid CSS after ".xxx{": expected "}", was "{" 的解决办法

首先我们需要清楚一个概念：

Sass有两种语法格式。

一种是最早的Sass语法格式，被称为缩进格式（Indented Sass），通常简称“Sass”，是一种简化格式。这种格式以“.sass”作为扩展名。

另一种语法格式是SCSS（SassyCSS），这种格式仅在CSS 3语法的基础上进行拓展，所有CSS3语法在SCSS中都是通用的，同时加入Sass的特色功能。这种格式以“.scss”作为扩展名。