git clone https://github.com/Semantic-Org/Semantic-UI.git

首先我看到的是.csscomb.json文件，我不知道這是什么送悔，于是我百度了一下艘款，這是一個(gè)csscomb的配置文件，這是一個(gè)格式化CSS的工具突想，而且這應(yīng)該是SublimeText的csscomb插件的配置文件殴蹄，因?yàn)槲以?code>package.json里面并沒(méi)有找到csscomb。

npm install -g csscomb

于是我們就可以在命令行下面用csscomb命令了

Administrator@LENOVO038 /f/Yugo/test
$ csscomb
No input paths specified

  Usage: csscomb [options] <file ...>

  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

新建一個(gè).csscomb.json猾担，并把下面的復(fù)制進(jìn)去（這是官網(wǎng)提供的）袭灯。
傳送門(mén)：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
}

新建一個(gè)app.css

.a{
    text-align:center
}
#b{
}

運(yùn)行命令

Administrator@LENOVO038 /f/Yugo/test
$ csscomb app.css

你可以看到app.css，變成了這個(gè)樣子绑嘹。

.a { text-align:center }

接下來(lái)是csslintrc妓蛮、jslintrc、.gitignore分別是CSSLint圾叼、JSLint蛤克、Git的配置文件等，還是不糾結(jié)這些工具了夷蚊，好多都感覺(jué)用不上构挤，百度一搜CSSLint還搜出來(lái)一個(gè)CSSLint是有害的，我就無(wú)話可說(shuō)了惕鼓。

接下來(lái)看gulpfile.js

var gulp = require('gulp-help')(require('gulp')),

看到這句話筋现，我還真不知道這是什么玩意，于是我就自己寫(xiě)個(gè)js文件，用console.log去看一下矾飞，并沒(méi)有什么有價(jià)值的東西一膨，這個(gè)方法算是比較笨的了，于是我沒(méi)辦法洒沦，只有上NPMJS上面去找豹绪。
https://www.npmjs.com/package/gulp-help ，于是找到了這個(gè)包申眼。

我就在當(dāng)前目錄下面運(yùn)行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

可以看見(jiàn)gulpfile.js的task第二個(gè)參數(shù)，顯示在命令行上面了括尸。

gulp.task('watch', 'Watch for site/theme changes', watch);
gulp.task('build', 'Builds all files from source', build);

從上面的help里面就可以看到很多可以用的自動(dòng)化命令巷蚪。

接下來(lái)我們看src目錄。
既然有readme.md那肯定要首先看這個(gè)了濒翻。

你可以把所有的semantic樣式導(dǎo)入到你自己的less文件中屁柏。

/* Import all components */
@import 'src/semantic';

你也可以只導(dǎo)入部分樣式，比如button有送，記得加上&{}

/* Import a specific component */
& { @import 'src/definitions/elements/button'; }

我們可以看到前联，假如沒(méi)有就重命名.example結(jié)尾的文件，去掉末尾的.example就行娶眷。

semantic.less  // 里面導(dǎo)入了所有的子組件似嗤，像上面的第二種方式一樣
theme.config  // 配置文件，修改主題届宠，就需要在這里
theme.less     // 載入文件烁落，通過(guò)config的變量配置，在這個(gè)文件里面進(jìn)行載入

接下來(lái)

• definitions/ 真正意義上的src豌注，這里才是真正的源文件
• themes/ 主題文件夾
• site/ 你自己網(wǎng)站的樣式

好伤塌，接下來(lái)我們來(lái)看看他們是如何工作的，從 theme.config 開(kāi)始

我們可以看見(jiàn)類(lèi)似這樣的變量
@site       : 'default';
@themesFolder : 'themes';
@import "theme.less";

在最后可以看見(jiàn)轧铁，導(dǎo)入了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";

我們又看見(jiàn)了這句药薯，根據(jù)上面的（theme、與type變量放一放）
我們可以知道編譯后會(huì)是這樣themes/default/globals/site.variables救斑。
到這里我們就不難猜測(cè)出童本，當(dāng)然你還可以去該文件夾下面看一看，themes中文就是主題脸候，顯而易見(jiàn)穷娱，從themes文件夾中去拿到一些定義好的變量绑蔫，去應(yīng)用不同的樣式，所以就導(dǎo)致了看起來(lái)不一樣泵额。
簡(jiǎn)單的來(lái)說(shuō)配深，就是不同的變量（大小，顏色嫁盲，邊框篓叶，邊距等）導(dǎo)致了不同的主題（Github、Bootstrap3亡资、Google......），而我們只需要修改向叉，theme.config文件下面的變量锥腻，例如@button : 'github';系統(tǒng)就會(huì)自動(dòng)為我們?nèi)ふ以撝黝}下的變量，然后載入母谎。

有的朋友進(jìn)去文件夾里面可能會(huì)看見(jiàn)這樣的

