Nojiko

Nojiko 是一个使用 SCSS 编写的基础工具库，其中包含如下内容：

一组工具函数及混入类；
一组通用配置变量；
一套基础全局样式；
以及一套原子样式。

原则

不依赖 JS；
不限定 HTML 结构；
兼容多种客户端；
兼容 browserslist 的默认规则所匹配的浏览器;

安装

1. 在项目中安装 nojiko：

$ yarn add nojiko
$ npm install nojiko

2. 配置引入路径：将 node_modules 目录添加到 SASS 编译器的 includePaths 配置中（当然你也可以根据你的项目自行配置，但要注意这可能会导致下一步中的引入路径有所不同）。

3. 按需引入 nojiko：

@import "nojiko/sass/nojiko";       // 提供 Helpers、Add-ons、List 及 Map 四个分组下所定义的所有函数及混入类

@import "nojiko/sass/variables";    // 提供 Variables 分组下所定义的所有全局配置变量，依赖 nojiko 模块
@import "nojiko/sass/scaffolding";  // 提供 Scaffolding 分组下所定义的一套全局脚手架样式，依赖 variables 模块
@import "nojiko/sass/elements";     // 提供 Elements 分组下所定义的一套原子样式类，依赖 variables 模块

升级

Nojiko 采用语义化版本控制，并提供了一份详细的更新记录，请在升级之前仔细阅读该更新记录。

其它 SASS 库

sass-mq 更方便的书写媒体查询样式；
sass-true 对 sass 的混入类及函数做单元测试；

Variables

Nojiko 定义了一组通用的全局配置变量，用于统一管理项目中的文字样式、颜色定义等：

变量	类型	默认值	说明
$support-for-ie8	boolean	`false`	是否支持 IE8
$images-path	string	`'../images'`	存放图片文件的目录路径
$fonts-path	string	`'../fonts'`	存放字体文件的目录路径
$svg-path	string	`'../svg'`	存放 SVG 文件的目录路径
$font-family	list	`$FONT-FAMILY-SERIF`	默认字体集；除了自己指定字体集之外，Nojiko 还提供了如下几个常用字体集以供选用： `$FONT-FAMILY-SANS-SERIF` 英文无衬线字体集 `$FONT-FAMILY-SERIF` 英文衬线字体集 `$FONT-FAMILY-FIXED-FONT` 英文等宽字体集 `$FONT-FAMILY-CHINESE-SANS-SERIF` 较适合中文环境的无衬线字体集
$font-family-monspace	list	`$FONT-FAMILY-FIXED-FONT`	默认代码字体集
$font-size-base	number	`14px`	默认文字大小
$font-size-large	number	`18px`	较大文字大小
$font-size-small	number	`12px`	较小文字大小
$line-height-base	number	`1.428571429`	默认文字行高，该变量与 `$font-size-base` 对应
$line-height-large	number	`1.34`	较大文字行高，该变量与 `$font-size-large` 对应
$line-height-small	number	`1.5`	较小文字行高，该变量与 `$font-size-small` 对应
$gray-darker	color	`lighten(#000, 13.5%)`	深灰色
$gray-dark	color	`lighten(#000, 20%)`	暗灰色
$gray	color	`lighten(#000, 33.5%)`	灰色
$gray-light	color	`lighten(#000, 60%)`	淡灰色
$gray-lighter	color	`lighten(#000, 93.5%)`	浅灰色
$primary-color	color	`#428bca`	主色
$background-color	color	`#fff`	背景色
$line-color	color	`#d7d7d7`	线条颜色
$text-color	color	`$gray-dark`	文本颜色
$text-color-quiet	color	`$gray-light`	次要文本颜色
$text-color-loud	color	`$gray-dark`	强调文本颜色
$link-color	color	`$primary-color`	链接颜色
$link-focus-color	color	`darken($link-color, 15%)`	链接获取到焦点时的颜色
$link-visited-color	color	`$link-color`	已访问过的链接的颜色
$placeholder-color	color	`lighten($text-color, 40%)`	占位符颜色
$info-color	color	`#5bc0de`	消息色：用于非重要性的提示内容
$success-color	color	`#5cb85c`	成功色：用于表示成功状态的内容
$warning-color	color	`#f0ad4e`	警告色：用于具有风险性的内容，需要提醒用户关注并警觉时
$danger-color	color	`#d9534f`	危险色：用于具有危险、错误等性质的内容，需要通知用户需立即进行处理时
$default-box-sizing	string	`content-box`	全局盒模型尺寸计算模式，可选择使用 `content-box` 或 `border-box`
$page-width	boolean number	`false`	页面宽度，若定义为 false 则表示页面为非定宽布局
$distance-horizontal	number	`20px`	模块之间的水平间距
$distance-horizontal-large	number	`40px`	较大的模块之间的水平间距
$distance-horizontal-small	number	`10px`	较小的模块之间的水平间距
$distance-vertical	number	`20px`	模块之间的垂直间距
$distance-vertical-large	number	`40px`	较大的模块之间的垂直间距
$distance-vertical-small	number	`10px`	较小的模块之间的垂直间距

