现代 CSS

关于更好地组织Sass变量的想法

作者：薄荷 日期：2016-09-17 点击：4668
Preprocessor
Sass
SCSS
CSS处理器

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

去年的大部分时间我写的CSS都放在一个预处理的Sass文件中，尤其是在一个.scss文件中。对我来说不错，但没有好好利用Sass提供的特性。我的SCSS文件通常比嵌套输出的CSS要小。我大量使用变量和引入不常用的混合宏，但它使用起来是最简单不过的。

我想改变现状，并希望你们不要介意,如果我大胆想出如何开始创建更加模块化和可维护的Sass项目。

一个最近项目的例子

最近我在做一个相对简单的项目，一个少量内容的单页网站，仅用一个下午就完成了设计和开发。

然而在等待客户评审的过程中，我想我应该研究一下，通过为颜色和类型设定变量来重构CSS，以防客户回头想要更改。不出所料，客户确实想改变颜色和类型的选择，将它们设置为变量将更容易快速尝试不同的可能性。

我的客户拥有一定的设计经验，提出了一种不同的配色方案并且能立刻应用到页面中。想看不同的字体看起来如何？没问题。稍等。

变量显然有用，并且是使用预编译器的一大原因之一。然而，我不认为自己在变量设置上做了最好的选择。以下是我创建的一些变量名和大体组织。

/* Background Colors */
$background:
$header-background:
$content-background:

/* Colors */
$heading-color:
$link-color:

/* Typography */
$sans-seris:
$serif:

初看觉得不坏，但即使只有这几个变量它也并不是组织变量的最佳方式。主要分组还可以，但变量名并不好。至少像以下的命名方案：

 $background:
 $background-header:
 $background-content:

会比较容易阅读。变量如$serif，$sans-serif要比$display-type，$text-type好，更能反映它们的目的而不是描述它们的值。我的方式看起来有点像命名一个类red，将会为以后想把颜色变为绿色增加风险。

好的一面：

  • 设置变量是朝正确方向的重要一步。
  • 将颜色和类型独立，将来为单独的文件均准备设计层。

不好的一面：

  • 命名约定很脆弱。使用serif和sans-serif会导致每个单一的CSS字体堆叠。根据其功能去命名会更好。
  • 这些变量名依赖于位置(header,content,link），限制了它们应该使用的地方。

更好地组织SASS的想法

变量只是个开始。

最后由单独的样式表或部分的Sass达到模块化设计的目，这个想法并不深远，因为它已经被Sass和其他预处理器使用， 搭配框架投入生产。

明显的优势是：

  • 易于维护——单独的一套样式将全部放到一个单独的文件中。
  • 模块化系统的重用——样式表在库或框架中可被重构和集成。

例如，所有颜色相关的CSS为了方便维护放在一个地方。所有网格布局相关的CSS放在另一个文件中，等等。每个文件可独立运行，所以可被应用到其他项目。再次说明，没有什么是以前没有做过的。

我在想达到这个目的的最好的方法是什么。我觉得应该放慢速度（不像我有时运用的强迫作出大改变），让少数的部分同时进行。在把选择器群组放到独立文件前，我觉得应该从组织逻辑群组变量出发。

以下是我随便为每个组列出的几种可能性。

  • color
  • typography
  • grid/layout
  • reset
  • base
  • forms
  • tables
  • navigation
  • components

另一个想法是围绕SMACSS的base,layout，module，state，theme类型来组织，尽管看起来像是引入了SMACSS的类型并在此之上进行扩展。

这些年我试着围绕类似的设计层来组织CSS，然而由于某种程度重叠并不理想。例如，导航链接的颜色应该划归为颜色还是导航？如何为相同的导航链接选择字体？

是配色方案或设计类型选择会改变还是导航需要改变的可能性更大呢？如果所有需要改变的都集中在一块，改变将会更易更快。

我觉得自己追求的应该从两个系统的组织入手。一是所有的导航代码放在一块，另一个是能跨过设计轻松快速地更改颜色方案。也许前者建议如何组织组织，后者建议如何组织变量。

经过仔细考虑，我认为下一步就是尝试上述方法，看看会发生什么问题，问题出现在哪。

这里有几个对此想法的帖子。正如你所看到的，我并不提供革命性的创举。只是在琢磨并将这些想法付诸更多实践。

总结

我意识到自己的想法对大多数人来说并不新奇，但也许一部分人是初次见到。它确实帮助了我全面思考并将之应用。

尽管对在Sass中写CSS迈出一步感到高兴，但距离尽己所能使用它还有很长的路要走。思考如何最佳设置变量和变量名对我来说是走向模块化SCSS文件的一大步。我希望你不介意听到我的想法。

我认为你们中的许多人对预处理器的熟悉程度已经远超于我，我很乐意听到你们是怎样为项目设置变量和文件，哪些您觉得效果好，已确认的问题点又在哪。

本文根据@Steven Bradley的《Thoughts For Better Variable Organization In SASS》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:http://vanseodesign.com/css/variable-organization-in-sass/。

薄荷

前端开发。喜欢看书，喜欢音乐。Let's share what we have。

如需转载，烦请注明出处：http://www.w3cplus.com/preprocessor/variable-organization-in-sass.htmlnike air max 1 china

返回顶部