跳到主要内容

提升Sass&Compass效率

这篇文章首次出现在问题233.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

虽然使用Sass和Compass而不是标准CSS时创作环境肯定更有利,但一个常见的问题是结果代码比“手动编写”更加臃肿。这可能会导致CSS更难以使用多次编写和覆盖的元素进行管理,而且代码的占用空间也比其需要的大。在这里,我们将使用Sass和Compass的功能,这些功能可以修剪过多的代码,甚至可能生成比您自己编写的CSS更高效的CSS。

包括框架

在Sass和Compass中启动项目时,许多用户都有自己的“基础”模板。它可能是一组手工制作的部分文件或HTML5样板的Compass版本或者基础框架。使用这些框架的Sass和Compass版本的一个好处是它们是模块化的,因此很容易关闭不需要的元素。因此,当使用HTML5样板作为起点时,如果不需要对列表,嵌入或任何其他模块的支持,请将它们注释掉或完全删除它们。例如:

@include h5bp-display; @include h5bp-selection; @include h5bp-base; @include h5bp-links; @include h5bp-typography; // @ include h5bp-lists; // @ include h5bp-embeds; // @ include h5bp-figures; @include h5bp-forms; // @ include h5bp-tables; // @ include h5bp-helpers;

The benefit of modular frameworks such as Foundation is that you only need to include the parts you actually require

模块化框架(如Foundation)的好处是您只需要包含实际需要的部件

只使用一次重置

这是一个类似的重置故事。如果从框架开始,通常会包含重置,或者可能正在使用Normalizer来实现此目的(有一个很好的Sass版本)这里)。无论哪种方式,如果已经有某种重置,那么包括Compass自己的重置在内,没有什么意义,在从命令行创建项目时默认包含该重置:

罗盘创造

如果不需要,请查找以下行并注释掉:

@import“指南针/重置”;

输出格式

Sass和Compass提供了以多种方式(扩展,压缩等)编译CSS的能力。其设置在。中定义Config.rb文件在项目的根目录中。准备好将代码移至生产环境时,请查找以下行:

Output_style =:扩展

然后,要创建尽可能小的CSS文件,请将其更改为:

Output_style =:压缩

在为生产生成CSS时,必须将设置更改为“压缩”。通过压缩CSS并让服务器发送gzip(如果您的服务器没有发送CSS gzip,Google Page Speed会发出警告),它可以提供巨大的经济效益。 Sass核心团队成员克里斯·埃普斯坦(Chris Eppstein)建议说,“特别是CSS,由于语言的所有冗余和冗长,压缩得非常好。它可以变成原始尺寸的30%至10%“。

Use Compass? Consider what features you can live without in order to generate leaner code

使用指南针?考虑一下您可以使用哪些功能,以便生成更精简的代码

如果使用一个设置(例如“嵌套”或“展开”)开发站点,则可以从命令行强制进行一次性更改(例如,如果您使用扩展设置进行开发但想要检查导出的CSS的压缩文件大小)。要强制执行其他导出设置,请运行以下命令:

罗盘编译 - 输出式压缩--force

或者,如果您要生成一个包含Sass和Compass的CSS文件以交给其他人使用,那么您可以保留CSS注释,但通过更改以下值来删除扩展设置中的Sass注释和行号调试注释Config.rb

Line_comments = True

将值更改为:

Line_comments = False

最后,值得知道您可以添加“响亮”的评论。无论输出模式如何,这些注释都不会被删除。通过添加感叹号作为CSS注释的第一个字符来执行此操作:

/ *!这不会被删除。适用于版权声明和类似* /

LiveReload supports Sass 3.2 Alpha from 3.2.8 onwards. A graphical interface for selecting custom compilers is promised for a future version

LiveReload从3.2.8开始支持Sass 3.2 Alpha。用于选择自定义编译器的图形界面将用于未来版本

浏览器支持

Sass的一个平局是使用Compass的“创作框架”来完成编写各种CSS3语法(渐变可能是一个真正的负担)。但默认情况下,Compass支持大量浏览器。在不需要特定供应商前缀的情况下(例如内部项目),可以将其删除。但这是微观优化,因此不建议公共网站使用。

以下是一些默认值:

$ experimental-support-for-mozilla:true!default; $ experimental-support-for-webkit:true!default; $ support-for-original-webkit-gradient:true!default; $ experimental-support-for-opera: true!default; $ experimental-support-for-microsoft:true!default;

您可以通过添加如下变量来关闭支持:

$ Experimental-support-for-opera:false;

在调用Compass CSS3模块之前,最好包含变量:

$ experimental-support-for-opera:false; @import“compass / css3”;

请注意,在更明显的变量中,默认情况下包含一个原始WebKit渐变语法 - 您需要它吗?好的,如果你这样做,但如果不是,它是移除的主要候选者:渐变代码通常非常冗长。同样,传统IE支持也有变量。如果您不关心支持IE6或7 hacks,请以与以前相同的方式包含此变量:

