关于scss的使用

本文详细介绍了SCSS和SASS两种CSS预处理器的语法区别,重点讲解了SCSS作为SASS3引入的新语法,如何完全兼容CSS3并继承SASS的强大功能。同时,文章还强调了文件引用的顺序在预处理器中的重要性。

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

参看:https://www.jianshu.com/p/fa379a309c8a

注意事项:

1.如果使用sass旧语法(sass语法),文件后缀名应为“.sass”;如果使用sass新语法(scss语法),文件后缀名应为".scss“语法,否则编译时编译不出来

2.导入scss文件时要注意导入的顺序:

如下图:

 

不能在 config.scss文件中引用modal.scss文件中的内容(如变量,函数),但是modal.scss文件却可以引用reset.scss,mixin.scss,config.scss文件中的内容,即注意文件引用内容的位置顺序,只可向前引用,不能向后引用。

 

SCSS

  SCSS的全称是Sassy CSS(时髦的CSS),是SASS3引入的新语法,其语法完全兼容CSS3,并且继承了SASS的强大功能,也就是说,任何标准的CSS3样式表是具有相同语义的、有效的SCSS文件。官方网站同SASS。

  由于SCSS是CSS的扩展,因此所有在CSS中正常工作的代码也能在SCSS中正常工作。也就是说,对于一个SASS的用户,只需要理解SASS扩展部分如何工作的,就能完全理解SCSS。

  大部分的用法都与SASS相同。唯一不同的就是SCSS需要使用分号和大括号。SCSS可以说是完全取代了SASS

 

 Less、Sass和stylus都是比较流行的CSS预处理器, 功能差不多,写法相差不大(但是还是有差别),使用都非常简单,stylus是没有大括号({})和分号(;)的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值