Nojiko 0.6.3

Nojiko 是一个使用 SCSS 编写的基础样式库,其中包含如下内容:

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

Nojiko 希望能为使用 SCSS 的开发人员提供一些帮助:帮助大家能更快,更方便地编写出更好的样式。

作为一个基础样式库,Nojiko 只提供样式相关内容,没有任何 JS,也不会对应用样式的元素做任何要求。

使用

首先,在项目中安装 nojiko:

$ bower install nojiko

之后,就可以引入并使用 nojiko 了:

@import "nojiko/nojiko";
@import "nojiko/variables";

@import "nojiko/reset";
@import "nojiko/scaffolding";
@import "nojiko/elements";

升级

目前 Nojiko 尚处于开发阶段,因此若要从老版本升级到新版本,请仔细查阅该更新记录,并对自己项目中的代码进行相应的修改。

Variables

Nojiko 定义了一组通用的全局配置变量,用于统一管理项目中的文字样式、颜色定义、模块尺寸和间距以及对老版本浏览器的支持等。

Variables

source $support-for-ie6 Boolean Value: true

是否支持 IE6

source $support-for-ie7 Boolean Value: true

是否支持 IE7

source $support-for-ie8 Boolean Value: true

是否支持 IE8

source $images-path String Value: '../images'

存放图片文件的目录路径

source $fonts-path String Value: '../fonts'

存放字体文件的目录路径

source $svg-path String Value: '../svg'

存放 SVG 文件的目录路径

source $font-family List Value: $FONT-FAMILY-SERIF

默认字体集

除了自己指定字体集之外,Nojiko 还提供了如下几个常用字体集以供选用:

  • $FONT-FAMILY-SANS-SERIF 英文无衬线字体集
  • $FONT-FAMILY-SERIF 英文衬线字体集
  • $FONT-FAMILY-FIXED-FONT 英文等宽字体集
  • $FONT-FAMILY-CHINESE-SANS-SERIF 较适合中文环境的无衬线字体集

source $font-family-monspace List Value: $FONT-FAMILY-FIXED-FONT

默认代码字体集

source $font-size-base Number Value: 14px

默认文字大小

source $font-size-large Number Value: ceil($font-size-base * 1.3)

较大文字大小

source $font-size-small Number Value: floor($font-size-base * 0.88)

较小文字大小

source $line-height-base Number Value: 1.428571429

默认文字行高,该变量与 $font-size-base 对应

source $line-height-large Number Value: 1.34

较大文字行高,该变量与 $font-size-large 对应

source $line-height-small Number Value: 1.5

较小文字行高,该变量与 $font-size-small 对应

