虽然CSS可能很有趣，但是使用适当的预处理程序，比如SASS（语法上很棒的样式表）——不要和sassy混淆——会让开发人员的工作更轻松。

如果你想知道你到底为什么需要Sass，它会给你什么，请扣上安全带，因为我们将在WordPress中涵盖Sass的所有方面，并逐一介绍它的附加功能。但首先，让我们弄清楚几个定义。
什么是SASS？

基本上，Sass是一个CSS预处理器，它使CSS的编写更简洁易懂，可以解决很多问题。它是一个非常有用的工具，可以将其整合到您的项目中，使您的工作流程更快、更有条理。

在哪些情况下，WP开发人员将从Sass中获益？

WordPress开发人员必备技能之SASS：一篇文章带你了解SASS的使用教程

总之，在所有情况下。如果你想让你的代码更清晰、更容易理解，那么sassforwordpress是必不可少的。

如果你想更快地编写代码，避免在乏味的重复上花费太多时间，Sass也会帮助你。基本上，这就像是一条通向更好编码的捷径。说到捷径，别忘了看看我们的博客WordPress的68个键盘快捷键使你的整个工作流程更加高效。

Sass对于WP插件来说太多了吗？

有时候，如果你在一个小网站上工作或者只是创建一个WP插件，Sass可能有点太多了。虽然它确实在很多方面节省了你的时间，但它仍然有点过头了。

这就是说，别忘了Sass使用与CSS相同的语法，所以归根结底，它只是一个工具，为CSS添加额外的功能，不会有任何伤害，无论你的项目大小，只要为Sass做一次clsetup和配置。

SASS给CSS带来了哪些附加功能？

Sass为CSS添加了以下功能，使您的工作更轻松：

  • 变量
  • 嵌套规则
  • 部分
  • 模块
  • 混音
  • 扩展/继承
  • 操作员

这些是Sass使您的工作更轻松的附加功能。我们将在下面详细讨论每个功能：

变量

WordPress中Sass最重要的特性之一就是它允许您使用变量。这允许您定义一个值并将其存储在一个变量中，以便以后在样式文件中使用它。

所以，假设您希望在整个编码过程中使用相同的颜色或字体或任何其他CSS值。只要把它存储在一个变量中，然后随时重用它。下面是Sass与CSS中变量使用的示例：

SCSS SASS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100%$font-stack;
  color:$primary-color;
}
CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

如您所见，使用Sass，您可以在开始时定义$font stack和$primary color变量，然后在代码中使用该变量。例如，如果你在做一个项目，你应该在每一行代码中使用品牌颜色，那么使用变量将使你的工作更容易，因为你不必像在CSS中那样每次都写存储在其中的值。

嵌套规则

当您需要使代码更具可读性时，Sass也很有用。例如，在HTML中，CSS缺少一个非常清晰的可视化嵌套层次结构。使用Sass，您可以像在HTML中一样嵌套CSS选择器。下面是SASS中使用的嵌套示例：

SASS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

如你所见保险商实验室 ,锂，和一选择器嵌套在nav选择器中，这样可以使CSS代码更有条理、更干净、更易于阅读。

部分

如您所知，浏览器只读取JS、CSS和HTML语言，这意味着您最终需要将Sass代码转换为CSS，以使其与浏览器兼容。这就是编译器派上用场的地方。安装并配置Sass编译器之后，可以使用SASS在你的终端指挥

然后，您可以告诉Sass要从哪个文件构建CSS，以及在哪里输出CSS。例如，如果你跑步sass输入。scss输出.css在你的终端中，它需要一个文件输入.scss)并将其转换为CSS文件（输出.css ).

现在，在Sass中，您可以决定如何编译文件。您可以创建部分Sass文件，其中包含一些小的CSS片段，稍后可以将其包含在其他Sass文件中。

通过这种方式，您可以选择是单独编译文件，还是单独处理这些文件，然后将它们转换为单个文件。如果选择后者，则可以使用下划线来使用部分Sass文件_部分.css以你档案的名义

这个下划线告诉Sass该文件是一个较大文件的一部分，不应转换为单独的CSS文件。您可以使用@进口或@使用规则。还有一个详细说明如何@进口规则起作用

简言之，分部是在WordPress文件中组织sas并维护良好的文件体系结构的好方法。它还可以节省大量的时间来寻找合适的样式进行修改。一个有用的模式，你可以尝试遵循你的文件夹和文件是7-1模式，由雨果吉劳德尔介绍。

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

模块

当你把你的Sass分成不同的部分@使用规则，它将开始将Sass文件作为模块也就是说，您可以在基于文件名的命名空间的帮助下，在Sass文件中引用它的变量、函数和mixin。您使用的文件也将包括在输出文件中生成的CSS。

Sass
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100%$font-stack;
  color:$primary-color;
}
// styles.scss
@use'base';
.inverse {
  background-color: base.$primary-color;
  color: white;
}
CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
.inverse {
  background-color: #333;
  color: white;
}

如您所见，这使您的工作流更有组织性，因为您可以在单独的文件中定义变量，然后将它们导入到另一个Sass文件中。

混音

