git clone https://github.com/Semantic-Org/Semantic-UI.git
首先我看到的是.csscomb.json文件，我不知道这是什么，于是我百度了一下，这是一个csscomb的配置文件，这是一个格式化CSS的工具，而且这应该是SublimeText的csscomb插件的配置文件，因为我在package.json里面并没有找到csscomb。
npm install -g csscomb
于是我们就可以在命令行下面用csscomb命令了
Administrator@LENOVO038 /f/Yugo/test
$ csscomb
No input paths specified
Usage: csscomb [options]
Options:
-h, --help output usage information
-V, --version output the version number
-v, --verbose verbose mode
-c, --config [path] configuration file path
-d, --detect detect mode (would return detected options)
-l, --lint in case some fixes needed returns an error
新建一个.csscomb.json，并把下面的复制进去（这是官网提供的）。
传送门：http://csscomb.com/config
{
"remove-empty-rulesets": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": true,
"element-case": "upper",
"eof-newline": false,
"leading-zero": false,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": "",
"space-before-combinator": "",
"space-after-combinator": "",
"space-between-declarations": " ",
"space-before-opening-brace": " ",
"space-after-opening-brace": " ",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": " ",
"tab-size": true
}
新建一个app.css
.a{
text-align:center
}
#b{
}
运行命令
Administrator@LENOVO038 /f/Yugo/test
$ csscomb app.css
你可以看到app.css，变成了这个样子。
.a { text-align:center }
接下来是csslintrc、jslintrc、.gitignore分别是CSSLint、JSLint、Git的配置文件等，还是不纠结这些工具了，好多都感觉用不上，百度一搜CSSLint还搜出来一个CSSLint是有害的，我就无话可说了。
接下来看gulpfile.js
var gulp = require('gulp-help')(require('gulp')),
看到这句话，我还真不知道这是什么玩意，于是我就自己写个js文件，用console.log去看一下，并没有什么有价值的东西，这个方法算是比较笨的了，于是我没办法，只有上NPMJS上面去找。
https://www.npmjs.com/package/gulp-help ，于是找到了这个包。
我就在当前目录下面运行gulp help命令。
Administrator@LENOVO038 /f/Yugo/SemanticUI
$ gulp help
[20:29:03] Using gulpfile f:\Yugo\SemanticUI\gulpfile.js
[20:29:03] Starting 'help'...
Usage
gulp [TASK] [OPTIONS...]
Available tasks
build Builds all files from source
build-docs Build all files and add to SUI Docs
check-install Displays current version of Semantic
clean Clean dist folder
help Display this help text.
install Runs set-up
package compressed css
package compressed docs css
package compressed docs js
package compressed js
package uncompressed css
package uncompressed docs css
package uncompressed docs js
package uncompressed js
serve-docs Serve file changes to SUI Docs
version Displays current version of Semantic
watch Watch for site/theme changes
[20:29:03] Finished 'help' after 11 ms
可以看见gulpfile.js的task第二个参数，显示在命令行上面了。
gulp.task('watch', 'Watch for site/theme changes', watch);
gulp.task('build', 'Builds all files from source', build);
从上面的help里面就可以看到很多可以用的自动化命令。
接下来我们看src目录。
既然有readme.md那肯定要首先看这个了。
你可以把所有的semantic样式导入到你自己的less文件中。
/* Import all components */
@import 'src/semantic';
你也可以只导入部分样式，比如button，记得加上&{}
/* Import a specific component */
& { @import 'src/definitions/elements/button'; }
我们可以看到，假如没有就重命名.example结尾的文件，去掉末尾的.example就行。
semantic.less // 里面导入了所有的子组件，像上面的第二种方式一样
theme.config // 配置文件，修改主题，就需要在这里
theme.less // 载入文件，通过config的变量配置，在这个文件里面进行载入
接下来
-
definitions/真正意义上的src，这里才是真正的源文件 -
themes/主题文件夹 -
site/你自己网站的样式
好，接下来我们来看看他们是如何工作的，从 theme.config 开始
我们可以看见类似这样的变量
@site : 'default';
@themesFolder : 'themes';
@import "theme.less";
在最后可以看见，导入了theme.less。耐心，咱们慢慢找。
@theme: @@element;
/* Default site.variables */
@import "@{themesFolder}/default/globals/site.variables";
@import "@{themesFolder}/default/@{type}s/@{element}.variables";
@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";
我们又看见了这句，根据上面的（theme、与type变量放一放）
我们可以知道编译后会是这样themes/default/globals/site.variables。
到这里我们就不难猜测出，当然你还可以去该文件夹下面看一看，themes中文就是主题，显而易见，从themes文件夹中去拿到一些定义好的变量，去应用不同的样式，所以就导致了看起来不一样。
简单的来说，就是不同的变量（大小，颜色，边框，边距等）导致了不同的主题（Github、Bootstrap3、Google......），而我们只需要修改，theme.config文件下面的变量，例如@button : 'github';系统就会自动为我们去寻找该主题下的变量，然后载入。
有的朋友进去文件夹里面可能会看见这样的
button.overrides
button.variables
我们不妨先来猜测一下，overrides是空的，variables里面是有的。
override，对面向对象熟悉的人对这个不陌生，重载，又或者说是覆盖，其实在readme里面就有说明，你可以把你先要覆盖的写在override中，因为我们无论用什么框架最优的方法就是不要修改框架里面的东西，这样不利于升级。所有才有_site文件夹，你可以进去看看，发现里面全是空的类似于这样的文件。
接下来我们浅尝一下源码/src/definitions/collections/grid.less，体验一下流程
/*******************************
Theme
*******************************/
@type : 'collection';
@element : 'grid';
@import (multiple) '../../theme.config';
注释是主题，ok这肯定与主题相关。还记得theme、与type变量吗？
就是从这里来的,你会发现有一个@import (optional),其实你可以对比一下有option与没有之前的区别，没错就是default变成了@{theme}，那明显就是切换主题的喽，根据名字去载入不同文件夹下面的变量。
@import "@{themesFolder}/default/@{type}s/@{element}.variables";
对于optional这个选项我查了一下中文官网文档好像并没有，于是google了一下，说白了就是带有覆盖功能的import，地址如下，想看的可以去看看。
https://github.com/less/less.js/issues/2145
/*******************************
Standard 标准
*******************************/
.ui.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
padding: 0em;
}
因为是响应式布局，采用flex。方向是row，超出换行，纵向拉伸。
/*----------------------
Remove Gutters 移除没用的沟le
-----------------------*/
.ui.grid {
margin-top: -(@rowSpacing / 2);
margin-bottom: -(@rowSpacing / 2);
margin-left: -(@gutterWidth / 2);
margin-right: -(@gutterWidth / 2);
}
.ui.relaxed.grid {
margin-left: -(@relaxedGutterWidth / 2);
margin-right: -(@relaxedGutterWidth / 2);
}
.ui[class*="very relaxed"].grid {
margin-left: -(@veryRelaxedGutterWidth / 2);
margin-right: -(@veryRelaxedGutterWidth / 2);
}
/* Preserve Rows Spacing on Consecutive Grids */
.ui.grid + .grid {
margin-top: @consecutiveGridDistance;
}
.very.relaxed.ui.grid的左右外边距会别.relaxed.ui.grid/.ui.grid宽
.ui.grid的相邻.grd的上外边距可能跟普通的有点不一样。
这些都可以在
组件变量/src/themes/default/collections/grid.variables或者
全局变量/src/themes/default/globals/site.variables找到，前提是你使用的默认样式。
/*-------------------
Columns
--------------------*/
/* Standard 16 column */
.ui.grid > .column:not(.row),
.ui.grid > .row > .column {
position: relative;
display: inline-block;
width: @oneWide;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
vertical-align: top;
}
.ui.grid > * {
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
}
标准的 16 列一行结构
这个变量在全局的变量里找到。
@columnCount: 16;
@oneWide : (1 / @columnCount * 100%);
这些都是使用的%布局。
每一个.column就是十六分之一的宽度
/*-------------------
Rows
--------------------*/
.ui.grid > .row {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: inherit;
align-items: stretch;
width: 100% !important;
padding: 0rem;
padding-top: (@rowSpacing / 2);
padding-bottom: (@rowSpacing / 2);
}
通过设置width:100%使其沾满一行
有一些小的就忽略掉了，主要看大体。
/* Grid Based */
.ui[class*="one column"].grid > .row > .column,
.ui[class*="one column"].grid > .column:not(.row) {
width: @oneColumn;
}
.ui[class*="two column"].grid > .row > .column,
.ui[class*="two column"].grid > .column:not(.row) {
width: @twoColumn;
}
这个就是设置几列占一行的样式
第一行第一列
第一行第二列
第二行第一列
.ui.grid > [class*="one column"].row > .column {
width: @oneColumn !important;
}
.ui.grid > [class*="two column"].row > .column {
width: @twoColumn !important;
}
这样你还可以把two column写在.row上面
.ui.centered.grid,
.ui.centered.grid > .row,
.ui.grid > .centered.row {
text-align: center;
justify-content: center;
}
.ui.centered.grid > .column:not(.aligned):not(.row),
.ui.centered.grid > .row > .column:not(.aligned),
.ui.grid .centered.row > .column:not(.aligned) {
text-align: left;
}
.ui.grid > .centered.column,
.ui.grid > .row > .centered.column {
display: block;
margin-left: auto;
margin-right: auto;
}
设置居中flex里面的元素居中，且只有.aligned.centered才会让文本居中。
/*----------------------
Relaxed 给元素的边距设置的大一点
-----------------------*/
/*----------------------
Padded 边距为0
-----------------------*/
/*----------------------
"Floated"
-----------------------*/
.ui.grid [class*="left floated"].column {
margin-right: auto;
}
.ui.grid [class*="right floated"].column {
margin-left: auto;
}
// 有的人会问浮动为什么不是float。
// 因为这是flex布局，当左边的边距等于auto，他就自动到最右边，同理另一边也是。
其他的就是一些改变边距，背景颜色，以及flex布局方向的东西。经过Semantiui grid 包装了之后可以不需要懂太多的flex布局，但是我还是推荐学习flex布局，阮一峰的《Flex 布局教程：语法篇》不错，我也看了4、5次，不经常用的话，忘得很快。