source $gray-darker Color Value: lighten(#000, 13.5%)

深灰色

source $gray-dark Color Value: lighten(#000, 20%)

暗灰色

source $gray Color Value: lighten(#000, 33.5%)

灰色

source $gray-light Color Value: lighten(#000, 60%)

淡灰色

source $gray-lighter Color Value: lighten(#000, 93.5%)

浅灰色

source $primary-color Color Value: #428bca

主色

source $background-color Color Value: #fff

背景色

source $line-color Color Value: #d7d7d7

线条颜色

source $text-color Color Value: $gray-dark

文本颜色

source $text-color-quiet Color Value: $gray-light

次要文本颜色

source $text-color-loud Color Value: $gray-dark

强调文本颜色

source $placeholder-color Color Value: lighten($text-color, 40%)

占位符颜色

source $info-color Color Value: #5bc0de

消息色

非重要性的提示内容,可使用该色调。

source $success-color Color Value: #5cb85c

成功色

表示成功状态的内容,可使用该色调。

source $warning-color Color Value: #f0ad4e

警告色

具有警告性质的内容,需要提示用户关注时,可使用该色调。

source $danger-color Color Value: #d9534f

危险色

表示危险、错误或非法等内容,需要用户立即关注或处理时,可使用该色调。

source $default-box-sizing String Value: content-box

全局盒模型尺寸计算模式,可选择使用「content-box」或「border-box」这两种计算模式。

source $default-element-box-name String Value: m

默认组件尺寸名称(如按钮,文本框,标题栏等)。

Nojiko 建议参考服装的尺寸命名方式来命名尺寸定义,如:

  • m 表示普通尺寸;
  • l 表示较大尺寸;
  • s 表示较小尺寸。

更大或更小号,则通过添加 'x' 前缀声明,比如:

  • xl 表示特大号;
  • xs 表示特小号;
  • xxl 表示超大号;
  • xxs 表示超小号。

不过虽然可以使用 'x' 定义无限级尺寸,但一般只需定义普通、较大、较小、特大和特小五个级别即可。

source $page-width Boolean Number Value: false

页面宽度,若定义为 false 则表示页面为非定宽布局

source $distance-vertical Number Value: 20px

模块之间的垂直间距

source $distance-horizontal Number Value: 20px

模块之间的水平间距

Helpers

Helpers 分组提供一些辅助性的函数及混入类, 用于方便地书写某些复杂样式(如 position 混入类), 或解决一些兼容性问题(如 float 混入类), 以及用于一些计算或条件判断操作(如 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 Default: $font-size-base

文字大小

$line-height Number Default: $line-height-base

文本行高

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

source computed-line-height

Deprecated!

请改为使用 compute-line-height 方法,该方法命名有误,将在正式版(v1.0.0)中移除。

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

参数
$font-size Number Default: $font-size-base

文字大小

$line-height Number Default: $line-height-base

文本行高

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

source get-element-box-height-by-name

计算并返回所指定盒尺寸的实际高度

参数
$name String

盒尺寸配置名称

$box-sizing String

盒模型计算模式

$row-number Number

文本内容的行数

source is-dark

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

返回值 Boolean

是否为深色色值

source is-light

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

返回值 Boolean

是否是浅色色值

source set-element-box-maps

设置盒模型集合

source strip-unit

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

参数
$number Number

需要移除其单位的数值

返回值 Number

一个无单位的数值

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

Mixins

source block-formatting-context

Deprecated!

基本没有多少情况下会需要使用该方式触发一个元素的块级格式化上下文,因此该混入类将在正式版(v1.0.0)中移除,请不要再使用。

触发一个元素的块级格式化上下文

source float

通过该方法定义浮动,可以避免在 IE6 浏览器中浮动元素出现双倍外边距的问题。

Note:如果项目不需要兼容 IE6,可以不使用该方法。

参数
$direction

浮动方向

示例

source

.box {
    @include float(left);
}

output

.box {
    float: left;
    _display: inlibe;  /* if support ie6, has this */
}

source inline-block

支持 IE6/7 的行内块元素

Note:如果项目不需要兼容 IE6/7,可以不使用该方法。

参数
$vertical-align String Default: null

设置垂直对齐方向

示例

source

.box {
    @include inline-block;
}

output

.box {
    display: inline-block;

    /* if support ie6 or ie7, has this */
    *zoom: 1;
    *display: inline;
}

source

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

output

.box {
    display: inline-block;

    /* if support ie6 or ie7, has this */
    *zoom: 1;
    *display: inline;

    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:如果项目不需要兼容 IE6、IE7 或 IE8,可以不使用该方法。

参数
$opacity Number

需设置的不透明度值

示例

source

.box {
    @include opacity(0.2);
}

output

.box {
    opacity: 0.2;

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

source transparent

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

示例

source

.box {
    @include transparent;
}

output

.box {
    opacity: 0;

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

source opaque

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

示例

source

.box {
    @include opacity;
}

output

.box {
    opacity: 1;

    /* 如果配置支持 IE6, IE7 或 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 element-box

设置元素盒模型

参数
$width Number

宽度

$height Number

高度

$padding-vertical Number

垂直内边距

$padding-horizontal Number

水平内边距

$font-size Number

文字大小

$line-height Number

文字行高

$border-width Number

边框宽度

$border-radius Number

圆角

source element-box-by-name-b

设置一个无边框的盒模型尺寸 将该盒模型的边框设置为 0,并将原边框宽度分配到水平及垂直内边距上。

source element-box-by-name-bh

设置一个无边框的且无水平内边距的盒模型尺寸

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 ie6, ie7 or 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 ie6, ie7 or ie8, has this. */
    zoom: 1\9;
    filter: progid:DXImageTransform.Microsoft.Gradient(
        GradientType=0,
        StartColorStr='#33000000',
        EndColorStr='#33000000'
    );
}

Add-ons

Functions

source superfine-border

使用 background-image 模拟实现超细边框

参数
$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 superfine-border-top

使用 SVG 背景图片来模拟实现顶部超细边框

参数
$colors Color

边框的颜色

source superfine-border-bottom

使用 SVG 背景图片来模拟实现底部超细边框

参数
$colors Color

边框的颜色

source superfine-border-left

使用 SVG 背景图片来模拟实现左边超细边框

参数
$colors Color

边框的颜色

source superfine-border-right

使用 SVG 背景图片来模拟实现右边超细边框

参数
$colors Color

边框的颜色

source superfine-border-vertical

使用 SVG 背景图片来模拟实现顶部及底部超细边框

参数
$colors Color

边框的颜色

source superfine-border-horizontal

使用 SVG 背景图片来模拟实现左边及右边超细边框

参数
$colors Color

边框的颜色

Mixins

source clearfix

清除元素内部的左右浮动

示例

source

.box {
    @include clearfix;
}

output

.box {
    *zoom: 1;   /* if support ie6 or ie7, has this. */
}

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

.box:after {
    clear: both;
}

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

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

小三角的指向方向,可选值有 toprightleftbottom 四个值

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

起始下标,第一个元素的下标为 0

$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');

Reset

Reset 模块用于提供一份通用的重置样式。

若需使用,请按如下方式引入模块:

@import "nojiko/reset";

Reset 模块以 Normalize.css 作为基础重置样式,并在其上添加了对 IE6 和 IE7 的兼容支持,若你的网站需要兼容这些浏览器,请设置 $support-for-ie6$support-for-ie7true,即可应用这部分兼容样式。

额外的,若有更极端的样式重置需求,比如一些样式定制性比较高的网站如电商网站等,可能需要清除所有元素的内外边距及文本样式等以节省后续的开发工作量,则可以设置 $is-exhaustive-resettrue,当该变量设置为 true 时,会在 Normalize.css 的基础上额外添加如下重置样式:

  • 清除所有元素的内外边距
  • 清除h1-6bigsmall 的文字样式
  • 清除无序列表及有序列表的列表样式

以下为一份完整的重置样式代码:


/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* HTML5 display definitions
   -------------------------------------------------------------------------- */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* Links
   -------------------------------------------------------------------------- */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   -------------------------------------------------------------------------- */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   -------------------------------------------------------------------------- */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   -------------------------------------------------------------------------- */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   -------------------------------------------------------------------------- */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
    font-weight: bold;
}

/* Tables
   -------------------------------------------------------------------------- */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}


/* IE6 及 IE7 的兼容样式
 * 若设置 $support-for-ie6 或 $support-for-ie7 为 true,则输出该部分代码。
   ========================================================================== */

audio,
canvas,
progress,
video {
    *zoom: 1;
    *display: inline; 
}

form {
    margin: 0; 
}

iframe {
    display: block; 
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic; 
}


/* 完整清除样式
 * 若设置 $is-exhaustive-reset 为 true,则输出该部分代码。
   ========================================================================== */

body,
ul, ol, dl, dd,
h1, h2, h3, h4, h5, h6, p, pre,
form, fieldset, legend, input, textarea, select, button,
blockquote, th, td, hr, article, aside, details,
figcaption, figure, header, footer, section, hgroup, menu, nav {
    margin: 0;
    padding: 0; 
}

h1, h2, h3, h4, h5, h6, big, small {
    font: inherit;
    font-size: 100%;
    vertical-align: baseline; 
}

ol, ul {
    list-style: none; 
}

Variables

source $is-exhaustive-reset Boolean Value: false

若设置该变量为 true,则会在 Normalize.css 的基础上额外添加如下重置样式:

  • 清除所有元素的内外边距
  • 清除 h1-6bigsmall 的文字样式
  • 清除无序列表及有序列表的列表样式

Scaffolding

scaffolding

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>
</nav>

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

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

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

nojiko 中的原子样式类

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

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

内外边距

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

  • [类名] - 1 倍长度
  • [类名]d - 2 倍长度
  • [类名]x - 0.5 倍长度

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

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

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

$nojiko-el-margin: m;

则最终会生成如下 css:

.m {
    margin: 10px 20px;
}

.md {
    margin: 20px 40px;
}

.mx {
    margin: 5px 10px;
}

Variables

source $nojiko-el-margin String Value: m

用于 「添加外边距」 的元素样式类的类名

source $nojiko-el-margin-top String Value: mt

用于 「添加顶部外边距」 的元素样式类的类名

source $nojiko-el-margin-right String Value: mr

用于 「添加右边外边距」 的元素样式类的类名

source $nojiko-el-margin-left String Value: ml

用于 「添加左边外边距」 的元素样式类的类名

source $nojiko-el-margin-bottom String Value: mb

用于 「添加底部外边距」 的元素样式类的类名

source $nojiko-el-margin-vertical String Value: mv

用于 「添加垂直方向外边距」 的元素样式类的类名

source $nojiko-el-margin-horizontal String Value: mh

用于 「添加水平方向外边距」 的元素样式类的类名

source $nojiko-el-padding String Value: p

用于 「添加内边距」 的元素样式类的类名

source $nojiko-el-padding-top String Value: pt

用于 「添加顶部内边距」 的元素样式类的类名

source $nojiko-el-padding-right String Value: pr

用于 「添加右边内边距」 的元素样式类的类名

source $nojiko-el-padding-left String Value: pl

用于 「添加左边内边距」 的元素样式类的类名

source $nojiko-el-padding-bottom String Value: pb

用于 「添加底部内边距」 的元素样式类的类名

source $nojiko-el-padding-vertical String Value: pv

用于 「添加垂直方向内边距」 的元素样式类的类名

source $nojiko-el-padding-horizontal String Value: ph

用于 「添加水平方向内边距」 的元素样式类的类名

source $nojiko-el-hidden String Value: h

用于 「完全隐藏元素」 的元素样式类的类名

source $nojiko-el-visually-hidden String Value: hv

用于 「只在普通屏幕上隐藏元素,而在屏幕阅读器中显示」 的元素样式类的类名

source $nojiko-el-invisible String Value: hi

用于 「在视觉及屏幕阅读器中隐藏元素,但保持布局结构」 的元素样式类的类名

source $nojiko-el-float-left String Value: fl

用于 「设置元素向左浮动」 的元素样式类的类名

source $nojiko-el-float-right String Value: fr

用于 「设置元素向右浮动」 的元素样式类的类名

source $nojiko-el-clear-float String Value: fc

用于 「清除元素内部浮动」 的元素样式类的类名

Elements Extend

原子样式类扩展

Debug

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

若需使用,只要引入该文件即可:

@import "nojiko/sass/debug";

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

/* nojiko-debug

## Variables

### 兼容浏览器

- $support-for-ie6 :: false :: bool
- $support-for-ie7 :: false :: bool
- $support-for-ie8 :: true :: bool

### 目录路径

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

... omit ...