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

最新推荐文章于 2023-03-27 08:49:49 发布
最新推荐文章于 2023-03-27 08:49:49 发布
阅读量348 收藏 1
点赞数
分类专栏： # 前端之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时的表现。
摘要由CSDN通过智能技术生成

前端之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同理，如下图所示：

最低0.47元/天 解锁文章
肖言是御用女主
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VScode插件2
10-21
VScode插件,常用插件开发 VScode插件,常用插件开发 VScode插件,常用插件开发
sass与less变量、插值、作用域的差异
weixin_45172119的博客
07-08 230
变量 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_44646763的博客
02-27 8626
一、变量 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
webpack编译 less scss语法
weixin_43606967的博客
07-22 355
混合 // less中 .demo { padding: 10px; a { font-size: 20px; } #test { width: 100px; } .cls { color: orangered; } } // css中 .demo { padding: 10px; } .demo a { font-size: 20px; } .demo #test { widt.
Less：语法、VScode中的配置
七七的博客
07-19 332
Less
详解vue项目中如何引入全局sass/less变量、function、mixin
08-27
Vue 项目中如何引入全局 Sass/Less 变量、函数、Mixin 在 Vue 项目中，如何引入全局 Sass/Less 变量、函数、Mixin 是一个常见的问题。今天，我们将详细介绍如何使用 sass-resources-loader 将全局 Sass/Less 变量、...
学习CSS预处理器:Sass和less进行对比
12-13
2. **变量和常量** - 两者都支持变量，但Sass还引入了常量的概念，其值不能被改变。 3. **函数和运算符** - Sass提供了更丰富的内置函数和运算符，如颜色操作、数学计算等，使其在处理复杂样式时更强大。 - ...
vue-cli配置全局sass、less变量的方法
10-16
Vue CLI 提供了方便的方式来配置全局的 Sass 或 Less 变量，使得这些变量可以在整个项目中被共享和重用。下面将详细介绍如何配置。 ### 配置全局 Less 变量 1. **下载插件**： 使用 Vue CLI 3 的命令行工具，你...
前端进阶：掌握Less与Sass规范的技巧与实践
最新发布
07-20
在前端开发领域，CSS预处理器如Less和Sass已经成为提高代码效率和可维护性的利器。Less和Sass提供了丰富的功能，比如变量、嵌套规则、混合（mixins）、函数等，使得CSS编写更加灵活和模块化。下面我们将深入探讨Less...
Sass 和 Less CSS预处理器1
08-08
【Sass 和 Less CSS预处理器】是前端开发中两种非常重要的工具，它们为CSS扩展了强大的功能，使得CSS编写更加高效、易于维护。Sass诞生于2007年，是最老牌的CSS预处理器，拥有两种语法：一种是基于缩进的Sass格式，...
vscode-scss:所有Sass文件中的变量，混入和函数的IntelliSense（仅SCSS语法）
04-29
vscode-scss 工作空间中所有文件的SCSS IntelliSense（变量，混入和函数）。 捐款 你喜欢这个项目吗？ 通过捐赠，创建问题或请求请求来支持它。 安装 插件安装分为以下几个阶段： 按F1并选择Extensions: Install Extensions 。 搜索并选择vscode-scss 。 有关详细信息，请参见。 用法 只需安装插件并使用它即可。 支持的功能 代码完成建议（变量，mixin，函数）— 悬停（变量，mixin，函数）— 签名帮助（mixins，函数）— 转到（变量，mixin，函数）— 显示文件夹中的所有所有符号定义（变量，mixin，函数）— 通过@import "filepath";导入文件@import "filepath"; 从任何地方。 即使在开放的工作空间之外。 支持vue文件scss块。 支持的设定 scss.scann
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描 这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。 扩展设置 有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-variable-scan.globalExcludePath ：SCSS扫描变量的排除路径。（默认值：“”） vue-scss-variable-scan.addCustomCssProperty ：此扩展仅支持css的某些属性，如果要支持更多属性，则可以在此设置中添加一些属性。（默认：[]）（PS：默认支持：[“背景”，“边框”，“颜色”，“宽度”，“高度”，“字体大小”，“填充”，“边距”]） vue-scss-variable-scan.excludeCssProperty ：如果您不
简单了解less
weixin_46116512的博客
08-20 245
// out: ../css/ //记得在vscode装easy less插件 // 1.单行注释快捷键ctrl+/;块注释： shirt+alt+A用户看得见，less的注释 /* 2.加减乘除,less单位不参与计算，css带单位计算,所以写一个就行，写多了， 以第一个为主，除法要带括号,（./也可以，目前vscode不支持 */ .box { // width:150px./3 ; width: (150px/3); } //3.嵌套写法，这里就不 /* 4.定义： .
less和sass的区别[简洁易懂]
weixin_62765236的博客
10-15 1万+
less和sass的区别简洁易懂
Less插值与转义
sinat_38728634的博客
07-12 538
什么是变量插值?在less中如果是属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量，如果属性名称或者选择器名称想使用变量中保存的值,那么必须使用变量插值的格式 插值写法： @color:color .box{ @{color}:red } 转义语法~中也要使用插值，字符串中也可以使用插值 @color:color @a: ~'@{color}'//@a为color...
这可能是最好、最详细的VSCode开发uni-app教程吧
std7879的博客
03-27 1万+
2022.09 更新目前，仓库已经同步uni-app官方最新cli模板，另外我还上传了vue3+vite+ts的版本，可当做示例来供来学习参考。🚀🚀🚀Github仓库地址。总的来说，配置起来还是比较麻烦的，插件也比较多，但最终获得体验也是非常不错的。因为uni-app项目跟其他前端项目差异较大，我还是比较推荐为uni-app项目单独做个VSCode工作区。对于VSCode工作区概念VSCode工作区指南：回归轻量，打造全能编辑器。或者说，为每个项目单独做一个。
vsCode注释快捷键
热门推荐
aoxuestudy的专栏
05-01 8万+
注释有两种，如果是单行注释，可以使用快捷键【ctrl】 +【 / 】来注释。 这样就能单行注释代码，样式为： // We are developers 注释错了想要取消，再按一遍即可。 如果是多行注释（块注释），那么快捷键为【Alt】+【Shift】+【A 】 样式为： /* We are developers */ 同样的再按一遍即可取消。 你也可以选择代码，使用上方菜单的【编辑】来手动注释代码。
vsCode 配置记录
山野里的小菊花
04-29 1547
1.import路径提示 安装vscode插件path-intellisense，12步骤是找到插件，34是安装好了之后点击自定义 在自定义文件中添加如下配置项 "path-intellisense.mappings": { "@": "${workspaceRoot}/devPkg" // 这里的devPkg是自己的源码路径，通常是src } 在项目根目录下...
vscode的一些实用插件：支持Vue、React、头部注释、LESS\SASS编译等（持续更新中）
lingliu0824的博客
01-09 1078
1.Vetur：Vue开发必备，支持vue语法 2.VS Code ES7 React/Redux/React-Native/JS snippets 如图所示：它支持rect及相关库的es7语法 3.Easy LESS：编辑保存时自动将less编译为css文件 4.px to rem & rpx (cssrem)：将项目中单位px转换为rem相对单位 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值