Semantic UI 自定義樣式

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.jstask第二個(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)常用的話漱病,忘得很快。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末把曼,一起剝皮案震驚了整個(gè)濱河市杨帽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌嗤军,老刑警劉巖注盈,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異叙赚,居然都是意外死亡老客,警方通過(guò)查閱死者的電腦和手機(jī)僚饭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)胧砰,“玉大人鳍鸵,你說(shuō)我怎么就攤上這事∥炯洌” “怎么了偿乖?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)哲嘲。 經(jīng)常有香客問(wèn)我贪薪,道長(zhǎng),這世上最難降的妖魔是什么眠副? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任画切,我火速辦了婚禮,結(jié)果婚禮上侦啸,老公的妹妹穿的比我還像新娘槽唾。我一直安慰自己丧枪,他們只是感情好光涂,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著拧烦,像睡著了一般忘闻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上恋博,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天齐佳,我揣著相機(jī)與錄音,去河邊找鬼债沮。 笑死炼吴,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的疫衩。 我是一名探鬼主播硅蹦,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼闷煤!你這毒婦竟也來(lái)了童芹?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤鲤拿,失蹤者是張志新(化名)和其女友劉穎假褪,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體近顷,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡生音,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年宁否,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片久锥。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡家淤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瑟由,到底是詐尸還是另有隱情絮重,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布歹苦,位于F島的核電站青伤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏殴瘦。R本人自食惡果不足惜狠角,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蚪腋。 院中可真熱鬧丰歌,春花似錦、人聲如沸屉凯。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)悠砚。三九已至晓勇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間灌旧,已是汗流浹背绑咱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枢泰,地道東北人描融。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像衡蚂,于是被迫代替她去往敵國(guó)和親窿克。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案讳窟? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理让歼,服務(wù)發(fā)現(xiàn),斷路器丽啡,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,328評(píng)論 25 707
  • 刪除xcode插件: ~/Library/Application Support/Developer/Shared...
    小小機(jī)器人閱讀 109評(píng)論 0 0
  • 今天突然想學(xué)起HTML谋右,去圖書(shū)館借了一本書(shū),害怕自己以后會(huì)忘記了补箍,我還是將關(guān)鍵點(diǎn)記錄下來(lái)改执!方便我以后復(fù)習(xí)~仔細(xì)不容...
    干貨助手閱讀 647評(píng)論 1 2