Sass中另一个有用的特性是mixin。CSS中有很多方面使得编写代码有点乏味。mixin通过创建一组CSS声明帮助您避免这种情况，您可以在以后的整个编码过程中重用这些CSS声明。它还可以传递某些值，以便使mixin更加灵活。mixin的一个合适的例子是供应商前缀。让我们以转型 .

Sass
@mixin transform($财产) {
  -webkit-transform:$property;
  -ms-transform:$property;
  transform:$property;
}
.box { @includetransform(rotate(30deg)); }
CSS
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

为了创建mixin，应该使用@混入指令，然后命名它。在这个例子中，我们的mixin被命名为转型还有$财产一个变量，它位于括号内，让我们传入转型或者基本上任何我们想要的东西。

创建mixin后，可以将其用作CSS声明，以@include开头，然后后跟mixin的名称。

扩展/继承

最后，Sass最有用的特性之一是@延伸。此功能可帮助您与另一个选择器共享一组CSS属性。

与@mixin不同，mixin基本上是将不同的样式复制到当前的样式规则中，@extend用于更新包含扩展选择器的样式规则，以便它们也包含扩展选择器。当Sass扩展选择器时，它将它们智能地统一起来，这意味着：

  • 它永远不会使选择器（如“main”footer）无法匹配任何元素。
  • 它将确保复杂的选择器保持交错，以便不管嵌套的HTML元素的顺序如何，它们都可以工作。
  • 它将尽可能地消除过多的选择器，但仍然确保专一性保持等于或大于扩展器的特异性。
  • 它可以判断选择器何时匹配另一个所做的所有事情，并可以将两者组合在一起。
  • 它将智能地处理组合子、伪类和包含选择器的通用选择器。

下面是来自SASS :

Sass -> CSS
.content nav.sidebar {
  @extend .info;
}
// This won't be extended, because `p` is incompatible with `nav`.
p.info {
  background-color: #dee9fc;
}
// There's no way to know whether `<div class="guide">` will be inside or
// outside `<div class="content">`, so Sass generates both to be safe.
.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}
// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
main.content .info {
  font-size: 0.8em;
}

下面是另一个示例，其中使用extend特性附带的占位符类创建了一组错误、警告和成功的消息传递。
基本上，占位符是一种特殊类型的类，只有当它被扩展时才会被打印出来。最后，你可以用一种整洁的方式编译CSS。我们来看看下面的例子：

Sass -&gt; CSS
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.message {
  @extend %message-shared;
}
 
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

那么，我们在这个例子中看到了什么？该代码告诉我们.message、.success、.error和.warning的行为应该与%message shared类似。换句话说，在您看到%message shared的任何地方，.message、.success、.error和.warning也会显示出来。在生成的CSS中，每个类将具有与共享的%消息相同的属性。最后，你不必在HTML元素上写太多的类名。

除了占位符类，尽管您可以扩展大多数简单的CSS选择器，但我们仍然建议在Sass中使用占位符，因为这是确保您要扩展的类不会嵌套在样式中的其他位置的最简单方法，这会导致CSS中出现意外的选择器。

小纸条：
%不生成等高，因为%等高永远不能扩展。

操作员

我们列表中的最后一个特性是操作符。有时候，在CSS中进行计算非常有帮助，这就是为什么Sass特性添加了许多有用的数学运算符，例如，-，*，/和%。在下面的示例中，您将找到一些简单的数学计算，以找到aside&#38;article的宽度。

SCSS SYNTAX
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
CSS OUTPUT
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

在这个例子中，我们制作了一个简单的基于960像素的流体网格。使用Sass中的操作，我们可以将像素值转换为百分比，而不需要太多麻烦。

FAQS

  • 有没有使用SASS的WordPress主题？

虽然有很多WordPress快速而好的主题，如果您使用SASS，那么最好知道主题是否也在使用SASS。事实上，有很多WordPress主题使用Sass。事实上，如果你想在WordPress中开始使用Sass，最简单的方法就是选择一个已经使用Sass的主题。这种主题的一个很好的例子就是下划线主题。以下是其他优秀Sass集成主题的列表 他们之前，您可以从中开始

  • 有没有一个WordPress的初学者主题和引导SASS和Grunt工作流？

是的，您可以检查根启动程序主题，或者您可以创建自己的启动程序主题。为此，请选择下划线中的sassify。我，这是一个新功能。您也可以检查 Bones–HTML5 WordPress入门主题 .

  • 在我的WordPress网站上哪里可以找到SASS文件夹？

没有单独的文件夹可以将所有Sass文件保存在一个位置。每个项目都有单独的Sass文件夹。

  • 如何将SASS与CI集成？

如果您的项目没有使用外部构建工具，您可以编译本地的，然后将编译后的CSS向上推送。您可以使用Gulp编译scs。你也可以在你的初学者主题中使用Webpack Mix，这比Webpack更容易设置。您还可以将Sass编译器集成到CI和版本控制系统中，以便在每次推送期间将Sass编译为css

简言之，尽管CSS拥有创建一个令人惊叹的网站所需的一切，但是使用CSS预处理器（如Sass）将使创建过程变得更加简单和无需麻烦。sassforwordpress允许开发人员使用一系列有用的特性，如变量、嵌套规则、mixin、模块、部分、扩展/继承和运算符，从而使CSS更加强大。最后，它将编译您的代码并提供一个CSS输出，以便浏览器能够阅读它。