WordPress开发者的SASS:这是你必须知道的一切

Wordpress大师

虽然CSS很有趣，但是使用像SASS（语法很棒的样式表）这样的适当的预处理器——不要与时髦相混淆——会使开发人员的工作更容易。如果你想知道为什么你需要Sass，它会给你什么，请系好安全带，因为我们将涵盖WordPress中Sass的所有方面，并逐一介绍它的新增功能。但首先，让我们弄清楚一些定义。Sass是什么?基本上，Sass是一个CSS预处理器，它使CSS的编写更整洁，更容易理解，并且可以解决很多问题。它是一个非常有用的工具，可以合并到您的项目中，使您的工作流程更快、更好地组织起来。



在哪些情况下WP开发者可以从Sass

“ Sass“为CSS增加了什么东西

变量

嵌套规则

Partials

Modules

Mixins

Extends/inheritance

Operators

FAQs

那么，从基础开始:



在哪些情况下WP开发者可以从Sass中受益?

  

总之，在所有的情况下。如果你想让你的代码更简洁，更容易理解，Sass for WordPress是必不可少的。如果您想更快地编写代码，避免在繁琐的重复上花费太多时间，Sass可以再次提供帮助。基本上，它就像一个更好的编码的捷径。说到快捷键，别忘了看看我们的博客，关于WordPress的68个键盘快捷键，让你的整个工作流程更高效。Sass对于WP插件来说是不是太多了?有时候，如果你在做一个小网站，或者只是创建一个WP插件，Sass可能有点太多了。虽然它确实在很多方面节省了你的时间，但它仍然有点多余。话虽如此，不要忘记Sass使用与CSS相同的语法，所以在一天结束时，它只是一个为CSS添加额外功能的工具，不会有任何伤害，无论您的项目大小，只需为Sass做一次clsetup和配置。SASS给CSS增加了什么东西?变量嵌套规则局部模块Mixins扩展/继承操作符

这些是Sass使你的工作更容易的新增功能。下面我们将更详细地讨论每个特性:

“变量”“Sass”在WordPress中最重要的特性之一是它允许你使用变量。这允许您定义一个值并将其存储在一个变量中，以便稍后在Style文件中使用它。虽然它是一个简单的工具，但有了它可以极大地促进您的工作流程。所以，假设你想在整个编码过程中使用相同的颜色、字体或任何其他CSS值。只需将它存储在一个变量中，然后在需要的时候重用它。记住，SASS对变量使用$符号。下面是Sass和CSS中变量使用的一个例子:SCSS SASS $ font-stack: Helvetica,无衬线;美元的原色:# 333; 身体{字体:100% font-stack美元;颜色:美元的原色;｝ CSS 身体{字体:100% Helvetica, sans-serif;颜色:# 333;｝ 正如您所看到的，使用Sass，您可以在开始时定义$font-stack和$primary-color变量，然后在整个代码中使用该变量。例如，如果您正在做一个项目，需要在代码的每两行中使用品牌颜色，那么使用该变量将使您的工作更容易，因为您不必像在CSS中那样每次都要写入存储在其中的值。当你需要让你的代码更容易读的时候，Sass也会派上用场。例如，在HTML中，有一个非常清晰的视觉嵌套层次结构，这是CSS所缺乏的。使用Sass，您可以像在HTML中一样嵌套CSS选择器。下面是SASS中使用的嵌套示例:

