【前端之Sass和Less（VScode）的注释、变量、插值、作用域语法区别】

最新推荐文章于 2025-05-28 12:40:22 发布
最新推荐文章于 2025-05-28 12:40:22 发布
阅读量433 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # 前端之Sass和Less 前端 文章标签： sass 前端 less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44735180/article/details/121791739
本文探讨了Sass与Less在VScode环境下的注释、变量定义、插值及作用域语法区别。通过实例展示了SCSS使用$定义变量，LESS使用@定义变量，以及它们的插值语法和作用域规则。总结指出，两者在注释和作用域上的差异，以及编译到CSS时的表现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前端之Sass与Less（VScode）的注释、变量、插值、作用域语法区别

代码原文件见同名（肖言是御用女主）知乎；
在VScode中Sass和Less具体产生的编码差异让我们一起对比揭露吧

  1. 准备工作
  2. 注释语法
  3. 定义变量语法
  4. 插值语法
  5. 作用域语法
  6. 总结

1.准备工作

为了有很直观地对比，首先我分别创建了一个SCSS.scss文件和LESS.less文件。并且将他们自动生成的SCSS.css和LESS.css分屏展示在两边，如下图所示：
SCSS与LESS文件的创建

2. 注释语法

SCSS.scss文件中的多行注释能够被自动生成在 SCSS.css文件中，而单行不显示，如下图所示：

在这里插入图片描述
LESS.less同理，如下图所示：
在这里插入图片描述

3. 定义变量语法

SCSS.scss使用$number定义变量，具体情况如下图所示：

最低0.47元/天 解锁文章

