预处理器的功能（无礼）

CSS预处理器是制作更清晰和可维护代码的强大工具。 处理成千上万行CSS，使您浪费大量时间，冗余代码以及结构化代码的困难。

预处理器可以帮助我们处理这些事情，它比CSS有一些优势。

什么是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