$ Legacy-support-for-ie:false;

有关可以这种方式切换的完整支持列表,指南针网站上有一个方便的页面

Want to use the Alpha version of Sass with CodeKit? The Preferences panel enables you to specify the correct compiler

想在CodeKit中使用Alpha版Sass吗?使用“首选项”面板可以指定正确的编译器

延伸

如果你已经使用Sass任何时间长度,你会熟悉@延伸指示。它使一个规则能够继承另一个规则的样式。例如,首先让我们创建一些颜色变量:

//颜色变量$ gray:#bfbfbf; $ dark:#999; $ red:#ff0b13;

现在让我们添加我们的第一条规则,即我们可能在整个网站中使用的标准框:

// Box.box {padding:2em; background-color:变亮($ grey,20%);颜色:$ dark;}

在这里,我们刚刚添加了一些填充,使用了颜色Sass的功能是创造比背景颜色轻20%的背景色$灰变量然后将颜色设置为$黑暗变量。这是编译的内容:

.box {padding:2em; background-color:#f2f2f2;颜色:#999999;}

如果我们编写标准CSS,并希望使用该框作为另一个框的基础,我们可能只是复制并粘贴下面的规则,重命名并添加任何其他声明。例如:

.warningBox {padding:2em; background-color:#f2f2f2;颜色:#999999;边框:2px点缀#ff0b13;}

这不是最好的方法。仅定义与第一个不同的任何额外声明更有效。但是,当我急忙编写标准CSS时,我们中有多少人对此感到内疚?在这种情况下,只有边界财产和价值对不同于。框规则。谢天谢地,如果你正在使用Sass并使用它@延伸指令它为您做繁重的工作,例如在我们现有的下面添加以下内容。框Sass文件中的样式......

//警告Box.warningBox {@extend .box;边框:2px点缀$ red;}

...将导致以下编译代码:

.box,.warningBox {padding:2em; background-color:#f2f2f2;颜色:#999999;}。warningBox {border:2px dotted#ff0b13;}

Sass将在适当的位置组合样式并生成最有效的代码。虽然我们总是能够在键盘和椅子之间产生错误,但Sass却没有。这需要我们可以依赖的预先存在的规则。但是Sass 3.2中的占位符功能将这种抽象提升了一个级别。

Sass 3.2中的占位符选择器允许创建仅用于扩展的类。如果他们没有扩展@延伸规则中的指令,它们不创建输出。例如,也许在我们之前的例子中,我们需要为不同的框(警告框,成功框,信息框)提供一些基于相同样式和微妙变化的类。使用占位符时,如果永远不会使用占位符,则无需为“基本”框样式创建样式。而是在开头创建一个带有%的类,而不是通常的句号:

// Box%box {padding:2em; background-color:变亮($ grey,20%);颜色:$ dark;} //警告Box.warning-box {@extend%box; border:2px点缀$ red;} //警告Box.success-box {@extend%box; border:2px dotted $ green;} // Information Box.info-box {@extend%box;边框:2px点缀$ blue;}

这将导致编译以下CSS:

.warning-box,.success-box,.info-box {padding:2em; background-color:#f2f2f2;颜色:#999999;}。警告框{border:2px点缀#ff0b13;}。success-box {border:2px dotted#11c909;}。info-box {border:2px dotted#091fff;}

占位符样式增加了便利性,并且仅通过CSS就难以实现抽象级别。结合变量,它们提供了可以跨项目使用的代码片段,可以轻松创建通用接口模式。

Unless your Google Page Speed Insights score is around 95, Paul Irish doesn’t feel worrying about CSS optimisation represents a sensible use of time

除非您的Google Page Speed Insights得分在95左右,否则Paul Irish并不担心CSS优化代表了合理使用时间

关于嵌套的说明

Sass提供了嵌套规则的能力,但过度嵌套可能意味着膨胀的代码。埃普斯坦指出,“这是一种反模式,应该避免。评论提供了更好的分组机制。用户应该问:这样做需要嵌套在UL选择?还有其他吗?可能存在于此之外的元素UL?”

在扩展现有规则时可能会特别成问题。例如:

//可怕的过度嵌套example.container .link-wrapper ul li a.link {color:$ red;} footer ul li a.footerLink {@extend a.link;}

...将在CSS中编译为以下内容:

.container .link-wrapper ul li a.link,.container .link-wrapper footer ul li a.footerLink,footer .container .link-wrapper ul li a.footerLink {color:#ff0b13;}

结论

使用预处理器生成样式表不需要导致膨胀的代码。通过记录Sass和Compass的更精细的细节和功能(如占位符样式),输出的文件可以表现得更好,占用空间更小。那些与他们合作的人应该找到他们干,这样更容易合作。

谢谢克里斯埃普斯坦他对本教程的同行评审

发现30鼓舞人心CSS的例子在我们的姐妹网站Creative Bloq。



翻译字数超限