SASS nav {ul {保证金:0;填充:0;list-style:没有;｝ Li {display: inline-block;｝ 一个{显示:块;填充:6 px 12 px;文字修饰:没有;｝｝ CSSnav ul {保证金:0;填充:0;list-style:没有;｝李nav {显示:inline-block;｝资产净值一个{显示:块;填充:6 px 12 px;文字修饰:没有;｝ 如你所见，ul、li和选择器嵌套在导航选择器中，这使你的CSS代码更有条理、更干净、更容易阅读。如你所知，浏览器只能读取JS、CSS和HTML语言，这意味着最终你需要将你的Sass代码转换成CSS，以使其与浏览器兼容。这就是编译器派上用场的地方。一旦安装和配置了Sass编译器，就可以在终端中使用Sass命令将Sass转换为CSS。然后你可以告诉你的Sass你想从哪个文件构建和输出你的CSS。例如，如果运行sass输入。scss output.css在你的终端，它将获取一个单一的文件（input.scss），并将其转换为一个CSS文件（output.css）。现在，在Sass中，您可以决定如何编译您的文件。您可以创建部分Sass文件，其中包含CSS的小片段，稍后可以将其包含到其他Sass文件中。



通过这种方式，您可以选择是单独编译文件，还是单独处理它们，然后将它们转换为单个文件。如果选择后者，可以在文件名称中使用下划线_partial.css来使用部分Sass文件。

这个下划线告诉Sass这个文件是一个更大文件的一部分，不应该变成一个单独的CSS文件。您可以使用@import或@use规则使用部分Sass文件。下面是关于@import规则如何工作的更详细的解释。简而言之，部分是在WordPress文件中组织Sass并保持良好文件架构的好方法。这也为你节省了大量的时间去寻找合适的样式来修改。一个你可以尝试遵循的文件夹和文件的有用模式是Hugo Giraudel介绍的7-1模式。sass /|| -抽象/| | - _variables。Sass变量| | - _functions。Sass函数| | - _mixins。Sass Mixins| | - _placeholders。Sass占位符|| -基地/| | - _reset。scss # 重置/正常化| | - _typography。字体规则|…|| -组件/| | - _buttons。scss #按钮| | - _carousel。scss #旋转木马| | - _cover。scss # 封面| | - _dropdown。scss #下拉|…|| -布局/| | - _navigation。scss #导航| | - _grid。网格系统| | - _header。scss #头| | - _footer。scss #页脚| | - _sidebar。scss #侧边栏| | - _forms。scss # 形式|…|| -页/| | - _home。scss #家庭特定风格| | - _contact。联系具体的样式|…|| -主题/| | - _theme。默认主题| | - _admin。scss #管理主题|…|| -供应商/| | - _bootstrap。scss #引导| | - _jquery-ui。jQuery UI|…|”——主要。Sass主文件现在，当你使用@use规则将你的Sass分成不同的部分时，它将开始将Sass文件作为模块加载。也就是说，你可以在Sass文件中引用它的变量、函数和mixin，而命名空间是基于你的文件名的。您使用的Тhe文件还将包括输出文件中生成的CSS。

萨斯/ / _base.scss$ font-stack: Helvetica,无衬线;美元的原色:# 333; 身体{字体:100% font-stack美元;颜色:美元的原色;｝ / / styles.scss@use“基地”; .inverse {background - color:基地。美元的原色;颜色:白色;｝ CSS身体{字体:100% Helvetica, sans-serif;颜色:# 333;｝ .inverse {background - color: # 333;颜色:白色;｝如您所见，这使您的工作流程更有条理，因为您可以在单独的文件中定义变量，然后将它们导入到不同的Sass文件中。Sass中另一个有用的特性是Mixins。CSS中有很多方面使得代码编写有点乏味。mixin通过创建一组CSS声明来帮助您避免这种情况，稍后您可以在整个编码过程中重用这些声明。为了使mixin更加灵活，还可以传入特定的值。一个合适使用mixin的例子是供应商前缀。让我们以变换为例。

萨斯@mixin变换（财产美元）{-webkit-transform: $财产;-ms-transform: $财产;变换:$财产;｝.box {@include transform（旋转（30度））;｝ CSS.box {-webkit-transform:旋转（30度）;-ms-transform:旋转（30度）;变换:旋转（30度）;｝为了创建一个mixin，你应该使用@mixin指令，然后给它命名。在本例中，我们的mixin命名为transform。还有一个$property变量，它在括号内，它让我们传递一个转换或其他我们想要的东西。



一旦你的mixin被创建，你就可以使用它作为一个CSS声明，它以@include开头，然后跟在mixin的名字后面。最后，Sass最有用的特性之一是@extend。这个特性帮助您与另一个选择器共享一组CSS属性。@extend与@mixin不同，它基本上是将不同的样式复制到当前的样式规则中，@extend用于更新包含扩展选择器的样式规则，使它们也包含扩展选择器。当Sass扩展选择器时，它会智能地统一它们，意思是:。它永远不会创建#main#footer这样的选择器，因为它不能匹配任何元素。它将确保复杂的选择器保持交错，这样无论嵌套HTML元素的顺序如何，它们都可以工作。它将尽可能地去除过多的选择器，但仍然确保特异性保持等于或大于扩展器的特异性。它可以告诉选择器什么时候匹配其他选择器所做的所有事情，并可以将两者结合在一起。它将智能地处理组合子、伪类和包含选择器的通用选择器。下面是一个来自Sass的例子:CSS.content导航。侧边栏{@extend信息;｝ //这个不会被扩展，因为\“ p \“和\“ nav \“不兼容。p.info {background - color: # dee9fc;｝ //没有办法知道\“ \“是在里面还是// outside \“ \“，所以Sass生成两个安全的。.guide info {边框:1px solid rgba（#000, 0.8）;border - radius: 2 px;｝ // Sass知道每个匹配“main. “的元素。Content “也匹配“。Content “//避免生成不必要的交错选择器。主要。内容信息{字体大小:0.8 em;｝下面是另一个示例，其中使用扩展特性中的占位符类创建了一组用于错误、警告和成功的消息传递。基本上，占位符是一种特殊类型的类，它只在扩展时打印。最后，你可以用一种整洁的方式编译你的CSS。让我们看一下下面的例子:

Sass→CSS /*此CSS将打印，因为%message-shared已扩展。* /% message-shared {边框:1px实心#ccc;填充:10 px;颜色:# 333;｝ //此CSS不会打印，因为%equal-heights从未扩展。% equal-heights {显示:flex;flex-wrap:包装;｝ .message {@extend % message-shared;｝ .success {@extend % message-shared;边框颜色:绿色;｝ . error {@extend % message-shared;边框颜色:红色;｝ .warning {@extend % message-shared;边框颜色:黄色;｝那么，我们在这个例子中看到了什么呢?代码告诉我们.message、.success、.error和.warning的行为应该像%message-shared一样。换句话说，任何看到%message-shared、.message、.success、.error和.warning的地方都将显示出来。在生成的CSS中，每个类将具有与%message-shared相同的属性。最后，您不必在HTML元素上写太多的类名。除了占位符类之外，尽管你可以扩展大多数简单的CSS选择器，我们仍然建议在Sass中使用占位符，因为这是确保你扩展的类没有嵌套在样式的其他地方的最简单的方法，这会导致CSS中出现意外的选择器。注意:%equal-heights不会生成，因为%equal-heights永远不能扩展。我们列表中的最后一个特性是操作符。有时在CSS中进行数学运算非常有帮助，这就是为什么Sass特性添加了许多有用的数学运算符，如+、-、*、/和%。在下面的例子中，你会发现一些简单的数学计算，以找到aside & article的宽度。

SCSS语法.container {宽度:100%;｝ 文章[role = “主“]{浮:左;宽度:600px / 960px * 100%;｝ 除了[role =“互补”）{浮:正确;宽度:300px / 960px * 100%;｝ CSS输出.container {宽度:100%;｝ 文章[role = “主“]{浮:左;宽度:62.5%;｝ 除了[role =“互补”）{浮:正确;宽度:31.25%;｝在这个例子中，我们制作了一个基于960像素的简单流体网格。通过Sass中的操作，我们可以轻松地将像素值转换为百分比。



faq

有使用SASS的WordPress主题吗?虽然WordPress有很多又快又好的主题，但如果你使用SASS，最好知道这个主题是否也使用SASS。事实上，有很多WordPress主题都使用Sass。事实上，如果你想开始在WordPress中使用Sass，最简单的方法就是选择一个已经使用过它的主题。这种主题的一个很好的例子是下划线主题。下面是Themeforest中其他一些很好的sass集成主题，你可以从它们开始。



有一个WordPress启动主题与引导SASS和Grunt工作流程吗?是的，您可以检查Roots启动器主题，或者您可以创建自己的启动器主题。为此，选择下划线中的sassify。我，这是一个新功能。你也可以检查骨头- HTML5 WordPress的启动主题。我在哪里可以在我的WordPress网站上找到SASS文件夹?没有将所有Sass文件保存在一个地方的单独文件夹。每个项目都有单独的Sass文件夹。



如何将SASS与CI集成?如果你的项目没有使用外部构建工具，你可以编译本地的，然后将编译好的CSS上推。您可以使用Gulp编译您的SCSS。你也可以在你的启动主题中使用Webpack Mix，这比Webpack更容易设置。你也可以将Sass编译器集成到CI和版本控制系统中，这样它就可以在每次推送





时将Sass编译成css。简而言之，即使css拥有创建一个令人惊叹的网站所需要的一切，使用像Sass这样的css预处理器将使创建过程更加容易和轻松。WordPress的Sass使CSS更加强大，它允许开发者使用一系列有用的特性，如变量、嵌套规则、mixins、模块、部分、扩展/继承和操作符。最后，它将编译您的代码并提供一个CSS输出，以便浏览器能够读取它。你喜欢这篇文章吗?传播这个词!留言取消回复

您的电子邮件地址将不会被公布。必填字段标记为*

您的电子邮件地址将永远不会被发布或共享。必填字段标记为*

COMMENT*

NAME *

EMAIL ADDRESS *

WEBSITE

在此浏览器中保存我的姓名、电子邮件和网站，以便下次评论时使用。







相关帖子68省时的WordPress键盘快捷键提高你的效率你必须知道的关于WordPress 5.5 PHP 7.4的新功能（特性，Deprecations，更新）10个最快的WordPress主题比较（测试结果）# WordPress