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
$link-color
Color
Value: $primary-color
链接颜色
source
$link-focus-color
Color
Value: darken($link-color, 15%)
链接获取到焦点时的颜色
source
$link-visited-color
Color
Value: $link-color
已访问过的链接的颜色
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
请改为使用 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
source
is-light
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
基本没有多少情况下会需要使用该方式触发一个元素的块级格式化上下文,因此该混入类将在正式版(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, 则会将链接的文本颜色也设置为所指定的色值,另外,为便于区分,会为链接元素额外设置文字加粗样式,并扩大元素的左右边距。
- is-change-link-style
示例
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
-
小三角的指向方向,可选值有
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-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-ie7
为 true
,即可应用这部分兼容样式。
额外的,若有更极端的样式重置需求,比如一些样式定制性比较高的网站如电商网站等,可能需要清除所有元素的内外边距及文本样式等以节省后续的开发工作量,则可以设置 $is-exhaustive-reset
为 true
,当该变量设置为 true
时,会在 Normalize.css 的基础上额外添加如下重置样式:
- 清除所有元素的内外边距
- 清除
h1-6
、big
及small
的文字样式 - 清除无序列表及有序列表的列表样式
以下为一份完整的重置样式代码:
/*! 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-6
、big
及small
的文字样式 - 清除无序列表及有序列表的列表样式
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-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 ...