什么是Sass?_sass是什么意思-程序员宅基地

技术标签: Sass  sass  

Sass 是 Syntactically Awesome Stylesheets 的简写,是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

什么是Sass

Sass 是一个将脚本解析成 CSS 的脚本语言(SassScript),也是一款 CSS 预处理器,它减少了 CSS 的重复,也因此节省了时间。Sass 是最早的 CSS 预处理语言,有比 Less 更强大的功能。Sass 扩展了 CSS3,增加了规则、变量、混入选择器、继承等特性。

什么是 CSS 预处理器

我们知道了 Sass 是 CSS 的预处理器,那么什么是预处理器呢?CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。也就是说,CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。

Sass的特色功能
  • Sass 完全兼容所有版本的 CSS。
  • Sass 拥有比其他任何 CSS 扩展语言更多的功能和特性,例如增加了变量、嵌套、混合等功能。
  • 通过函数进行颜色值与属性值的运算。
  • 提供了控制指令(control directives)。
  • 自定义输出格式。
语法格式

Sass 语言有两种语法格式:

  • 最开始的语法叫做缩进语法(Indented Sass),通常简称为Sass,是一种简化格式。它使用缩进来代替花括号 {} ,表示属性属于某个选择器。用换行代替分号分隔属性。

  • 另一种语法是 SCSS(Sassy CSS),这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能。

这两种语法格式,任何一种格式都可以直接通过 @import 导入到另一种格式中使用,或者通过 sass-convert 命令行工具转换成另一种格式:

// Sass转为SCSS
$ sass-convert style.sass style.scss

// SCSS转为Sass
$ sass-convert style.scss style.sass
Sass特性
  • 变量:Sass 中支持定义变量,变量以美元符号 $ 作为开头,然后通过冒号 : 赋值。变量支持四种数据类型,分别为字符串、数值、布尔类型、颜色值。
  • 嵌套(Nesting):SCSS 支持嵌套并且支持代码块的嵌套,它可以清晰的表示元素之间的关系。
  • 导入(@import):Sass 支持 @import 指令,该指令允许我们将一个文件的内容导入到另一个文件中。该指令包含 CSS 文件,因此不需要额外的调用 HTTP,而由于性能问题,CSS 指令每次调用都会创建一个额外的HTTP,在这里 Sass 就没有这样的问题。
  • 混入(mixin):Sass 中可以使用 @mixin 来声明混合,混合中包含一段合法 Sass 代码,类似于 C 语言的宏定义,解释器在调用混合时会将它扩展成它所包含的完整 Sass 代码,可以有效的减少代码重复,从而写出的代码更加干净简洁。
  • 继承(@extend):该指令允许我们将一组 CSS 属性从一个选择器共享到另一个选择器。

链接:https://www.9xkd.com/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ivenqin/article/details/117001059

智能推荐

浅谈web服务_关于wed服务的文章-程序员宅基地

文章浏览阅读1.3k次,点赞3次,收藏11次。转自:微点阅读 https://www.weidianyuedu.com/content/5517339261757.html简单的说Web就是为用户提供的一种在互联网上浏览信息的服务,Web服务是动态的、可交互的、跨平台的和图形化的。Web服务为用户打开了一扇获取互联网服务的大门,这些服务不仅仅包括信息浏览服务,也包括各种交互式服务,包括聊天、购物、学习等等内容,可以说Web的出现释放了互联网巨大的力量。Web应用开发也经过了几代技术的不断发展,目前Web开发依然是最重要的开发内容之一.._关于wed服务的文章

怎样备份iOS已安装、已下架App的IPA文件?_备份的小说安装包显示已下架提取不了-程序员宅基地

文章浏览阅读7k次,点赞5次,收藏18次。一次备份,永久安装~_备份的小说安装包显示已下架提取不了

js入门学习~ 运动应用小例-程序员宅基地