Helpers

Helpers 分组提供一些辅助性的函数及混入类，用于方便地书写某些复杂样式（如 position 混入类），以及用于一些计算或条件判断操作（如 is-dark 函数）。

示例

$dialog-bg: #fff;

.dialog {
    @include size(80%, 60%);
    @include position(fixed, 20% 10%, 1);

    background: $dialog-bg;
    color: if(is-light($dialog-bg), #333, #fff);
}

输入样式：

.dialog {
    width: 80%;
    height: 60%;

    position: fixed;
    top: 20%;
    bottom: 20%;
    left: 10%;
    right: 10%;
    z-index: 1;

    background: #fff;
    color: #333;
}

Functions

source `compute-line-height`

获取计算为有单位值的行高

参数

$font-size Number: 文字大小
$line-height Number: 文本行高

示例

line-height: compute-line-height(12px, 1.5);    // => 18px
line-height: compute-line-height(12px, 1.5em);  // => 1.5em

source `is-dark`

判断所传入的颜色是否是偏深色的

返回值 Boolean

是否为深色色值

参考链接

A Closer Look at Color Lightness

source `is-light`

判断所传入的颜色是否是偏浅色的

返回值 Boolean

是否是浅色色值

参考链接

A Closer Look at Color Lightness

source `strip-unit`

删除一个数值类型数据的单位

参数

$number Number: 需要移除其单位的数值

返回值 Number

一个无单位的数值

示例

strip-unit(20px);    // 20
strip-unit(1.7em);   // 1.7
strip-unit(3rem);    // 3

Mixins

source `inline-block`

设置行内块元素及其垂直对齐方式。

参数

$vertical-align String Default: null: 设置垂直对齐方向

示例

source

.box {
    @include inline-block;
}

output

.box {
    display: inline-block;
}

source

.box {
    @include inline-block(middle);
}

output

.box {
    display: inline-block;
    vertical-align: middle;
}

source `margin`

快速设置元素的 margin 值

参数

$vals List: 所设置的外边距的值

示例

source

@include margin(10px);

@include margin(10px null 10px);


@include margin(10px 10px 10px null);

output

margin: 10px;

margin-top: 10px;
margin-bottom: 10px;

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;

source `opacity`

为元素设置不透明度

Note：如果项目不需要兼容 IE8，可以不使用该方法。

参数

$opacity Number: 需设置的不透明度值

示例

source

.box {
    @include opacity(0.2);
}

output

.box {
    opacity: 0.2;

    /* 如果配置支持 IE8, 则额外输出如下代码： */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
}

source `transparent`

设置元素为全透明，既 opacity: 0

示例

source

.box {
    @include transparent;
}

output

.box {
    opacity: 0;

    /* 如果配置支持 IE8, 则额外输出如下代码： */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

source `opaque`

设置元素为全不透明，既 opacity: 1

示例

source

.box {
    @include opacity;
}

output

.box {
    opacity: 1;

    /* 如果配置支持 IE8, 则额外输出如下代码： */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

source `padding`

快速设置元素的 padding 值

参数

$vals List: 所设置的内边距的值

示例

source

@include padding(10px);

@include padding(10px null 10px);


@include padding(10px 10px 10px null);

output

padding: 10px;

padding-top: 10px;
padding-bottom: 10px;

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;

source `position`

用于快速书写 postion 相关样式规则，可以同时定义 position，left，right，top，bottom 以及 z-index 五个规则。

参数

$position String Default: relative: 定位类型
$coordinates List Default: null null null null: 各个方向的定位距离
$z-index Number Default: null: 层叠数值

示例

source

.box {
    @include position();
}

output

.box {
    position: relative;
}

source

.box {
    @include position(absolute, 50% null null 50%, 100);
}

output

.box {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 100;
}

source `size`

设置元素的宽度和高度

输出说明

如果只传入一个参数，则该参数将作为所设置元素的宽度及高度值；如果传入两个参数，则第一个作为宽度值，而第二个作为高度值；如果某一个值为 null，则不设置其对应的属性。

示例

source

@include size(10px);
@include size(10px, 20px);
@include size(10px, null);

output

width: 10px; height: 10px;
width: 10px; height: 20px;
width: 10px;

source `min-size`

设置元素的最小宽度和高度

输出说明

如果只传入一个参数，则该参数将作为所设置元素的最小宽度及高度值；如果传入两个参数，则第一个作为最小宽度值，而第二个作为最小高度值；如果某一个值为 null，则不设置其对应的属性。

示例

source

@include min-size(10px);
@include min-size(10px, 20px);
@include min-size(10px, null);

output

min-width: 10px; min-height: 10px;
min-width: 10px; min-height: 20px;
min-width: 10px;

source `max-size`

设置元素的最大宽度和高度

输出说明

如果只传入一个参数，则该参数将作为所设置元素的最大宽度及高度值；如果传入两个参数，则第一个作为最大宽度值，而第二个作为最大高度值；如果某一个值为 null，则不设置其对应的属性。

示例

source

@include max-size(10px);
@include max-size(10px, 20px);
@include max-size(10px, null);

output

max-width: 10px; max-height: 10px;
max-width: 10px; max-height: 20px;
max-width: 10px;

source `translucent-bgcolor`

为元素设置半透明背景色，在低版本的 IE 浏览器中，会使用 filter 实现该效果。

Note：因为 IE9 同时支持 alpha 以及 filter，因此在应用 IE Hack 时会导致两个设置相互重叠，使得最终显示的颜色要比所设置的颜色深一些。

参数

$color Color: 所设置的背景色
$alpha Number Default: null: 若所设置的色值中不包含 alpha 通道，则可以使用该参数单独指定

示例

source

.box {
    @include translucent-background(rgba(0, 0, 0, .2));
}

output

.box {
    background: rgba(0, 0, 0, .2);

    /* if support ie8, has this. */
    zoom: 1\9;
    filter: progid:DXImageTransform.Microsoft.Gradient(
        GradientType=0,
        StartColorStr='#33000000',
        EndColorStr='#33000000'
    );
}

source

.box {
    @include translucent-background(#000, .2);
}

output

.box {
    background: rgba(0, 0, 0, .2);

    /* if support ie8, has this. */
    zoom: 1\9;
    filter: progid:DXImageTransform.Microsoft.Gradient(
        GradientType=0,
        StartColorStr='#33000000',
        EndColorStr='#33000000'
    );
}

Add-ons

Functions

source `superfine-border`

使用线性渐变背景图模拟实现超细边框。

需要注意的是，该方案有如下两条限制：

该方案所实现的是 0.5 像素的边框，而非 1 物理像素的边框；
该方案不支持圆角。

虽然如此，但若综合考虑兼容性、性能及所生成的代码量，我们认为这仍是一个较好的方案，因此选择提供它。

如果受限于以上所列的两点，不能使用该方案，那么可以参考如下两个链接中所述的其它方案：

为便于创建特定方向的边框，额外提供如下六个方法：

superfine-border-top - 顶部边框；

superfine-border-bottom - 底部边框；

superfine-border-left - 左侧边框；

superfine-border-right - 右侧边框；

superfine-border-vertical - 顶部及底部边框；

superfine-border-horizontal - 左侧及右侧边框；

参数

$colors Color: 边框的颜色，支持缩写格式

示例

source

.box {
    background: superfine-border(#000);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #000, #000 50%, transparent 50%),
                bottom center/100% 1px no-repeat linear-gradient(0deg, #000, #000 50%, transparent 50%),
                center left/1px 100% no-repeat linear-gradient(90deg, #000, #000 50%, transparent 50%),
                center right/1px 100% no-repeat linear-gradient(270deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border(#000 null);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #000, #000 50%, transparent 50%),
                bottom center/100% 1px no-repeat linear-gradient(0deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border(#000 null null);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border(#f00 #0f0 #00f #000);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #f00, #f00 50%, transparent 50%),
                bottom center/100% 1px no-repeat linear-gradient(0deg, #00f, #00f 50%, transparent 50%),
                center left/1px 100% no-repeat linear-gradient(90deg, #000, #000 50%, transparent 50%),
                center right/1px 100% no-repeat linear-gradient(270deg, #0f0, #0f0 50%, transparent 50%);
}

source

.box {
    background: superfine-border-top(#000);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border-bottom(#000);
}

output

.box {
    background: bottom center/100% 1px no-repeat linear-gradient(0deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border-left(#000);
}

output

.box {
    background: center left/1px 100% no-repeat linear-gradient(90deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border-right(#000);
}

output

.box {
    background: center right/1px 100% no-repeat linear-gradient(270deg, #000, #000 50%, transparent 50%),
}

source

.box {
    background: superfine-border-vertical(#000);
}

output

.box {
    background: top center/100% 1px no-repeat linear-gradient(180deg, #000, #000 50%, transparent 50%),
                bottom center/100% 1px no-repeat linear-gradient(0deg, #000, #000 50%, transparent 50%);
}

source

.box {
    background: superfine-border-horizontal(#000);
}

output

.box {
    background: center left/1px 100% no-repeat linear-gradient(90deg, #000, #000 50%, transparent 50%),
                center right/1px 100% no-repeat linear-gradient(270deg, #000, #000 50%, transparent 50%);
}

Mixins

source `clearfix`

清除元素内部的左右浮动

示例

source

.box {
    @include clearfix;
}

output

.box:before, .box:after {
    content: "";
    display: table;
}

.box:after {
    clear: both;
}

参考链接

Micro clearfix

source `expand-scope`

扩展元素的可点击区域。

在移动端开发中，一般建议可点击的元素的尺寸应当不小于 48 * 48，但有时为了界面美观，不允许元素的尺寸设置的太大，而这会导致元素难于点击，此时可以通过该混入类扩展元素的可点击区域。

参数

$expand-length Number[unlt]: 扩展长度
$used-pseudo-element String Default: after: 使用的伪元素
$position String Default: relative: 元素的定位设置，默认为 relative，若所扩展元素已定义 position，则可设置为 null。

输出说明

注意，该混入类需要占用目标元素的 after 伪元素或 before 伪元素中的其中一个。

示例

source

.box {
    @include expand-scope(-20px);
}

output

.box {
    position: relative;
}

.box:after {
    content: ' ';
    position: absolute;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
    z-index: 1;
}

source

.button {
    @include expand-scope(-20px -10px, before);
}

output

.button {
    position: relative;
}

.button:before {
    content: ' ';
    position: absolute;
    left: -10px;
    top: -20px;
    right: -10px;
    bottom: -20px;
    z-index: 1;
}

source

.button {
    @include expand-scope(-20px, before, absolute);
}

output

.button {
    position: absolute;
}

.button:before {
    content: ' ';
    position: absolute;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
    z-index: 1;
}

source

.button {
    @include expand-scope(-20px, before, null);
}

output

.button:before {
    content: ' ';
    position: absolute;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
    z-index: 1;
}

source `foreground-color`

foreground-color 用于设置元素内的前景色，同时它也会更改链接的样式。

@Content

该混入类允许传入额外的内容（通过@content指令）。

额外的自定义样式

参数

$color Color

文本颜色

$options Map

配置项：

is-change-link-style Boolean Default: true: 是否修改链接元素的样式，若设置为 true，则会将链接的文本颜色也设置为所指定的色值，另外，为便于区分，会为链接元素额外设置文字加粗样式，并扩大元素的左右边距。

示例

source

.box {
    @include foreground-color(#f00);
}

output

.box {
    color: #f00;
}

.box a {
    color: #f00;
    font-weight: 700;
    margin-left: 1px;
    margin-right: 1px;
}

source

.box {
    @include foreground-color(#f00, (
        is-change-link-style: false
    ));
}

output

.box {
    color: #f00;
}

source

.box {
    @include foreground-color(#f00, (
        is-change-link-style: false
    )) {
        a {
            color: #f00;
            font-weight: 700;
        }
    };
}

output

.box {
    color: #f00;
}

.box a {
    color: #f00;
    font-weight: 700;
}

source `hide-text`

隐藏元素内的文字

示例

source

.box {
    @include hide-text();
}

output

.box {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
}

参考链接

Update CSS image replacement technique

source `multi-text-overflow-ellipsis`

设置多行文字超出时显示省略号

Note 1：该方式的兼容性不佳，请谨慎使用。
Note 2：为避免在不兼容浏览器下出现布局异常，请为应用该样式的元素设置对应的高度，如示例所示。

参数

$line-to-show-number Number Default: 2: 需要显示的文本行数

示例

source

.box {
    width: 100%;
    font-size: 12px;
    line-height: 20px;

    // line-height * line-to-show-number
    height: 40px;

    @include multi-text-overflow-ellipsis(2);
}

output

.box {
    width: 100%;
    font-size: 12px;
    line-height: 20px;

    height: 40px;

    display: -webkit-box;
    -webkit-line-clamp: $line-to-show-number;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

source `text-overflow-ellipsis`

设置单行文字超出时显示省略号

示例

source

.box {
    width: 100%;
    @include text-overflow-ellipsis();
}

output

.box {
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

source `triangle`

小三角箭头样式

参数

$width Length: 小三角的宽度
$orientation String Default: bottom: 小三角的指向方向，可选值有 top、 right、 left 及 bottom 四个值
$color Color Default: inherit: 小三角的颜色

示例

source

.triangle-bottom {
    triangle(10px, bottom, #000);
}

output

.triangle-bottom {
    display: inline-block;

    width: 0;
    height: 0;

    // hide text
    color: transparent;
    font: 0/0 a;
    text-shadow: none;

    border-top: 10px solid #000;
    border-right: 10px dashed transparent;
    border-left: 10px dashed transparent;
}

List

List 分组提供了一些操作列表数据的方法。

Functions

source `list-compact`

移除一个列表中所有值为 null 的元素

参数

$list List: 源数据列表

示例

list-compact( (1, 2, 3) );                // --> (1, 2, 3)
list-compact( (null, 1, 2, 3, null) );    // --> (1, 2, 3)
list-compact( (null) );                   // --> ()

source `list-first`

获取列表中的第一个元素

参数

$list List: 源数据列表

示例

list-first((1, 2, 3));   // --> 1
list-first((1));         // --> 1
list-first()             // --> null

source `list-rest`

获取列表中除第一个元素之外的所有元素

参数

$list List: 源数据列表

示例

list-rest((1, 2, 3));   // --> (2, 3)
list-rest((1));         // --> ()
list-rest();            // --> ()

source `list-slice`

获取列表中的子集

参数

$list List: 源数据列表
$start Number Default: 1: 起始下标，第一个元素的下标为 1
$end Number Default: length($list): 结束下标，所截取的子集中包含该下标元素

示例

$list: a, b, c, d, e;
list-slice($list, 2, 4);   // b, c, d
list-slice($list, 2);      // b, c, d, e

Map

Map 分组提供了一些操作集合数据的方法。

Functions

source `map-deep-get`

获取多层嵌套的 map 数据中的某个属性

参数

$source Map: 需要从中获取数据的源数据集合
$keys List: 属性的访问路径

示例

$data: (
    user: (
        name: (
            first-name: 'bios',
            last-name: 'sun'
        ),
        sex: 1
    )
)

map-deep-get($data, user name first-name);  // --> 'bios'
map-deep-get($data, user name);             // --> ( first-name: 'bios', last-name: 'sun' )
map-deep-get($data, user sex);              // --> 1
map-deep-get($data, user birthday);         // --> null
map-deep-get($data);                        // --> `return $data`

source `map-deep-set`

设置多层嵌套的 map 数据中的某个属性

和所有 map 修改方法一样，该方法会返回一个新的 map，而不是修改源数据。

参数

$source Map: 需要设置属性的源数据集合
$keys List: 属性路径，如果没有提供该参数，则返回 val 参数的值。
$value Any: 设置的值，如果不提供该参数，则会将指定属性的值设置为 null，但如果 keys 和 val 都没有提供，则返回源数据。

示例

$data: (
    user: (
        name: 'biossun'
    )
)

map-deep-set($data, user name, 'sunhaiyang');             // ( user: ( name: 'sunhaiyang' ) )
map-deep-set($data, user name);                           // ( user: ( name: null ) )
map-deep-set($data, user name first-name, 'sunhaiyang');  // ( user: ( name: (first-name: 'sunhaiyang') ) )
map-deep-set($data, user name first-name);                // ( user: ( name: (first-name: null) ) )
map-deep-set($data, user, 'sunhaiyang');                  // ( user: 'sunhaiyang' )

source `map-set`

设置集合中某个属性的值

参数

$source Map: 需要设置属性的源数据集合
$key String: 所设置属性的名称
$value Any: 设置的值

示例

$map: (
    name: 'myname'
);

map-set($map, name, 'youname');

Elements

Nojiko 提供一些原子样式类，用于帮助页面开发人员定义模块与模块之间及模块与容器之间的间距，或是隐藏元素以及处理浮动。

关于原子样式类

原子样式类是一种极度抽象的样式类定义，这种类名一般只包含样式语义，而不再有具体的内容语义，一般定义如下：

.mr20 {
    margin-right: 20px;
}

.mb15 {
    margin-bottom: 15px;
}

.fl {
    float: left;
}

.fc {
    *zoom: 1;

    &:before, &:after { content: " "; display: table; }
    &:after { clear: both; }
}

.bg-white {
    background-color: #fff;
}

.fg-black {
    color: #444;
}

因为这种样式类没有内容语义，因此一般也没有内容限制，使其通用性极高；而又因为类名定义非常简短，因此只要明白其命名规则，书写起来会极为方便快速：

<nav class="bg-white">
    <ul class="fc">
        <li class="fl mr20 mb15 fg-black">item 1</li>
        <li class="fl mr20 mb15 fg-black">item 2</li>
        <li class="fl mr20 mb15 fg-black">item 3</li>
        <li class="fl mr20 mb15 fg-black">item 4</li>
    </ul>
</nav>

如果大量使用这种原始样式类，那基本上就是在使用类名来书写 css 而已，和行内样式无异。因此行内样式的问题，大多也都存在于原子样式类中，比如没有具体的语义，不方便理解代码，也难以统一修改等。另外因为需要定义尽可能简短的类名，因此需要定义一份详尽的命名规则，这也会导致相应学习成本及维护成本。

鉴于以上所说的问题，因此建议在正式项目中（尤其是需要后期维护的中长期项目）应尽量避免大量使用原子样式类，而只是作为一种辅助手段并限定在一个非常小的使用区间内。

只有在类似于活动页、专题页、文档或演示页面这种需要快速实现且后期维护量非常小的项目中才可大量使用。

nojiko 中的原子样式类

Nojiko 默认提供一组非常小的原子样式类，这组样式类只可用于设置元素内外边距，隐藏元素及设置浮动，并且内外边距也被限定为只有三个长度。

另外，所有的类名都可通过配置变量进行自定义。

内外边距

内外边距的长度值从模块间距的配置变量中获取（$distance-vertical 和 $distance-horizontal），并基于这两个变量提供三种长度级别，每个长度级别对应不同的类名后缀：

[类名] - 1 倍长度
[类名]-l - 2 倍长度
[类名]-s - 0.5 倍长度

比如两个变量的值设置如下：

$distance-vertical: 10px;
$distance-horizontal: 20px;

而外边距样式类的类名设置为如下名称：

$nojiko-el-margin: m;

则最终会生成如下 css：

.m {
    margin: 10px 20px;
}

.m-l {
    margin: 20px 40px;
}

.m-s {
    margin: 5px 10px;
}

Variables

变量	类型	默认值	说明
$nojiko-el-margin	string	`m`	设置「外边距」原子样式类的类名
$nojiko-el-margin-vertical	string	`mv`	设置「垂直方向外边距」原子样式类的类名
$nojiko-el-margin-horizontal	string	`mh`	设置「水平方向外边距」原子样式类的类名
$nojiko-el-margin-top	string	`mt`	设置「顶部外边距」原子样式类的类名
$nojiko-el-margin-bottom	string	`mb`	设置「底部外边距」原子样式类的类名
$nojiko-el-margin-left	string	`ml`	设置「左边外边距」原子样式类的类名
$nojiko-el-margin-right	string	`mr`	设置「右边外边距」原子样式类的类名
$nojiko-el-margin-suffix-large	string	`-l`	设置「较大的外边距」原子样式类的类名后缀
$nojiko-el-margin-suffix-small	string	`-s`	设置「较小的外边距」原子样式类的类名后缀
$nojiko-el-padding	string	`p`	设置「内边距」原子样式类的类名
$nojiko-el-padding-vertical	string	`pv`	设置「垂直方向内边距」原子样式类的类名
$nojiko-el-padding-horizontal	string	`ph`	设置「水平方向内边距」原子样式类的类名
$nojiko-el-padding-top	string	`pt`	设置「顶部内边距」原子样式类的类名
$nojiko-el-padding-bottom	string	`pb`	设置「底部内边距」原子样式类的类名
$nojiko-el-padding-left	string	`pl`	设置「左边内边距」原子样式类的类名
$nojiko-el-padding-right	string	`pr`	设置「右边内边距」原子样式类的类名
$nojiko-el-padding-suffix-large	string	`-l`	设置「较大的外边距」原子样式类的类名后缀
$nojiko-el-padding-suffix-small	string	`-s`	设置「较小的外边距」原子样式类的类名后缀
$nojiko-el-hidden	string	`h`	设置「完全隐藏元素」原子样式类的类名
$nojiko-el-visually-hidden	string	`hv`	设置「只在普通屏幕上隐藏元素，而在屏幕阅读器中显示」原子样式类的类名
$nojiko-el-invisible	string	`hi`	设置「在视觉及屏幕阅读器中隐藏元素，但保持布局结构」原子样式类的类名
$nojiko-el-float-left	string	`fl`	设置「设置元素向左浮动」原子样式类的类名
$nojiko-el-float-right	string	`fr`	设置「设置元素向右浮动」原子样式类的类名
$nojiko-el-clear-float	string	`fc`	设置「清除元素内部浮动」原子样式类的类名

Mixins

source `el-margin`

生成各个方向上的外间距样式；

基础类名分别使用全局配置变量：

$nojiko-el-margin
$nojiko-el-margin-vertical
$nojiko-el-margin-horizontal
$nojiko-el-margin-top
$nojiko-el-margin-bottom
$nojiko-el-margin-left
$nojiko-el-margin-right

参数

$prefix String: 类名前缀
$suffix String: 类名后缀
$vertical Length: 垂直方向上的间距值
$horizontal Length: 水平方向上的间距值

示例

source

@include el-marge('p-', '-s', 10px, 20px);

output

.p-m-s { margin: 10px 20px; }

.p-mt-s, .p-mv-s { margin-top:    10px; }
.p-mb-s, .p-mv-s { margin-bottom: 10px; }
.p-ml-s, .p-mh-s { margin-left:   20px; }
.p-mr-s, .p-mh-s { margin-right:  20px; }

source `el-padding`

生成各个方向上的内间距样式；

基础类名分别使用全局配置变量：

$nojiko-el-padding
$nojiko-el-padding-vertical
$nojiko-el-padding-horizontal
$nojiko-el-padding-top
$nojiko-el-padding-bottom
$nojiko-el-padding-left
$nojiko-el-padding-right

参数

$prefix String: 类名前缀
$suffix String: 类名后缀
$vertical Length: 垂直方向上的间距值
$horizontal Length: 水平方向上的间距值

示例

source

@include el-padding('p-', '-s', 10px, 20px);

output

.p-p-s { padding: 10px 20px; }

.p-pt-s, .p-pv-s { padding-top:    10px; }
.p-pb-s, .p-pv-s { padding-bottom: 10px; }
.p-pl-s, .p-ph-s { padding-left:   20px; }
.p-pr-s, .p-ph-s { padding-right:  20px; }

Scaffolding

scaffolding 提供了一份非常基础的脚手架样式，用于定义页面全局的盒模型、文字、链接、背景、分隔线及文本框占位符：

@if $default-box-sizing == border-box {
    *,
    *:before, 
    *:after {
        box-sizing: $box-sizing;
    }
}

body {
    font: unquote('#{$font-size-base}/#{$line-height-base}') $font-family;
    color: $text-color;
    background: $background-color;
}

a {
    text-decoration: none;
    color: $link-color;

    &:focus, &:hover {
        color: $link-focus-color;
        text-decoration: underline;
    }
}

hr {
  margin-top: compute-line-height($font-size-base, $line-height-base);
  margin-bottom: compute-line-height($font-size-base, $line-height-base);
  border: 0;
  border-top: 1px solid $line-color;
}

::placeholder {
    color: $placeholder-color;
}

Debug

Nojiko 提供了一个 _debug.scss 文件，该文件将以 CSS 注释的形式，输出 Variables 中定义的所有配置变量的值，以方便开发人员了解当前的配置结果。

若需使用，只要引入该文件即可：

@import "nojiko/sass/debug";

之后在所编译出的 CSS 文件的对应位置，将会输出如下注释内容：

/* nojiko-debug

## Variables

### 兼容浏览器

- $support-for-ie8 :: true :: bool

### 目录路径

- $images-path :: "../images" :: string
- $fonts-path :: "../fonts" :: string

... omit ...