源码分析：如何定制Semantic-UI

SemanticUI简介

我来如今就任的这家公司以前，只使用过Bootstrap，并不知道SemanticUI。后来接手了如今的项目以后才知道有这么个框架。相比于盛行的Bootstrap，SemanticUI有它的值得使用的地方。

• SemanticUI 像它的名字同样。更加语义化。
• 默认的样式比Bootstrap好看不少，更加鲜明活泼。我的感受。
• 类名比Bootstrap短。而且更加离散。嵌套层级也少不少。

可是它有一个很让人头疼的缺点，就是对开发者的种种不友好。

• 文档不够详细，不少模块的使用方法都是寥寥数语，或者放的地方很深。须要依靠你本身的编程经验去猜。
• 模块定制并不像Bootstrap那样能够直接勾选本身须要的模块而后打包。在SemanticUI中，你必须在npm安装过程当中选择要安装哪些模块。
• yarn不友好。如上一条，npm中能够在过程当中选择安装哪些模块。可是SemanticUI的安装脚本不被yarn所识别。必须yarn add semantic-ui --ignore-scripts才能够。添加了ignore-scriptes选项天然也就丧失了定制化的功能。因为我如今用的框架是RoR，默认使用的前端管理工具就是yarn，因此感受很难受。

以上只是随便说了说SemanticUI与Bootstrap的区别，并不全面。由于这不是本文主要内容。

定制SemanticUI

有时候咱们但愿全局地定制SemanticUI。好比SemanticUI的默认字体大小为14px。而咱们的项目默认大小为12px。在我接手项目的时候，诸如此类与框架提供样式相悖的样式都是直接在一个init.scss文件中进行覆盖来重置。感受很丑，也会形成代码的冗余。

可是因为刚接手时并不了解SemanticUI，并且我身为一个前端程序员入职时竟然直接让我上手开发Rails应用，手忙脚乱的我全身心都在学Rails根本没时间考虑这个问题。而且，在SemanticUI 官网中不能很容易地找到定制的方法（实际上是有的，可是东一块西一块很难系统地贯穿起来）。因此我也就照着原来的样子作了这个项目一年。

init.scss中有些样式难以找到原来定义的地方，覆盖很是困难。chrome-dev-tool看穿了才会在一个六七行的选择器后面找到这个样式的定义，而后加一下权重进行覆盖 —— 就是再写一个六七行甚至七八行的选择器。不想再说了，痛苦。

最近老板发话了，要作前端的大改版。我终于有机会也有时间进行大重构了。过程可能会跟撕痂同样痛苦，但结果必定会跟撕完了同样爽。

如何入手

我是在SemanticUI的Github的src文件夹中看到了这个README.md才知道怎么作的。

里面讲了一些如何重置SemanticUI默认样式，构建适合本身项目的SemanticUI的方法。我一眼就看到了底下的一些关键词reset，font size。惊呆了，原来在这。因而细细地读了起来。

这篇README讲了什么呢？

1. 如何构建SemanticUI。直接gulp install。
2. 能够监控文件实时构建。gulp watch。
3. 配置文件的位置。
4. 工做流。使用构建工具构建你专属的SemanticUI并在项目中直接使用构建完成的定制包。
5. 主题化。
6. 定制化。

咱们要作的是定制本身的主题，本身的UI规范（字体大小，字体颜色，行高，一级二级三级主题色等等...）。因此咱们能够先从5和6入手。

主题与样式的层级关系

主题的定义文件有必定的层级关系：

1. SemanticUI的默认主题。就是什么也不设置一路回车而后直接构建直接使用的主题。
2. SemanticUI提供的可选的预置的主题包。好比amazon主题或者material主题。
3. 组件自有的主题。好比全局主题色是#f5f5f5，可是primary按钮组件本身的主题色是蓝色，则以蓝色为准。
4. 你本身定制的主题。

某个元素应用的主题，是以上面四条倒序查找的。你本身定制的主题优先，没定制则寻找可选主题。若是没进行任何设置，则使用默认主题。

目录结构

以上的主题都是在哪里定义的呢？咱们如何修改它？文中提到了目录结构。

• src/definitions 文件夹中定义了每一个组件使用的js和css。
• src/themes 中存放了SemanticUI提供的全部可用的主题。在咱们构建时能够选择一个来使用。默认主题也在这里面。
• src/site 你的专有主题。

源码验证

咱们先打开src/semantic.less文件。在文件的最顶部有这样的语句：

