什么是 Sass 其与SCSS区别是什么?
2024-08-26 09:09:02
Sass 官网上是这样描述 Sass 的:
Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
Sass 前世今生:
Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。
Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。
为什么早期不如 LESS 普及?
虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。
Sass 和 SCSS 有什么区别?
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
先来看一个示例:
Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量 body
font: 100% $font-stack
color: $primary-color
SCSS 语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333; body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
最新文章
- 每天一个linux命令(25):linux文件属性详解
- SharePoint 2010 文档管理之点击次数
- axis2 WebService的发布与调用
- sql 百万级数据库优化方案
- 精简android4.2
- java post 请求
- 阿里巴巴的分布式应用框架-dubbo负载均衡策略--- 一致哈希算法
- jquery 简单的栏目切换
- 关于MATLAB处理大数据坐标文件2017530
- Dynamics 365 for CRM: Sitemap站点图的可视化编辑功能
- node koa2 玩起来都是中间件啊
- DataBase——Mysql的DataHelper
- MySQL:数据库表的空间回收
- Redis主从数据库同步
- sql行转列实例
- SQLSERVER 导出表数据为insert 语句
- [LeetCode] 278. First Bad Version_Easy tag: Binary Search
- 超详细Redis数据库入门教程
- iOS 工程自动化 - OCLint
- linux ftp 简单搭建