200万优质内容无限畅学
CSS预处理器sass和less
weixin_68658847的博客
02-21 2703
CSS预处理器sass和less
Less的简单总结
sinat_38992528的博客
06-04 552
名称：Less（通常表示为 LESS 或 less.js）类型：CSS 预处理器创始人：Alexis Sellier首次发布：2009年许可证：Apache License 2.0对于Less没有内置的功能，开发者可以编写自定义函数，通过JavaScript扩展Less的能力。这为解决特定问题或实现高度定制化的样式逻辑提供了无限可能。// 自定义JavaScript函数// 实现函数逻辑// Less中使用自定义函数.example {
为VScode中下载好的插值写扩展智能提示。
zebin的博客
11-10 2742
VScode 中 写扩展方法，智能提示，关键字； 最近使用vscode 发现 有些插件，语法提示不是很健全，于是就想着能不能添加，最后，发现是可行的。 其实 修改插件的源码，扩展函数 就好了。 其中vsCode 扩展插件目录 一般是存放在 C:\Users\UserName.vscode\extensions 底下。 这个目录下 就是之前从插件扩展商店中 下载好的插件。 我使用的插件 是shade...
Less：语法、VScode中的配置
七七的博客
07-19 506
Less
【前端】【css预处理器】Sass与Less全面对比与构建对应知识体系
最新发布
qq_59344127的博客
05-28 1701
less，sass知识体系全解
scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法
weixin_39605347的博客
12-20 180
VSCode下让CSS文件完美支持SCSS或SASS语法方法习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的朋友也许不适应了. 我专门研究了一下, 在Visual Studio Code编辑器下如果配置相关代码和设置达到CSS文件完美编写SCSS的办法, 其他语法类型原理相似, 这里以SCSS为例.开始配置V...
sass与less变量、插值、作用域的差异
weixin_45172119的博客
07-08 312
变量 less是以@开头的，而sass是以$开头的。 sass： $num :100px; .box { width: $num; } 结果： .box { width: 100px; } less: @num :100px; .box { width: @num; } 结果： .box { width: 100px; } 插值 less和sass 可以通过插值的方法命名一个属性。变量名需要加一个大括号。 less: @key: margin; .box {
less变量插值
weixin_34185512的博客
07-27 280
　　在使用less的过程中，我在background的中引用图片路径，希望先确定一个baseurl，然后再在url中使用拼接字符串的方式拼接，尝试多次，失败。 实际上less的变量插值是有自己的一套规则的，如下：   先在less文件顶部声明 @picturePath，这样当文件路径发生变化的时候就只需要修改 @picturePath，而不需要在文件中一个一个的修改，大大提高了可扩展性。  ...
『精』Sass 核心程序设计指南（这一篇就够了！）
贤哲XianZhe的博客
04-26 792
Sass（英文全称：Syntactically Awesome Stylesheets），在前端领域中，Sass 作为 CSS 的预处理器，即使没使用过，大概率也或多或少听说过 Sass。Sass 包括两套语法。最开始的语法叫做“缩进语法”，与 Haml 类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法分别对应 .sass 和 .scss 两个文件扩展名。
CSS 笔记（十三）：预处理器 —— Sass
0lonely0
09-04 723
CSS 笔记（十三）：预处理器 —— Sass
Less学习笔记2：Less中的注释
W先生
11-10 1785
Less中的注释 可是使用css中的注释：/**/ 也可以使用 // 注释 （// 编译的时候会自动过滤掉） ​两者的区别： /**/ 中的注释在编译的是会被编译出来的，会在编译生成的CSS中会出现 // 是不会被编译的，编译时自动过滤，在编译生成的CSS中没有...
sass 变量作用域
xiongzhengxiang的专栏
08-24 871
sass 变量有两个作用域 -局部变量 -全局变量局部变量在mixin 和function 中定义的变量。嵌套选择器，可以使用在嵌套外定义的变量。局部变量是已{}区分的吗？全局变量在选择器外定义的变量，默认都是全局变量
Sass-变量和作用域
BraveWangDev
01-22 2485
Sass作为CSS预编译工具,最常用最基础的功能就是将属性值提取为变量项目配置: 1,.scss文件放到sass文件夹下 2,.scss文件编译得到的.css文件放到style文件夹下 3,页面引入css文件路径为style下由sass编译后的.css文件 4,采用文件夹监听方式实现 见:单文件监听和文件夹监听 1,Sass变量sass中的变量可以保存CSS的单位
Less插值与转义
sinat_38728634的博客
07-12 617
什么是变量插值?在less中如果是属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量，如果属性名称或者选择器名称想使用变量中保存的值,那么必须使用变量插值的格式 插值写法： @color:color .box{ @{color}:red } 转义语法~中也要使用插值，字符串中也可以使用插值 @color:color @a: ~'@{color}'//@a为color...
less变量插值问题
weixin_34357267的博客
11-14 385
less变量与其他数据（字符串、数字）拼接的解决方法（循环的内容是（不同变量+固定字符串））less官方插值格式为@{num}，与数据拼且放在冒号之后可以采用这样的格式使用@@var;（1）放在冒号之后 //公共变量 @mkcolor1:#6ec5ff; @mkcolor2:#ff8365; @mkcolor3:#fdc139; @mkc...
Less使用语法（详细）
热门推荐
weixin_44646763的博客
02-27 1万+
一、变量 1、使用@符号声明变量 例子： less内容 @width:100px;//变量 @height:100px; @fsize:20px; .less{ width: @width;//变量作为css属性的值 height: @height; background-color: red; font-size: @fsize; } css效果： .less { width: 100px; height: 100px; bac
vscode中使用less的方式和配置 3步即可完成
preserveXing的博客
06-01 881
vscode中使用less的方式和配置 3步即可完成 第一步 在 vscode下载 Esay LESS 第二步 点击 文件 —> 首选项 ----> 设置 ---->输入less.compile—>点击 setting.json 第三步 将一下文字复制到 对应的less.compile位置下 "less.compile": { //建议 把compress设为 false 便于阅览 "compress": false, // 是否删除多余
VsCode 使用less
weixin_40662552的博客
05-13 329
1、安装node.js 2、安装less 　　npm install less -g 正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消 3、安装VS插件Easy LESS 4、编辑保存.less文件，会在对应的目录下生成对应的.css文件 5.在文件 首选项 设置 中搜索 settings.json 加入 配置相关代码 如图这样配置可以...
关于vscode配置less以及node的环境变量配置
weixin_47417897的博客
03-03 564
1.从官网下载nodejs.cnz中下载window64位的压缩包解压缩后进行环境变量的配置 点击环境变量后找到path后把node的路径放上去 2.点开控制台输入如下指令代码配置成功 3.进入vscode配置终端1.npm install less -g 2.npm install less-plugin-clean-css 当看到报错后你就成功了99%了 4.在开始菜单中搜索powershell命令行工具，以管理员身份运行，执行如下命令即可 set-ExecutionPoli..
Sass语法基础：变量、注释与作用域详解
本资源是一份关于Sass语法学习的笔记，Sass是CSS预处理器，它在标准CSS的基础上引入了更多的编程特性，使得样式编写更加灵活和高效。以下是笔记中的关键知识点： 1. **SassScript功能**: SassScript是Sass提供的新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值