& { @import "definitions/globals/reset"; }
复制代码

这里导入了一个reset文件到当前的semantic.less。咱们来看一下reset中都有什么。首先，reset文件的顶部定义了两个变量，一个叫作@type一个叫作@element。

@type    : 'global';
@element : 'reset';
复制代码

紧接着导入了主题配置文件：@import (multiple) '../../theme.config';。在这个配置文件中咱们又看到了以下两个变量：

/* Global */
@site       : 'default';
@reset      : 'default';

...... ......

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder   : 'site/';
复制代码

注释写的很清楚了，是文件夹路径变量。分别是主题包路径和覆盖文件的路径。这两个路径在哪里被用到了呢？继续看这个文件，在最底部，引入了一个theme.less文件。该文件中有这样一段代码：

/*--------------------
   Site Variables
---------------------*/

/* Default site.variables */
@import "@{themesFolder}/default/globals/site.variables";

/* Packaged site.variables */
@import "@{themesFolder}/@{site}/globals/site.variables";

/* Component's site.variables */ @import (optional) "@{themesFolder}/@{theme}/globals/site.variables"; /* Site theme site.variables */ @import (optional) "@{siteFolder}/globals/site.variables"; 复制代码

注释代表是网站变量。里面用到了上一个文件theme.config中定义的四个变量。指向了四个路径引入了四个文件。到这里你应该意识到了，咱们重置样式的地方应该就在这些地方。

请注意这四个文件的顺序：

1. default网站变量。
2. 可选包网站变量。
3. 组件本身的变量。
4. 你本身定制的网站变量。

因为CSS的特性，层级同样的重复声明的样式是后盖前。因此以上文件之后面的为准。即，最权威的是你本身定义的样式。这与以前所说的主题层级的加载优先级是吻合的。

回顾一下theme.config。这里定义的变量：

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder   : 'site/';
复制代码

咱们便知道这四个路径都指到哪里了。既然以咱们自定义的主题为准，那么咱们直接看@import (optional) "@{siteFolder}/globals/site.variables";也就是site/globals/site.variables。里面空空如也，只有一句注释：用户全局变量。找到了！咱们只要在这里重置样式就能够了。

定位到文件了，该如何书写呢？面对空空如也的文件无从下手？一般面对这种状况，最好的作法是看它默认的文件是怎么写的。

打开src/themes/default/globals/site.variables，看到下面几个代码片断，你就会茅塞顿开：

@fontName          : 'Lato';

......


@emSize   : 14px;

@fontSize : 14px;
......

@primaryColor        : @blue;
@secondaryColor      : @black;

......

复制代码

以字体大小为例，若是咱们要更改咱们全局的字体大小，以12px为基准。咱们回到咱们空空的site/globals/site.variables文件。添加以下代码：

@emSize   : 12px;

@fontSize : 12px;

复制代码

这样咱们就完成了样式覆盖，使用12px做为基准字体大小了。

触类旁通

咱们已经会了如何定制全局的样式。那么一些特殊化的定制要如何完成呢？好比，全局字体大小为12px，可是产品和UI要求了，全部的按钮内字体都要是14px。

其实根据上面的经验，咱们的作法仍是同样的。

首先打开src/site/elements/button.variables。熟悉的一幕又出现了：只有一句注释。再打开src/themes/default/elements/button.variables又看到了使人兴奋的片断（别想歪）：

/* Button */
@verticalMargin: 0em;
@horizontalMargin: 0.25em;
@backgroundColor: #E0E1E2;
@backgroundImage: none;
@background: @backgroundColor @backgroundImage;
@lineHeight: 1em;
复制代码

咋整？回到那个空文件进行变量覆盖呀~就这么简单。

最后一步

已经对默认的样式进行覆盖了，是时候打包咱们本身的SemanticUI了！

gulp clean
gulp build
复制代码

打包成功后使用时会发现，样式乖乖的都按规定走了。不再用写七八行的选择器了。爽。再见了init.scss。

讨论

有的人说了，既然都动了源码，干吗不直接在src/themes/default/elements/button.variables改了算了。有两个缘由不这么作：

1. 不讲道理的缘由：官方说了你最好在本身的重置文件里写。
2. 由于你在本身的重置文件里写，知道本身重置了哪些样式，而直接修改原来的，就啥也不知道了。

学会了这种方式之后，你就能够基于SemanticUI进行“二次开发”，打造适合你的SemanticUI框架。

安利

丑爆手搭博客了解一下：http://qxchenblog.cn