Semantic UI 自定义样式

作者: Nodelover | 来源:发表于2015-12-28 20:59 被阅读3188次

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] <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

新建一个.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;
}

这个就是设置几列占一行的样式

<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写在.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次，不经常用的话，忘得很快。

Semantic UI 自定义样式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Semantic UI