跳到主要内容

在WordPress中从CSS切换到Sass

本文最初出现在网络杂志的第265期

每个优秀的开发人员都知道如何寻找减少重复工作的方法,并让他们的计算机处理平凡,无意识的任务。像Sass这样的CSS预处理器为我们提供了一些有用的工具来帮助自动化前端编码过程。例如,使用Sass,我们可以使用变量。因此,我们可以简单地更改变量定义,而不是通过长CSS文件运行“查找和替换”命令来调整颜色值。

Sass还允许我们编写函数来生成重复样式代码块。例如,按钮功能可以接受颜色或样式作为参数,并为网站的按钮UI生成所有标准CSS:边框半径,渐变,文本颜色等。我们还可以将我们的巨型样式表分解为有组织的模块。几乎每个CMS,插件和Web应用程序都使用目录和部分来提高代码可维护性:Sass允许我们使用CSS执行此操作。

本教程中介绍的技术特定于使用Sass的SassSCSS语法,但它们适用于大多数其他预处理器 - 比如要么唱针- 以及。

转换主题样式表

如果您正在使用的WordPress主题已包含Sass文件,则将为您完成将现有主题样式表转换为Sass的过程。我通常使用Automattic(underscores.me)中的Underscores模板开始新的主题。从其网站创建新的主题包时,您会发现'_sassify!'选项,如果您单击“高级选项”链接。这将在您下载空白主题时为您提供Automattic的默认Sass库。

Underscores

The Underscores WordPress主题为用户提供了一个选项,可以下载包含Sass partials的主题版本

但是,如果您正在构建或修改的主题不包含Sass文件,则首先将现有的CSS文件转换为Sass。这一步揭示了使用Sass(SCSS)的一个主要优势:Sass编译器可以毫无困难地读取纯CSS。你需要做的就是使用原始的style.css作为Sass来复制它并将其重命名为style.scss。

设置Sass部分

之前我提到Sass通过让我们将数千行CSS分成称为partials的模块化文件来改进我们的工作流程。在开始编译方法之前,让我们完成这一步。

如果你已经将现有的CSS文件转换为Sass,那么到目前为止你所拥有的只是一个.scss文件,它和它来自的CSS文件一样笨拙。此时,您可以开始使用变量并编写mixins或函数,但Sass不是模块化的或组织的。您希望将CSS文件分组为各个用途的部分。目标是能够找出基于其文件名找到代码的位置。

您可能想要隔离的一些代码模块包括导航,排版样式,侧边栏小部件,页脚和网格系统(尽管该列表并不是全面的,但它只是一个起点)。

然后,您将CSS的每个模块化部分剪切并粘贴到其自己的Sass部分中。 Sass partial的文件名始终以下划线(_)开头。这告诉编译器不要基于这个Sass文件创建一个唯一的CSS文件。

监视充满Sass的文件夹并自动生成CSS的编译器应用程序将基于style.scss创建style.css,但它不会基于_navigation.scss创建navigation.css。要编译你刚刚创建的所有部分,你将在主Sass文件中@import它们。

每次将代码块复制到部分代码时,请使用@import'partial-name';将其替换为主.scss文件中的代码。如果将页脚样式移动到_footer.scss,请添加@import'footer';。不要在导入中包含_或.scss:只是文件的名称。

如果您想要真正有条理并将标题导航和页脚导航分解为/ Navigation /文件夹中的两个单独的部分,请在导入中包含文件夹名称:

@import'navigation / header-nav'; //导入/navigation/_header-nav.scss @import'navigation / footer-nav'; //导入/navigation/_footer-nav.scss

重要的是要记住,CSS级联仍然适用于用Sass编写的代码。在稍后导入的partials中编写的样式可以覆盖先前导入的partials中的样式。

在主Sass文件的开头导入包含mixins和变量的partials也是明智的,这样以后的partials实际上可以使用那些变量和mixins。

WordPress评论

根据WordPress style.css的要求,我们需要确保我们的编译器在style.css的顶部保留WordPress注释。当Sass的output_style设置为:compressed时,它会在编译CSS时删除所有注释。

要确保这些注释保持不变,请在style.scss的注释块的开头添加一个感叹号(!):

/ *!主题名称:Sassy WordPress主题主题URI:http://jamessteinbach.com/sass/作者:James Steinbach作者URI:http://jamessteinbach.com描述:从CSS到Sass示例主题代码* / //导入所有。 scss partials下面

将CSS重构为Sass

现在我们已经将长样式表拆分为较小的模块化部分,我们可以开始重构原始CSS以适应我们的Sass首选项。用于重构代码的一些有用的Sass工具是变量,嵌套,函数和混合。

如果要更改某些颜色或设置标准类型比例,变量是将所有数据保存在一个位置并轻松进行站点范围更改的最佳方法。如果您还没有创建名为_variables.scss的部分,我建议您现在这样做 - 并将其导入主Sass文件的顶部。以下是您可能想要放入该部分的一些变量:

$ red:#FF4136; $ blue:#0074D9; $ blue-dark:#001F3F; $ orange:#FF851B $ type-small:12px; $ type-medium:16px; $ type-large:21px; $ type-hero:44px;

设置这些变量后,可以搜索部分并用变量名替换值:

身体{颜色:$ blue-dark; } .page-title {font-size:$ type-large; }

您可以使用称为“嵌套”的Sass功能来帮助使复杂的选择器更具可读性。您的起始CSS可能包含站点侧栏中多个元素的样式:

