文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui
npm 有出售 请大家自行拷贝粘贴
color
颜色要使用代词加数字大小形式
数字规格 50 100 200 ... a100 ... b100
颜色变量不许由sass或者postcss方法计算得出
$material-colors: (
'red': (
'50': #ffebee,
'100': #ffcdd2,
'200': #ef9a9a,
'300': #e57373,
'400': #ef5350,
'500': #f44336,
'600': #e53935,
'700': #d32f2f,
'800': #c62828,
'900': #b71c1c,
'a100': #ff8a80,
'a200': #ff5252,
'a400': #ff1744,
'a700': #d50000
)
）!global；
// 项目颜色基于material design配色 基础色库设计师都会配出来 项目色库需要项目去改变
$custom-color: map-extend($material-colors, (
"blue": (
"500": #0f8ffe,
"600": #0088ff
),
"red": (
"600": #f26c4f
),
"green": (
"600": #d6e9ba
),
"yellow": (
"600": #ecf82c
),
"purple": (
"600": #e22cf8
),
"grey": (
"400": #c2c2c2,
"500": #898989,
"600": #464646
)
)) !global;
@function get-custom-color($name, $level: "600") {
@return map-deep-get($custom-color, $name, $level);
}
font
设计师文字和前端页面开发者文字必须为同一类型
我觉得amazeui的文字设置就不错
amaze ui 文字标准链接
$font-family: (
"amazeui": ("Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif),
"sans-serif": ("Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif),
"serif": (Georgia, "Times New Roman", Times, SimSun, "FontAwesome", serif), //FangSong, STFangSong
"monospace": (Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace),
"kai": (Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif)
) !global;
@function get-font-family($name) {
@return map-deep-get($font-family, $name);
}
@mixin interface-font() {
.font {
@content;
}
}
@mixin use-font() {
$defaults: (
".font": (
)
);
@include interface-font() {
@include register-hook("font");
@content;
}
}
@mixin use-font-family($font-family-name, $sel) {
#{$sel} {
font-family: get-font-family($font-family-name);
}
}
@mixin use-amazeui-font($sel: body) {
@include use-font-family("amazeui", $sel);
}
@mixin use-sans-serif-font($sel: body) {
@include use-font-family("sans-serif", $sel);
}
@mixin use-serif-font($sel: body) {
@include use-font-family("serif", $sel);
}
@mixin use-monospace-font($sel: body) {
@include use-font-family("monospace", $sel);
}
@mixin use-kai-font($sel: body) {
@include use-font-family("kai", $sel);
}当然设计师有时会使用一些特殊字体 特别英文项目 很正常
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1450578408_6092355.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1450578408_6092355.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1450578408_6092355.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1450578408_6092355.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1450578408_6092355.svg#iconfont') format('svg'); /* iOS 4.1- */
} 这个时我的iconfont引用 设计师如果想使用特殊字体 必须提供eot woff ttf svg各一份字体
否则前端有权不使用该字体
当然 我也要教大家 一些应对方案
otf 转为 ttf 地址
ttf 转为 eot
fontxchange 恩 这个软件可以做到转换为webfont 这个软件mac有的 windows也有的 不过没去找破解版 哈哈
英文字体大小不是很大 可以直接使用 中文字体由于体积很大 所以需要优化
优化的方式就是 搜集所有用到的字符 再根据搜集到的字符重新生成一个新的字符文件
font-spider 做的还不错 但是有坑奥
icons
font-awesome 可能是大家第一时间想到的 不过我想说的是iconfont或许更好
icon 是小图标 class .icon
icon 有多种提供形式 iconfont fontawesome unicode svg img
// example
.icon.iconfont 表明她是iconfont 类型的iconsass 或者 postcss 编写 具体实现不管 但是必须保证变量不可以由sass或postcss计算得出
$iconfont: (
"vars": (
"bule-tooth": "\e600",
"moon": "\e601",
"fastforward": "\e602",
"plane": "\e603",
"add": "\e604",
"drag": "\e605",
"more": "\e606",
"rewind": "\e607",
"search": "\e608",
"star": "\e609",
"world": "\e60a",
"lock": "\e60b",
"list": "\e60c",
"volume-off": "\e60d",
"share-arrow": "\e60e",
"airplay": "\e60f",
"close": "\e610",
"glass": "\e611",
"read": "\e612",
"add-square": "\e613",
"pause": "\e614",
"wifi": "\e615",
"user": "\e616",
"back": "\e617",
"close-circle": "\e618",
"location": "\e619",
"share": "\e61a",
"volume-up": "\e61b",
"right": "\e61c",
"circle": "\e61d"
)
) !global;
@function get-iconfont-var($name) {
@return map-deep-get($iconfont, "vars", $name);
}
@mixin use-iconfont-iosicons() {
$icons: map-deep-get($iconfont, "vars");
.iconfont {
@each $iconname, $iconunicode in $icons {
&.#{$fa-css-prefix}-#{$iconname}:before { content: $iconunicode; }
}
}
}layout
项目中所有布局 都由layout提供
组件也可以使用layout 用来减少css代码
// example
left
center
right
right
btn-group这个东西或许常见的是横过来的 不过谁知道 他会不会被设计师设计成竖向的呢
layout 布局要实现基本的有 table flex center-set(水平垂直居中实现)
不规定具体实现
番外篇
之前我有说过ie8的问题 本来我是打算专门写一篇文章的 不过算了吧 直接给大家带来我的研究 之前ie8加强到ie9 polyfill 一文中已经解决一些问题 现在带来一个完整模板
jquery 部分大家自行选择
ie9也有一些问题 比如filereader之类的问题
webshim 给出了他的收集方案 链接
ie9进入grid布局时代 chrome 已经原生支持 grid布局 firefox也支持grid布局 ie10开始支持grid布局 使用polyfill我们使ie9进入grid时代 链接