跳到主要内容

什么是萨斯?

如果您是网页设计的新手,您可能听说过“Sass”这个词。如果您不确定Sass的作用以及您是否应该使用它,我们将帮助您完成Sass指南。

简而言之,萨斯是一个CSS预处理器,它将特殊功能(如变量,嵌套规则和mixins(有时称为语法糖))添加到常规CSS中。目的是使编码过程更简单,更有效。让我们更详细地探讨一下。

什么是CSS预处理器?

CSS预处理器是一种脚本语言,它通过允许开发人员用一种语言编写代码然后将其编译成CSS来扩展CSS。 Sass可能是最受欢迎的预处理器,但其他常见的例子包括唱针

在我们进一步讨论之前,我觉得快速的公共服务公告是有序的:如果你是CSS的新手,我不建议使用任何预处理器(如Sass)。任何其他扩展或框架也是如此。虽然它们确实在速度和效率方面提供了许多优势,但是首先要了解CSS的基础知识更为重要。在开始探索快捷方式之前,请确保了解核心概念。

什么是萨斯?

sass

Sass可以说是所有CSS扩展中最有用的

Sass(Syntactically Awesome Style Sheets)是CSS的扩展,它允许您使用变量,嵌套规则,内联导入等内容。它还有助于保持组织有序,并允许您更快地创建样式表。

Sass与所有版本的CSS兼容。使用它的唯一要求是必须安装Ruby。用户也被要求遵循Sass社区准则

如何使用Sass

在下一节中,我将使用Sass官方网站上的示例概述使用Sass的一些基本技巧。看看吧Sass文档有关其他参考和示例。

句法

Sass包含两个语法选项:

  • SCSS(Sassy CSS):使用.scss文件扩展名,完全符合CSS语法
  • 缩进(简称为'Sass'):用途.sass文件扩展名和缩进而不是括号;它不完全符合CSS语法,但编写起来更快

请注意,可以使用以下文件将文件从一种语法转换为另一种语法上海社会科学院,转换命令。

变量

与其他编程语言一样,Sass允许使用可存储可在整个样式表中使用的信息的变量。例如,您可以将颜色值存储在文件顶部的变量中,然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色,而无需单独修改每一行。

例如:

$ font-stack:Helvetica,sans-serif; $ primary-color:#333; body {font:100%$ font-stack;颜色:$ primary-color; }

将生成以下CSS:

body {font:100%Helvetica,sans-serif;颜色:#333; }

嵌套

嵌套是一把双刃剑。虽然它提供了一种减少您需要编写的代码量的绝佳方法,但如果不仔细执行它也会导致过度限定的CSS。我们的想法是以模仿HTML层次结构的方式嵌套CSS选择器。

以下显示了使用嵌套的基本导航样式:

nav {ul {margin:0;填充:0; list-style:none; } li {display:inline-block;一个{display:block;填充:6px 12px; text-decoration:none; }}

CSS输出如下:

nav ul {margin:0;填充:0; list-style:none; } nav li {display:inline-block;导航一个{display:block;填充:6px 12px; text-decoration:none; }

谐音

Partials是较小的Sass文件,可以导入(参见下一节)到其他Sass文件中。将partials视为代码片段。使用这些代码片段,您的CSS现在可以模块化并且更易于维护。通过使用前导下划线命名部分来指定部分:_partial.scss

进口

与Partials一起使用(参见上一节),@进口指令允许您将部分文件导入当前文件,以构建一个单独的CSS文件。请注意将为每个导入生成多少作为HTTP请求使用的导入。

// _reset.scss html,body,ul,ol {margin:0;填充:0; }
// basefile.scss @import'reset'; body {font:100%Helvetica,sans-serif; background-color:#efefef; }

和相应的CSS输出:

html,body,ul,ol {margin:0;填充:0; } body {font:100%Helvetica,sans-serif; background-color:#efefef; }

注意:导入部分时,您不需要包含文件扩展名或下划线。

混入

使用预处理器的一个优点是能够采用复杂,冗长的代码并简化它。这就是mixins派上用场的地方!

例如,如果您需要包含供应商前缀,则可以使用mixin。看看这个例子边界半径

@mixin border-radius($ radius){ -  webkit-border-radius:$ radius; -moz-border-radius:$ radius; -ms-border-radius:$ radius; border-radius:$ radius; } .box {@include border-radius(10px); }

请注意@mixin指令在顶部。它已被赋予名称边界半径并使用变量$半径作为其参数。此变量用于设置每个元素的半径值。

后来了@包括调用指令以及mixin名称(边界半径)和一个参数(10px的)。从而.box {@include border-radius(10px); }

生成以下CSS:

.box {-webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; border-radius:10px; }

扩展/继承

@延伸该指令被称为Sass最强大的功能之一。看到它在行动之后,很明显为什么。

我们的想法是,使用此指令,您不必在HTML元素上包含多个类名,并且可以保留您的代码。您的选择器可以继承其他选择器的样式,然后在需要时轻松扩展。现在这很强大。

运营商

能够在CSS中执行计算允许您执行更多操作,例如将像素值转换为百分比。您可以访问标准数学函数,如加法,减法,乘法和除法。当然,可以组合这些功能来创建复杂的计算。

此外,Sass还包括一些内置功能帮助操纵数字。功能如百分比()地板()回合()仅举几例。

阅读更多:



翻译字数超限