.sidebar h1 {// styles} .sidebar p {// styles} .sidebar ul {// styles}

您可以将样式嵌套在其他样式块中,Sass将组合选择器以创建复杂的选择器。下面的代码将编译为与原始CSS相同的输出(如上面的代码所示)。

.sidebar {h1 {// styles} p {// styles} ul {// styles}}

在嵌套中,可以用作上面的整个选择器字符串的占位符。由于嵌套在选择器之间放置了一个空格,因此在使用伪类和伪元素时会很有用:

a {color:$ blue; &:hover {color:$ blue-dark; } .clearfix {&:: before,&:: after {content:“”;显示:表;明确:两者; }}

&也可用于复制或反转选择器的顺序:

p {&+&{margin-top:1em; } .menu-link {color:$ grey; .menu-item:hover&{color:$ grey-light; }}

您可能想知道是否值得花时间通过嵌套属性进行重构。虽然嵌套可能会增加可读性(尽管这是主观的),但它也是一种谨慎使用的工具。大多数Sass专家建议Sass嵌套的“初始规则”:从不嵌套超过三层。谨慎使用Sass嵌套是明智的。如果在您的工作流程中没有意义,请不要强制它。

Sass

Sass是最成熟,最稳定,最强大的专业级CSS扩展语言

如果您反复计算CSS中的某些属性,则可以使用Sass函数替换该过程。函数接受您给出的参数并返回一个值。它不会生成CSS属性 - 值对,但它可以为您生成值。

这是一个在悬停时计算褪色颜色的函数示例:

//这是_functions.scss:@function hover-color($ color){@return lighten($ color,10%); } //这是你在其他部分中使用该函数的方法:.button {background-color:$ red; &:hover {background-color:hover-color($ red); }}

我们还可以通过重复代码块并用mixins替换它们来重构代码。一个有用的mixin的一个很好的例子是clearfix。

//这是_mixins.scss:@mixin clearfix(){&:: after {content:“”;显示:表;明确:两者;这就是你在其他部分中使用mixin的方法:.content-container {@include clearfix; }

Mixins还可以采用参数来生成自定义输出。这对于按钮或警报等设计模式非常有用:

//这是_mixins.scss:@mixin alert($ color){border-radius:.5em; box-shadow:0 0 .25em 0 rgba(0,0,0,.5); border-top:4px solid $ color;颜色:$ color; } //这就是你使用这个mixin的方法:.alert-error {@include alert($ red); } .alert-success {@include alert($ green); }

underscores.me

Underscores.me主题将部分内容排序到文件夹中,包括“元素”,“表单”,“布局”和“媒体”

您可能在网上看到的一条常见建议是使用mixins进行跨浏览器前缀。不过,我通常建议不要这样做。我发现Autoprefixer是一种更好的自动化前缀的方法。

如果您无法运行Autoprefixer,并且必须依赖Sass Mixins,指南针'mixin库允许用户配置并保持最新状态我可以用吗数据。

组织你的部分

回顾一下,我们将主题的现有样式表分开并重构了一些代码,以使事情变得更清晰和更加轻松。现在,我们可以组织我们的部分内容,从长远来看,可以提高可维护性。

organising your CSS

组织CSS使用Sass,开发人员可以使用变量,嵌套,函数和混合等工具来组织和自动化CSS

请记住,级联仍然很重要。 Sass编译的CSS就像普通的CSS一样,样式表中稍后出现的样式可以覆盖前面出现的样式。通常,在导入特定样式之前导入常规样式。

可以在文件夹中组织类似的部分。有两种方法可以从目录中导入Sass部分。第一种是将每个文件导入style.scss,包括import指令中的文件夹名称,如下所示:

@import'base / variables'; //从/ base /目录@import'base / mixins'导入_variables.scss; //从/ base /目录@import'base / grid'导入mixins.scss; //从/ base /目录导入_grid.scss

第二个(也是更复杂的)方法是在每个目录中创建一个占位符部分,用于导入该目录中的其他部分(下一列):

//在style.scss @import'base / base'; //在/base/_base.scss @import'variable'; //从/ base /目录@import'mixins'导入_variables.scss; //从/ base /目录@import'grid'导入mixins.scss; //从/ base /目录导入_grid.scss

这两种方法都以相同的顺序导入相同的部分。第一种方法表面上更简单,但第二种方法的优点是保持style.scss整洁并将任何复杂性移动到它所依赖的模块中。

组织Sass部分的方法几乎和开发人员试图组织Sass部分一样多。您可以在第88页的“资源”框中找到几个不错的选项。

这是一个可以使用的相当简单的组织方案:

  • / Base /(变量,mixins,重置,排版)
  • / Layout /(网格,页眉,页脚)
  • / Vendors /(插件,供应商等)
  • / Components /(按钮,菜单,表单,小部件)
  • / Pages /(主页,登录页面,投资组合)

加起来

本文仅开始探讨在WordPress主题开发中使用Sass的潜力。您现在渴望获得更多信息的机会很强,特别是如果这是您在这个主题上首先阅读的内容。

查看“资源”选项卡,了解有关该主题的更多信息 - 这些文章包含Sass-WordPress工作流程的几个变体。他们的一些建议与我推荐的建议不同(特别是关于组织部分的主题),但这很好 - 找到适合你的技术和工作流程!

James Steinbach创建了一个独家的截屏视频来配合本教程,您可以在下面观看。

话: 詹姆斯斯坦巴赫



翻译字数超限