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)常用的話漱病,忘得很快。