玉树网站开发公司:如何使用Sass与WordPress-一步的指南

多年来,CSS一直是我开发网站时最喜欢的语言。方面设计或演示一层网站总是和我在一起。在我被介绍给Sass的那天,我立刻被它拒之门外。我心里想-“为什么在开发网站时,我会让事情变得更困难。”我有足够的时间对付…

玉树网站开发公司从外部的角度来看,我认为Sass是一种高级语言,它为我的项目增加了无用的复杂性和令人麻木的配置。我几乎不知道,一旦学会了,我认为是如此强硬的语言将节省我的时间,头痛,并改善我的工作流程。

事实上,Sass(和其他css预处理程序)对于任何感兴趣的设计人员或开发人员来说都是非常强大的盟友。更多。最后,所有这些预处理语言都被编译成CSS。因此,如果您根本不喜欢使用预处理语言的想法,那么您仍然很清楚。

这篇文章不是为了教你Sass,也不是为了解释为什么它如此强大。相反,我的意图是向您展示如何使用WordPress;当今可用的最常见的CMS,以及我们在这里喜欢的优雅主题。

先决条件

本教程假设您具有设置WordPress环境的工作知识。为了演示的目的,我将下载WordPress并在我的机器上本地运行,并向您展示每一步。这可能是对你们中的一些人的回顾,也可能是对另一些人的新不管怎么说,我都邀请你们跟着走。有关开始使用WordPress的更多信息,请参阅我们的其他博客文章.

有用工具

在开始之前,我建议您获得一些工具,以便在编译Sass时简化您的生活。我在Mac上工作,所以我个人使用CodeKit但是我们欢迎您使用任何其他的预处理器,甚至我们将在本教程中使用的优秀ole命令行。我将在本教程中使用的另一个工具是曼普.

设置本地WordPress安装

要开始使用WordPress,您可能会想到WordPress.org下载最新版本。

玉树网站开发公司

访问http://www.wordpress.org下载最新版本。

解压缩.zip文件后,将其重命名并放到您的htdocs安装MamP时安装的文件夹。

*User*/Applications/MAMP/htdocs/

玉树网站开发公司

我们的新sass-wp文件夹在htdocs文件夹中

此时,确保MamP被点燃。打开新安装的WordPress目录的起始页。在我们的例子中,它应该在url。http://localhost:8888/sass-wp/。此时,您应该得到一个错误。不要担心,我们只需要将WordPress安装配置为本地运行,但是在创建配置文件之前,我们需要创建一个数据库供WordPress使用。
返回到MamP中的起始页面,然后单击PHPmyAdmin在工具菜单项。一个快速到达那里的方法是通过url。http://localhost:8888/MAMP.

phpMyAdmin-http://localhost:8888/MAMP

一旦您进入PHPmyAdmin,只需创建一个新的数据库。在本教程中,我调用了我们的数据库沙斯-wp

接下来,我们玉树网站开发公司将返回WordPress安装http://localhost:8888/sass-wp并单击创建配置文件按钮.

输入您的数据库名称、用户名和密码。

一定要包括您在本地创建的数据库名(您刚刚创建的数据库名,我们的名称是沙斯-wp)、用户名和密码。在本教程中,我们将我们的数据库称为沙斯-wp由于我们使用的是MamP,我们的用户名和密码都是根部.

如果所有设置都正确,您将在安装屏幕上结束。输入有关WordPress站点的所有信息,然后单击安装WordPress。一旦安装,您将登录并到达您的仪表板。

看到WordPress仪表板意味着我们有一个完整的安装

安装Sass和Compass

Sass有一个红宝石依赖项,因此我们需要安装红宝石才能正常工作。大多数Mac都安装了Ruby,但是如果您在Windows机器上,您可能需要考虑另一种解决方案。我们也会用罗盘,这是一个开源的CSS创作框架,它为Sass提供了许多快速而有用的补充。Compass的另一个替代方案是另一个名为波旁。使用任何你喜欢的框架,或者像我有时做的那样组合主题。访问安装文档http://compass-style.org/install/http://bourbon.io/docs/了解更多。

快速安装

要第一次安装Sass和Compass,只需打开您选择的命令行工具,然后键入下面的几行代码。
注*-您可能在访问正在更改的目录时出错。快速修复方法是键入命令苏多在所有这些行之前。这样做会提示您输入系统密码。从那里,您应该可以看到Sass和Compass都安装在您的系统上。