文章浏览阅读81次。要实现的效果如下:鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~(且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 -----------------------------------------..._js运动应用

overleaf页码_Overleaf—使用教程-致谢原作者-程序员宅基地

文章浏览阅读6.6k次,点赞3次,收藏36次。原文引自:https://blog.csdn.net/gentleman_qin/article/details/79963396向作者致敬,感谢。前言:本文是笔者在学习LaTeX的记录文档,主要是一些常用命令,发至博客分享给大家,笔者的感受是熟悉这些常用命令后即可上手编辑简单的论文,效率很高,体验比word好很多。希望本文能够对LaTeX的初学者有所帮助,有任何问题可以在评论区留言,笔者写的一个..._overleaf参考文献的引用页码

【代码提取】提取一个文件夹里面的所有Java文件的类名函数名和变量名_从一个文件总提取出全部的函数或方法 java-程序员宅基地

文章浏览阅读4k次。用C++提取Java文件中的类名,函数名和变量名。_从一个文件总提取出全部的函数或方法 java

SQL注入语义分析库libinjection-程序员宅基地

文章浏览阅读929次。libinjection是一款用于防御SQL注入攻击的开源软件库。它是由C语言编写的,可以嵌入到任何Web应用程序中,并可以较为准确地检测和防止恶意SQL注入语句。libinjection采用了基于正则表达式的技术来识别和拦截SQL注入攻击,同时其开放源代码的特点也使得其具备了较高的可定制性和扩展性。_libinjection

随便推点

ONNX转TensorRT加速模型推理-程序员宅基地

文章浏览阅读7.8k次,点赞10次,收藏91次。前言TensorRT是NVIDIA推出的一款高效深度学习模型推理框架,其包括了深度学习推理优化器和运行时,能够让深度学习推理应用拥有低时延和高吞吐的优点。本质上来讲,就是通过采用对模型中的部分算子进行融合、对特定尺寸的算子选用更好的实现方法,以及使用混合精度等方式,最终加速整个网络的推理速度。在使用PyTorch训练得到网络模型后,我们希望在模型部署时通过TensorRT加速模型推理,那么可以先将PyTorch模型转为ONNX,然后再讲ONNX转为TensorRT的engine。实现步骤PyT_onnx转tensorrt

最大子矩阵(动态规划c++)-程序员宅基地

文章浏览阅读6.4k次,点赞27次,收藏75次。题目:已知矩阵的大小定义为矩阵中所有元素的和。给定一个矩阵,你的任务是找到最大的非空(大小至少是1 × 1)子矩阵。比如,如下4 × 4的矩阵0 -2 -7 09 2 -6 2-4 1 -4 1-1 8 0 -2的最大子矩阵是9 2-4 1-1 8这个子矩阵的大小是15。【输入】输入是一个N×N的矩阵。输入的第一行给出N(0<N≤100)。再后面的若干行中,依次(首先从左到右给出第一行的N个整数,再从左到右给出第二行的N个整数……)给出矩阵中的N2个整数,整数_最大子矩阵

Ubuntu和Windows双系统连接罗技蓝牙键盘_ubuntu 链接 罗技蓝牙键盘-程序员宅基地

文章浏览阅读1.2w次,点赞10次,收藏53次。后记: 写完这篇文章后又先后重新连接过两次, 每次都会下意识担心, 完了完了这次可能再也连不上了(想起当初一直连不上双系统,被蓝牙键盘支配的日日夜夜), 结果我按着自己写的这篇文章来搞, 还不是每次都成功了hh.一、参考文献为了方便查阅,先列出参考文献。这些文章中有的内容已经过时,有的是配置的环境不一样。1.Ubuntu和Windows双系统蓝牙键盘配对——20142.Ubunt..._ubuntu 链接 罗技蓝牙键盘

django 中间件-程序员宅基地

文章浏览阅读88次。目录 django 中间件 自定义中间件 自定义一个中间件示例 process_request process_response process_view process_exception process_template..._django中间件中如何要向其中response添加一个字段

redis的基本命令,并用netty操作redis(不使用springboot或者spring框架)就单纯的用netty搞。_redis连接 netty-transport-native-epoll-程序员宅基地

文章浏览阅读466次。redis的基本命令,并用netty操作redis(不使用springboot或者spring框架)就单纯的用netty搞。大家如果对使用netty搞这些http请求什么的感兴趣的,可以参观我自己创建的这个项目。Redis的基本命令包括:SET key value:设置指定key的值。GET key:获取指定key的值。DEL key:删除指定key。EXISTS key:检查指定key是否存在。TTL key:获取指定key的过期时间。KEYS pattern:查找所有符合指定模式的_redis连接 netty-transport-native-epoll

springboot集成shiro的密码加密功能(MD5+salt)和登录验证功能_the salt used when hashing the given hashedcredent-程序员宅基地

文章浏览阅读4.9k次,点赞3次,收藏19次。1.先写一个shiro的密码生成工具package com.learning.www.shiro.config;import org.apache.shiro.crypto.hash.SimpleHash;public class ShiroEncryption { /*** * 对用户的密码进行MD5加密 * 做成工具类 */ public static Str..._the salt used when hashing the given hashedcredentials