scss和sass的区别，scss的基本使用

最新推荐文章于 2024-07-28 08:21:12 发布
最新推荐文章于 2024-07-28 08:21:12 发布
阅读量2.8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51608296/article/details/117155280
版权
本文介绍了SCSS（Sass）与Sass的关系，SCSS是Sass 3引入的新语法，后缀分别为.sass和.scss。文章讨论了两者的主要差异，SCSS的编写规范更接近CSS。此外，还讲解了SCSS的变量使用方法，包括变量声明、变量范围和嵌套语法，提供了实例展示如何在实际项目中应用。
摘要由CSDN通过智能技术生成

scss的官方文档     https://www.sass.hk/

 

sass和scss有什么关系？

1、sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。

2、SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

3、两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。

为了方便应用scss，我们可以在vscode中安装一个名为easy sass 的插件，但是我们只在该项目中工作区中应用该插件，因为在项目中，不需要该插件的辅助，所以将插件启动在工作区就ok了

 

scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名

sass使用方法：

首先我们新建一个文件夹test，然后我们在test下新建一个index.html，并新建一个test.scss<

最低0.47元/天 解锁文章
tang0109
关注
sass和 scss的区别？
祈澈菇凉
10-25 437
Sass（Syntactically Awesome Style Sheets）和 SCSS（Sassy CSS）是两种流行的 CSS 预处理器，它们扩展了普通的 CSS 语法，提供了更多的功能和便利性。
sass和scss 有何区别？
金木编程
09-03 1380
总的来说，Sass 和 SCSS 都是强大的工具，可以帮助你更有效地管理和组织 CSS 代码。无论哪种语法，它们都提供了变量、嵌套、混合（mixins）等功能，可以大大改善 CSS 的可维护性和可重用性。SCSS 更加兼容传统的 CSS 语法，这意味着你可以逐渐迁移现有的 CSS 代码到 SCSS，而不需要进行大规模的重写。由于 SCSS 的语法更接近于 CSS，因此它更容易学习和使用，尤其是对于那些已经熟悉 CSS 的开发者。目前，SCSS 更受欢迎，更广泛地使用，因为它更容易学习和集成到现有项目中。
CSS和SCSS的相同点和不同点！
最新发布
chenghao13834505361的博客
07-28 218
CSS和SCSS的相同点和不同点！
Sass 和 SCSS 有什么区别？
王文强
10-17 692
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 先来看一个示例： Sa
Sass和SCSS有什么区别？
web工程师——小发发
08-25 906
Sass和SCSS其实是同一种东西，我们平时称之为Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass是以“.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名 语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（;），而SCSS的语法书写和我们的CSS语法书写方法非常类似。 Sass语法 $font-stack:Helvetica,sans-serif //定义变量 $primary-color:#eee //定义变量 html f
Scss 与 Sass 是什么,他们的区别在哪里？
weixin_33827965的博客
10-12 330
转载自：http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里，我们不过不先从他们各自的定义说起。 Sass是什么 Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提...
vue安装和使用scss及sass与scss的区别详解
10-17
SCSS 和 SASS 的主要区别在于其语法表示。SASS 使用缩进来表示嵌套关系，而 SCSS 使用花括号。例如： ```scss // SASS .father width: 100px; .son width: 50px; // SCSS .father { width: 100px; .son { ...
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
在 Vue-cli V3.0 中使用 SCSS/SASS 的方法 在 Vue-cli V3.0 中使用 SCSS/SASS 是一个非常重要的知识点，下面我们将详细介绍如何在 Vue-cli V3.0 中使用 SCSS/SASS。 首先，在使用 Vue-cli 生成项目时，需要勾选 ...
Css到SCSS或SASS转换器「Css to SCSS or SASS Converter」-crx插件
03-09
将CSS转换为SASS或SCSS的简单而有用的扩展 这是一个简单但有用的扩展，将CSS直接从DevTools转换为Sass或SCSS。 当您在DevTools中编写小型css代码段时需要将它放在sass / scss文件中。 该选项卡位于“元素”的右侧，...
SCSS 和 Sass 有什么区别？
kalman2019的博客
01-07 2877
从我一直在阅读的内容来看，Sass 是一种通过变量和数学支持使 CSS 更强大的语言。与 SCSS 有什么区别？它应该是同一种语言吗？相似的？不同的？
Sass和Scss的区别
m0_49471668的博客
08-03 1920
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：Sass是以".sass"后缀为扩展名，Scss是以scss后缀为扩展名Sass是以严格的缩进式语法规则书写，不带{}和分号Scss语法属性和css语法书写方式非常类似，带大括号和分号。...
sass scss区别
一份耕耘 一份收货
05-25 708
rrom:    http://sass.bootcss.com/docs/scss-for-sass-users/ SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特
Sass 其与SCSS区别
feiyang094的专栏
02-16 769
Sass 官网上是这样描述 Sass 的： Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。 Sass 前世今生： Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课
Sass 和 SCSS
热门推荐
qq_45947664的博客
11-14 1万+
▣Sass (Syntactically Awesome StyleSheets)，是由编写的一款，和html一样有，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。Sass 是一款强化 CSS 的辅助工具，是对，它在 CSS 语法的基础上增加了(mixins)、(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
SCSS和Sass有什么区别？
p15097962069的博客
12-29 660
根据我的阅读，Sass是一种语言，它通过变量和数学支持使CSS更加强大。 SCSS有什么区别？ 是否应该使用相同的语言？ 类似？ 不同？
Sass 与 Scss
Jana Jing的分享
11-02 3522
Sass(Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。Sass是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports)等高级功能，这些拓展令 CS...
sass与scss的区别
艾丽的博客
01-06 863
学习网址 https://www.qikegu.com/docs/2541 link 相同点 二者都是CSS预处理器 区别 SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同 Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同 Sass 是以严格的缩进式语法规则来书写，不带大括号({})和
sass中国教程摘抄
Joyce的前端日常
07-06 723
1.使用变量 1-1.变量声明 $highlight-color: #F90; 与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。 1.2.变量引用 $highlight-color: #F90; .selected {   border: 1px solid $highlight-colo
scss,sass,less使用方法和区别
05-30
Sass、Scss和Less都是CSS预处理器，它们的使用方法和功能类似，但是有一些不同之处。 使用方法： - Sass：采用缩进式的语法，文件扩展名为".sass"，需要依赖Ruby环境，可以通过编译器将Sass文件编译成CSS文件。 - Scss：采用类似于CSS的花括号和分号的语法，文件扩展名为".scss"，需要依赖Ruby环境，可以通过编译器将Scss文件编译成CSS文件。 - Less：采用类似于CSS的语法，文件扩展名为".less"，需要依赖JavaScript环境，可以通过编译器将Less文件编译成CSS文件。 区别： - 语法不同：Sass采用缩进式的语法，而Scss和Less采用类似于CSS的语法。 - 变量符号不同：Sass使用"$"作为变量符号，而Scss和Less使用"@"作为变量符号。 - 导入方式不同：Sass使用"@"符号进行导入，而Scss使用"@import"进行导入，Less使用"import"进行导入。 - 兼容性不同：Sass、Scss和Less都能够编译成CSS文件，但是在浏览器中使用时，需要考虑浏览器的兼容性问题，其中Less的兼容性相对较好。 总之，Sass、Scss和Less都是非常实用的CSS预处理器，可以提高CSS的开发效率和代码质量。开发者可以根据自己的需求和喜好选择其中一种来使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值