Emmet缩写失效需检查三处：文件语言模式是否正确、settings.json中Emmet是否启用、有无插件冲突；Sass编译推荐用tasks.json调用sass CLI而非Live Sass Compiler；多光标编辑用Alt+Click更精准，颜色输入用内置选择器提效。
Emmet缩写不生效？检查这三处设置
Emmet在CSS/Sass中默认启用，但常因配置冲突或语言模式错配失效。最常见的是文件没识别为scss或css，而是被当成plaintext——右下角状态栏语言标识显示错误时，Tab键就完全没反应。
- 确认当前文件后缀是
.scss、.sass或.css，且右下角语言模式显示正确（点击可手动切换） - 检查
settings.json里是否禁用了Emmet："emerald.enableEmmet": true（旧版VSCode可能用"emerald.emmetEnabled"） - 某些插件如
Auto Close Tag或HTML CSS Support会干扰Emmet行为，临时禁用它们测试
典型缩写如m10→margin: 10px;、d:f→display: flex;，必须在支持的语言模式下输入后按Tab才触发。
保存即编译Sass：别依赖插件自动监听
很多教程推荐安装Live Sass Compiler并开启"liveSassCompile.settings.autoSaveWatchedFiles": true，但实际中它容易卡住、漏编译，尤其在多入口文件或@import嵌套层级深时。
- 更稳的方式是用VSCode原生
tasks.json调用系统sassCLI："command": "sass"+"--watch"参数，避免插件层额外开销 - 务必指定
cwd为项目根目录，否则@import路径解析失败，报错File to import not found - 如果用
dart-sass，确保已全局安装：npm install -g sass；Windows用户注意PATH环境变量是否包含%APPDATA%\npm
编译输出路径建议显式写死，比如"${fileDirname}/css/${fileBasenameNoExtension}.css"，避免生成文件散落在各处。
立即学习“前端免费学习笔记（深入）”；
多光标编辑CSS属性值：Alt+Click比Ctrl+D更精准
想批量改多个color值或font-size？Ctrl+D选词容易误中类名或注释，而Alt+Click直接在值位置点出光标，控制力更强。
- 场景举例：修改一组
padding值，把12px全换成16px——在每个12px末尾Alt+Click，再输入16px - 配合
Ctrl+Shift+L全选同值（如全选#333），比Ctrl+F查找替换更安全，不会误改注释里的十六进制 - 注意：CSS里属性名和值之间有冒号空格，
Alt+Click点在空格后，光标才会落在值起始位置，避免删掉冒号
颜色值输入慢？用内置颜色选择器代替手敲
输入color: #或background: hsl(后，VSCode会自动弹出颜色选择器面板，点选即可插入标准格式值，不用切出查色值表。
- 支持
hex、rgb、hsl、rgba四种格式，面板右上角可切换 - 在
.scss里输入$primary-color:后跟空格，也能触发变量颜色预览（需SCSS IntelliSense插件） - ⚠️坑点：颜色选择器只对标准CSS属性生效，自定义属性如
--bg不会触发；Sass变量$blue也不行，得靠插件补全
真正省时间的不是“快”，而是减少上下文切换——颜色面板出来那一刻，你就不用离开编辑器去取色工具了。
