在Vscode中安装Sass并配置

在Vscode中安装Sass并配置

sass简介

Sass(Syntactically Awesome Style Sheets,英文官方文档

)是一种CSS预处理器,扩展了CSS的功能并提供了更高效的样式表编写方式。它兼容所有CSS版本,通过变量、嵌套、混合(Mixins)、继承等特性简化了复杂样式表的开发。
Sass支持两种语法格式

  • SCSS(Sassy CSS):后缀为.scss,兼容CSS语法,使用大括号和分号。
  • 缩进语法(Indented Syntax):后缀为.sass,省略大括号和分号,依赖缩进。

编译与工具

Sass文件需编译为标准CSS才能被浏览器识别。常用工具包括:

命令行工具:通过Dart Sass或LibSass执行编译。

构建工具集成:Webpack(sass-loader)、Gulp(gulp-sass)等。

开发环境插件:VS Code的Live Sass Compiler扩展。

安装Sass插件

vscode扩展市场搜索sass插件,当前选中的是Live Sass Compiler,sass实时编译插件

配置sass插件

在插件扩展市场打开Live Sass Compiler的配置页面。

更改配置如下:formats是默认已存在配置,可替换或者自行更改属性均可。generateMap、autoprefix为新增。formats新版只有"expanded、compressed"两种,可查看其使用说明

javascript 复制代码
"liveSassCompile.settings.formats": [      
    /* nested-嵌套格式,嵌套格式(保留层级结构)已废除,用的话会报错
    * expanded-展开格式(默认值,保留缩进和换行)
    * compact-紧凑格式,紧凑格式(每条规则独占一行)已废除,用的话会报错
    * compressed-压缩格式,压缩为单行(删除所有空格和注释)
    */  
    {
      "format": "expanded",//定制输出得css格式
      "extensionName": ".css",
      "savePath": "~/../css",//指定存储地址
      "savePathReplacementPairs": null
    }
  ],
  /* 生成css映射文件 */
  "liveSassCompile.settings.generateMap": true,
  /* 是否添加兼容前缀,例如--webkit-、-moz-、-ms-、-o-等 */
  "liveSassCompile.settings.autoprefix": [    
    "last 10 versions",
    "> 1%",
  ]

编写sass

新建一个名字为sassDemo的项目,在项目下新建一个sass文件夹,再新建一个demo.scss文件,内容如下:

css 复制代码
$background-color: #000000;
P{
    color: $background-color;
}

保存后即可看到与sass同目录生成了一个css文件,且已存在demo.cssdemo.css.map。如果生成不成功,点击下方圈中的红色监听处。

使用Sass

在项目根目录新建一个index.html。(在文件内输入!回车,可自动生成简易html内容)
引入的样式文件为最终输出的css文件,编写的时候只需要维护sass即可。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>
    <p>Hello World!</p>
</body>
</html>
相关推荐
用户1774125612442 小时前
不懂装懂的AI,折了程序员的阳寿
rust
HealthScience3 小时前
vscode文件颜色,只显示自己更改的文件颜色、刚git下来的库,vscode打开后,显示所有文件都被修改了
vscode·深度学习
AlfredZhao3 小时前
SQLcl:不仅是 SQL*Plus 的继任者,更是 AI 时代的连接器
vscode·server·mcp·cline·sqlcl
威威猫的栗子4 小时前
Git 使用全指南:从配置到免密登录
大数据·git·vscode
患得患失94912 小时前
【前端】【Vue DevTools】Vue DevTools 进阶:用 Trae / Cursor 替换 VSCode 打开文件(跳转行列无误)
前端·vue.js·vscode
z日火16 小时前
VSCode使用Jupyter完整指南配置机器学习环境
vscode·机器学习·jupyter
量子位18 小时前
vivo自研蓝河操作系统内核开源!Rust开发新机遇来了
rust·ai编程
兴趣使然_18 小时前
VS Code 美化插件
vscode
祈澈菇凉20 小时前
rust嵌入式开发零基础入门教程(六)
stm32·单片机·rust
祈澈菇凉20 小时前
rust嵌入式开发零基础入门教程(二)
开发语言·后端·rust