SASS 语法和基础知识：第一部分

napel29903

SASS（CSS 预处理器）的第一个实用代码示例 - 第一部分 发布于 09/14/2015 我们在之前的文章中了解了什么是SASS  ，并且我们还提到了它的主要功能，这些功能可以大大加快我们的工作速度；在本文中，我们将看到一些基本的实际示例来说明其强大功能和易用性。 SASS的主要特点是： 变量 行动 嵌套规则 函数（mixin） 文件和库的导入 让我们详细看看它们吧！ SASS中的变量 与所有编程语言一样，SASS 也以非常简单的方式管理变量：声明它们，然后在代码中使用它们。例如，假设您要创建一个具有黑色背景、Goofy 和 Pluto 类边框以及所有白色文本的网站。我们将使用的 CSS 代码如下： CSS代码 body {background:black;} * {color:white;} .pippo {border-color:white;} .pluto {border-color:white;} 如果明天我们想使用另一种颜色而不是白色，例如黄色，我们将不得不重新打开所有代码，逐行筛选并手动将白色值替换为黄色。当然，我们可以使用用于编写 CSS 的各种程序的查找和替换功能，但没有人能够向我们保证所需的结果与所需的结果相同。 使用 SASS 我们可以这样做： SCSS代码 $coloreSfondo:black; $coloreTesto:white; $coloreBordocoloreTesto; body {backgroundcoloreSfondo;} * {colorcoloreTesto;} .pippo {border-colorcoloreBordo;} .pluto {border-colorcoloreBordo;} 在实践中，我们创建了具有解释性名称的变量，为它们分配了一个初始值，并在 CSS 规则中使用该值。


当我们编译该代码时，我们将得到与上面的 CSS 文件相同的 CSS 文件。但如果明天我们 B2B电子邮件清单 想改变边框的颜色，我们只需要给出： $coloreBordo:yellow; 我们会没事的。 然后我将指出如何将另一个先前声明的变量的值分配给变量。通过这种方式，我们决定为两个不同的变量赋予相同的值，但为将来只改变一个变量而保持另一个不变留有余地 我相信，如果您不是每天编写 CSS 且从未使用过 CSS 预处理器的人，那么您一想到这种方法的潜力就会垂涎欲滴！无论是从正在进行的项目的可维护性还是在未来项目中可能重用代码的角度来看，使用变量编写的代码的便利性都是绝对的。除此之外，许多最流行的 CSS 框架也针对 SASS 发布，您就完成了。您将不再被迫使用带有临时样式表的自定义主题，您将不再被迫在代码深处搜索那个导致一切失败的值。只需根据需要更新颜色变量即可。 但事情并没有就此结束。您可以将变量用于任何其他值，例如维度、属性、值等，例如： $coloreSfondo:black; $larghezzaColonna1:300px; $opacitaAnnunci:0.8; $gradiRotazioneBloccoX:30deg; $pesoIntestazioni:bold; 等等。特别是，在维度上，还可以使用列表中的第二个特征： SASS 中的操作 SASS 还允许您将值分配给变量作为数学运算的结果。 一如既往，一个例子胜过千言万语。假设我们有一个 3 列模板，包含以下 html 和 css HTML代码 CSS代码 .contenitore {width:1080px;} .colonnaSinistra {width:200px; padding:0 20px;} .colonnaCentrale {width:560px; padding:0 20px;} .colonnaDestra {width:200px; padding:0 20px;} 任何编写代码的人都知道，一旦选择了侧栏的值，他们必须进行数学计算以获得中央栏的 560px 值。实际上，要获得它，您可以使用计算器（或在头脑中进行以下计算）：中心列=1080-200-200-6*20=560px。 如果您随后添加更改值的需要，或者因为您想要制作适合移动屏幕的版本，或者因为侧栏需要更宽，或者由于一千个其他原因，则需要完成的操作数量会急剧增加，可能的错误计算和可审查的结果。 SASS如何帮助我们？ 好吧，主要运算（和[+]、差[-]、乘积

、除法[/]和余数[%]）集成到了语言中。他会为我们做数学计算，如下所示： SCSS代码 $contenitore:1080px; $colSx:200px; $colDx:200px; $paddingColonne:20px; $colCentralecontenitore - $colSx - $colDx - 6*$paddingColonne; .contenitore {widthcontenitore;} .colonnaSinistra {widthcolSx; padding:0 $paddingColonne;} .colonnaCentrale {widthcolCentrale; padding:0 $paddingColonne;} .colonnaDestra {widthcolDx; padding:0 $paddingColonne;} 如果明天我们想将右栏的宽度从 200 像素增加到 300 像素，我们只需更改它即可 $colDx:300px; 游戏将会完成。警告：我不知道你是否注意到， - 符号前面有一个空格。请注意：如果缺少该空格，编译器将无法识别该符号 - 就像一个带有连字符的操作。它会给出一个错误。




显然，这些操作不仅在定义变量时有用，而且在代码中的任何位置都有用。仍然对于前面的示例，我们可以在不将中心列的值声明和计算为单独变量的情况下完成，以便在代码本身中动态执行此操作，如下所示： .colonnaCentrale {width:$contenitore - $colSx - $colDx - 6*$paddingColonne; padding:0 $paddingColonne;} 在这种情况下，如何利用它在一定程度上取决于个人选择。我总是更喜欢第一种情况，以便将来更容易阅读代码。我知道并理解那些使用第二个方法的人，他们选择不增加变量，以免代码过度碎片化。简单来说：我知道口味！：P 嵌套在 SASS 中的规则 SASS 中最有用和最常用的功能之一是嵌套代码。一旦你尝试了，你就离不开它，我警告你！ 它是如何工作的？ 在这里，我们也从一个例子开始，为无序列表编写一些 css CSS代码 ul.menuBottom {margin:0; padding:0; list-style:none;} ul.menuBottom li {display:inline-block; width:100px; height:20px; line-height:20px; padding:0 20px;} ul.menuBottom li a {display:block; color:red;} ul.menuBottom li a:hover {color:blue;} ul.menuBottom li.first {padding-left:0;} ul.menuBottom li.last {padding-right:0;} 正如您将注意到的，很多代码都是冗余的，并且出错的风险始终存在。使用 SASS，您可以编写如下相同的代码： SCSS代码 ul.menuBottom {margin:0; padding:0; list-style:none; li {display:inline-block; width:100px; height:20px; line-height:20px; padding:0 20px; a {display:block; color:red; &:hover {color:blue;} } &.first {padding-left:0;} &.last {padding-right:0;} } } 这样写出来的代码显然比之前的代码可读性更强，也更精简。 我希望您也注意到了&符号：它用于定义与先前嵌套相同的值。为了更好地利用嵌套，SASS 通过继承来帮助我们。 SASS 中的继承（扩展） 这个属性允许我们扩展一个类，如下所示： .classe {background:black; em, strong {color:red} } .classeBordoArancio { @extend .classe; border:1px solid red; } 在实践中，使用扩展，您可以使用类的属性，添加或修改一些属性，而不必从头开始重写所有规则。可以想象，这个功能在开发中非常有用，在维护中更是如此 今天我们就到此为止。下一篇我们将继续讨论SASS的优势：请继续关注我们！