button.overrides
button.variables

我們不妨先來(lái)猜測(cè)一下瘦黑，overrides是空的，variables里面是有的奇唤。
override幸斥，對(duì)面向?qū)ο笫煜さ娜藢?duì)這個(gè)不陌生，重載咬扇，又或者說(shuō)是覆蓋甲葬，其實(shí)在readme里面就有說(shuō)明，你可以把你先要覆蓋的寫(xiě)在override中懈贺，因?yàn)槲覀儫o(wú)論用什么框架最優(yōu)的方法就是不要修改框架里面的東西经窖，這樣不利于升級(jí)。所有才有_site文件夾梭灿，你可以進(jìn)去看看画侣，發(fā)現(xiàn)里面全是空的類(lèi)似于這樣的文件。

接下來(lái)我們淺嘗一下源碼/src/definitions/collections/grid.less堡妒，體驗(yàn)一下流程

/*******************************
            Theme
*******************************/

@type    : 'collection';
@element : 'grid';

@import (multiple) '../../theme.config';

注釋是主題配乱，ok這肯定與主題相關(guān)。還記得theme皮迟、與type變量嗎搬泥？
就是從這里來(lái)的,你會(huì)發(fā)現(xiàn)有一個(gè)@import (optional),其實(shí)你可以對(duì)比一下有option與沒(méi)有之前的區(qū)別，沒(méi)錯(cuò)就是default變成了@{theme}伏尼，那明顯就是切換主題的嘍佑钾，根據(jù)名字去載入不同文件夾下面的變量。

@import "@{themesFolder}/default/@{type}s/@{element}.variables";

對(duì)于optional這個(gè)選項(xiàng)我查了一下中文官網(wǎng)文檔好像并沒(méi)有烦粒，于是google了一下休溶，說(shuō)白了就是帶有覆蓋功能的import代赁，地址如下，想看的可以去看看兽掰。

https://github.com/less/less.js/issues/2145

/*******************************
            Standard 標(biāo)準(zhǔn)
*******************************/

.ui.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0em;
}

因?yàn)槭琼憫?yīng)式布局芭碍，采用flex。方向是row孽尽，超出換行窖壕，縱向拉伸。

/*----------------------
      Remove Gutters 移除沒(méi)用的溝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的左右外邊距會(huì)別.relaxed.ui.grid/.ui.grid寬
.ui.grid的相鄰.grd的上外邊距可能跟普通的有點(diǎn)不一樣杉女。
這些都可以在
組件變量/src/themes/default/collections/grid.variables或者
全局變量/src/themes/default/globals/site.variables找到瞻讽，前提是你使用的默認(rèn)樣式。

/*-------------------
       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);
}

標(biāo)準(zhǔn)的 16 列一行結(jié)構(gòu)
這個(gè)變量在全局的變量里找到熏挎。
@columnCount: 16;
@oneWide : (1 / @columnCount * 100%);
這些都是使用的%布局速勇。
每一個(gè).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);
}

通過(guò)設(shè)置width:100%使其沾滿(mǎn)一行
有一些小的就忽略掉了，主要看大體坎拐。

/* 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;
}

這個(gè)就是設(shè)置幾列占一行的樣式

<div class="ui two column grid">
  <div class="column">第一行第一列</div>
  <div class="column">第一行第二列</div>
  <div class="column">第二行第一列</div>
</div>

.ui.grid > [class*="one column"].row > .column {
  width: @oneColumn !important;
}
.ui.grid > [class*="two column"].row > .column {
  width: @twoColumn !important;
}

這樣你還可以把two column寫(xiě)在.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;
}

設(shè)置居中flex里面的元素居中烦磁，且只有.aligned.centered才會(huì)讓文本居中。

/*----------------------
        Relaxed 給元素的邊距設(shè)置的大一點(diǎn)
-----------------------*/


/*----------------------
        Padded 邊距為0
-----------------------*/

/*----------------------
       "Floated"
-----------------------*/
.ui.grid [class*="left floated"].column {
  margin-right: auto;
}
.ui.grid [class*="right floated"].column {
  margin-left: auto;
}
// 有的人會(huì)問(wèn)浮動(dòng)為什么不是float哼勇。
// 因?yàn)檫@是flex布局都伪，當(dāng)左邊的邊距等于auto，他就自動(dòng)到最右邊积担，同理另一邊也是陨晶。

其他的就是一些改變邊距，背景顏色帝璧，以及flex布局方向的東西珍逸。經(jīng)過(guò)Semantiui grid 包裝了之后可以不需要懂太多的flex布局，但是我還是推薦學(xué)習(xí)flex布局聋溜，阮一峰的《Flex 布局教程：語(yǔ)法篇》不錯(cuò)谆膳，我也看了4、5次撮躁，不經(jīng)常用的話漱病，忘得很快。