$ gem update --system
$ gem install sass
$ gem install compass

现在我们玉树网站开发公司已经安装了Sass和Compass,我们需要设置主题的文件夹结构。

确保命令行编辑器保持打开。

用Compass设置Sass的主题

我们将使用二十一岁本教程的主题。默认的二十四个文件夹结构如下:

二十四个主题默认文件结构

添加必要的文件和文件夹

要开始,我们需要添加一些文件夹和文件。

  • 我们的主题已经包含一个影象目录,但如果没有目录,则需要添加一个目录。

  • 玉树网站开发公司还需要创建一个沙斯目录。此文件夹包含要编译到CSS的任何Sass文件。您可能有一个主Sass文件,但是存在一个添加多个文件的选项,稍后我将对此进行解释。

  • 内部沙斯目录,您需要创建一个style.scss档案。此文件将被要编译到主题的主CSS文件的预处理器锁定。注意:CSS文件必须位于主题的根中,这样WordPress才能正常工作。它必须存在!

  • 因为Sass是建立在ruby上的,所以我们需要创建一个config.rb文件告诉Sass/Compass文件在哪里。下面是新更新的主题文件夹,新创建的文件和文件夹突出显示新的层次结构。

二十四个主题与我们的新文件和文件夹,以便与Sass工作。

上面以红色突出显示的文件已经在我们的Sass配置(config.rb文件)中添加或引用,我们将在下面讨论。

config.rb文件

每个基于Compass的项目都使用一个配置文件来定义文件夹/文件名及其在我们的项目中的位置。在我们的示例中,config.rb文件将类似于下面的示例。我添加了一些注释来解释每一行的含义。

http_path = "/" #root level target path
css_dir = "." #targets our default style.css file at the root level of our theme
sass_dir = "sass" #targets our sass directory
images_dir = "images" #targets our pre existing image directory
javascripts_dir = "js" #targets our JavaScript directory

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions.
# note: this is important in wordpress themes for sprites

relative_assets = true

你会注意到config.rb文件很容易理解。这个文件定义了CSS、JavaScript、Image和Sass在我们的项目目录中的位置。在主题文件夹中,CSS目录位于主题的根级。Sass文件驻留在我们前面创建的Sass文件夹中。我们的JavaScript位于一个名为“js”的文件夹中,依此类推。

在前五行下面,您可以选择注释或取消注释,这些选项可以在Sass编译后处理传统CSS的输出。我通常使用嵌套选项在开发期间并移到*压缩选项时,我的项目转移到生产,以节省加载时间。用你想要的任何选项。

让Sass监视更新

预处理器最好的部分是CSS代码的自动编译。为了让Sass监视更新,我们需要在命令行编辑器中再输入一个命令。我们的主题都准备就绪,输入:

$ cd /yourproject
$ compass watch

确保将命令行路径更改为工作项目文件夹。然后像上面那样输入指南针监视命令。当新样式和文件被创建或更改时,罗盘将监视您的文件夹。然后生成新的CSS并将其编译到根style.css文件中。

让我们写一些Sass

到目前为止,使用Sass和Compass建立WordPress的过程可能看起来很困难,但我向您保证,您做的越多,它就会越容易和更快地与您构建的每个站点一起使用。从长远来看,您将通过编写更少的Sass来生成更多的CSS来节省时间。

现在我们玉树网站开发公司都配置好了,我们已经准备好编写一些Sass了。
要开始,让我们打开默认值Style.css在二十四个主题中复制文件,并在顶部复制注释块,如下所示:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

为了使事情变得简单,我将按原样重用这个注释,但是将它添加到我们的style.scss文件在我们的沙斯文件夹。我们还将包括指南针以及随时方便的罗盘复位。

所以现在我们style.scss在我们沙斯文件夹看起来像:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import "compass";
@import "compass/reset";

从这里开始,我们基本上已经做好了调整我们的主题的准备。有一点要注意的是,一旦你拯救了你的style.scss重新归档Style.css您的主题根目录中的文件将生成并复制到现有的主题中。这是假设您从零开始重新设计二十四个主题。如果不希望覆盖默认样式,则需要将它们复制到style.scss因此,它们也会被编译成一个部分,我们将在下面讨论。

部分

