CSS预处理器是制作更清晰和可维护代码的强大工具。 处理成千上万行CSS,使您浪费大量时间,冗余代码以及结构化代码的困难。
预处理器可以帮助我们处理这些事情,它比CSS有一些优势。
![](https://i-blog.csdnimg.cn/blog_migrate/e01d97f35890a6646420d2f9ea149db8.png)
什么是CSS预处理程序?
一种脚本语言,可扩展CSS并将其编译为常规CSS语法。
为什么要用一个?
- 带有可重复使用部分的更干净的代码
- 随时随地做事的灵活性更高
- 共享片段和库
- 轻松生成可在浏览器中使用的CSS
有多个预处理器,例如Sass,Less和Stylus。 在这里,我将解释Sass的好处
什么是萨斯?
Sass是最常用的CSS预处理器之一。 它具有多种功能,可帮助您编写更好,更简洁的CSS代码。 您可以在Sass网站上查看详细信息安装Sass
Sass是用Ruby创建的,因此我们必须首先在操作系统中安装它。
Mac OS X
对于Mac,它非常简单,因为它已经安装了Ruby解释器。 我们只需要打开一个终端窗口(terminal.app)
安装稳定的红宝石宝石:
# Command line $ sudo gem install compass
视窗
我们必须首先安装Ruby。 您可以在这里找到它https://rubyinstaller.org/downloads/
您可以检查您的版本或红宝石文字:
# Command line $ ruby -v
之后,您以管理员模式打开Windows命令模式窗口以安装gem。
# Command Line $ gem install sass
如果要检查版本:
# Command Line $ sass -v
以CSS格式编译文件
浏览器无法直接解释我们的.scss和.sass文件,因此必须将其转换为CSS扩展名。 我们可以使用不同的形式:
我们可以在操作系统中安装不同的程序和扩展:
Windows和Mac:LiveReload监视文件系统中的更改。 保存文件后,将根据需要对其进行预处理,然后刷新浏览器。
更酷的是,当您更改CSS文件或图像时,浏览器会立即更新,而无需重新加载页面。
Visual Studio扩展:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
另外,我们可以在命令行中使用如下语法:
# Command Line $ sass --watch filename.scss:filename.css
特征
变数
您可以像下面这样在sass文件中声明变量以供下一步使用:
@import和模块化
Sass有一个非常有用的指令,它允许将其他文件合并到样式表中,例如可以通过创建和导入定义了所有变量的文件(例如,所需的所有颜色值)来完成。 所导入文件的信息就好像是源代码的一部分一样被使用。 这样可以保持样式表的清晰度。 使用@import可以导入任意数量的文件,甚至可以从子目录中导入。
您可以一步导入几个文件并使用模块的变量:
混合蛋白
Mixins是将CSS声明组合在一起的Sass函数。 我们以后可以像变量一样重用它们。
创建mixin之后,我们可以使用@ include命令在任何类中使用它。
套料
Sass允许嵌套CSS规则,以便样式表更简洁和更容易编写。 所有更高级别的选择器都将自动作为嵌套选择器的前缀。 例:
先前的Sass代码将自动转换为以下CSS代码:
结论
这些是Sass的一些最重要的功能,它们可以帮助我们编写更清晰易读的CSS代码。 希望本文能使您对SCSS / SASS有所了解。 如有任何疑问,请将其张贴在评论中。
From: https://hackernoon.com/the-power-of-preprocessorssass-pq3x3430