我非常相信基于模块化的编程。我的意思是将代码分成更小、更可行的文件,然后再编译成一个文件。在前面的文章中,我提到了使用多个Sass文件的选项,这些文件稍后会生成到一个CSS文件中。这些文件称为Parals,通常具有前缀和下划线字符,一旦写入,该字符看起来类似于“_paral.scss”。要使用部分,我添加了一个名为_部分在我们沙斯文件夹如下所示。在该文件夹中,我创建了几个较小的.scss文件,我们将在我们的项目中使用。只要它们包含在您的主目录中,您就可以创建任意数量的内容。style.scss档案。

我们的Sass文件夹中的Parals文件夹

如何使用分词

不将带有下划线前缀的部分编译为附加样式表。下划线字符告诉Sass这个文件不是直接编译的,所以它最初会忽略它。要将这些文件中的样式包含到样式表中,我们需要将这些文件包含在style.scss档案。检查我们style.scss在下面的文件中说明如下:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import "compass";
@import "compass/reset";

// Here we import our partials
@import "_partials/mixins";
@import "_partials/variables";
@import "_partials/typography";

在每个部分中,我都添加了注释和一些基本的Sass:
混合器

/* mixins.scss */

变量

/*_variables.scss */
/* Body Text Styles */
$text-colorblack;
$base-font-size16px;
$base-font-family"HelveticaNeue"HelveticaArialsans-serif;
$base-font-weight400;

[化]排印

/*_typography.scss*/
body {
color: $text-color;
font-size: $base-font-size;
font-family: $base-font-family;
font-weight: $base-font-weight;
line-height1.6;
}

因为罗盘正在观看我们的项目,我们已经把我们的部分纳入了我们的主要部分。style.scssSass文件,一旦我保存了这些文件,它将接受这些更改并生成一个新的style.css文件。现在我们Style.css文件如下:

Style.css

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* line 17, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin0;
padding0;
border0;
font: inherit;
font-size100%;
vertical-alignbaseline; }

/* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height1; }

/* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {

list-stylenone; }

/* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapsecollapse;
border-spacing0; }

/* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-alignleft;
font-weightnormal;
vertical-alignmiddle; }

/* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotesnone; }

/* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content"";
contentnone; }

/* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
bordernone; }

/* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
displayblock; }

/* _mixins.scss */

/* _variables.scss  */

/* _typography.scss */

/* line 3, sass/_partials/_typography.scss */

body {
colorblack;
font-size16px;
font-family"HelveticaNeue"HelveticaArialsans-serif;
font-weight400;
line-height1.6; }

我们的代码现在已经输出到单个CSS文件中,这意味着我们已经成功地安装了一个WordPress主题和一个工作的Sass&Compass工作流。恭喜你走了这么远!

我们的二十四个主题重置与Sass,并准备根据我们的喜好定制。

由于我们已经重写了我们的默认主题样式的二十四个主题,我们的主题现在看起来有点光秃秃的,但是已经准备好使用Sass进行定制了!

避开命令行

许多流行的应用程序和任务运行程序已经出现在Sass或更少的用户中。这些应用程序编译代码以及许多其他的东西,如浏览器刷新,缩小代码,图像优化,源代码映射等等。下面列出了其中一些应用程序和任务运行程序。有了这些,您可以直接退出项目,也可以立即在项目上完成大量任务。所有这些操作同时发生是它们比命令行容易一些的主要原因。

版本控制

玉树网站开发公司想简单地谈谈版本控制和使用Git与像我们这样的Sass项目。GIT是一种强大的工具,它可以帮助我们在执行诸如破坏代码或为新版本集成新代码等操作时保留我们的工作历史。当使用Sass时,会生成一些新的文件夹和文件,这些文件夹和文件并不总是需要使用Git进行版本化。例如,.sass缓存文件夹或sass文件夹不打算在生产中一次在活动服务器上使用。最后,重要的文件仍然是主题根目录中的style.css文件。其余的你可以随意修改,特别是在团队工作的时候。无论是为了一个后援,还是为了心灵的平静,选择什么对你和/或你的团队最有效。

结语

WordPress,Sass和Compass可以是一个强大的三重奏,当融合在一起时,我们已经做了。虽然大多数Sass新手往往对所有额外的工作和设置皱眉,但我认为一旦他们投入其中,并真正理解使用这种语言的好处,他们就会永远着迷。切换回常规CSS会感觉比以前更令人望而生畏。请相信我!

如果你对Sass还是新手的话,我鼓励你试一试。查看指南http://sass-lang.com/去参加一门理解语言的速成班。如果你能写CSS,你就可以写Sass。





二维码