前端开发规范之CSS
使用技术(Css预处理Sass)
Sass
Sass官网
Sass介绍
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。
与Sass相似的是Less
特色
- 完全兼容 CSS3
- 在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
- 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
- 函数库控制指令之类的高级功能
- 良好的格式，可对输出格式进行定制
- 支持 Firebug
安装方法
因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。 先导官网下载个ruby
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
- 淘宝RubyGems镜像安装 sass
打开终端(win下可以用git)
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
<!--请确保只有 ruby.taobao.org-->
$ gem install sass
Compass
Compass官网
compass介绍
简单说，Compass是Sass的工具库（toolkit）。
Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。
安装方法
- 同样需要预先安装
ruby这里就不再赘述 - 打开终端
sudo gem install compass
<!--windows可省略sudo-->
gem install compass
常用命令
compass create <!--compass模板-->
compass compile <!--编译文件-->
compass watch <!--监听文件改变并编译-->
常用插件
@import 'compass/css3'; //css3兼容
目录结构及配置
目录结构
假如项目名字为 demo
demo <!--项目目录-->
sass <!--sass源文件目录-->
style.scss <!--需边缘scss文件-->
common <!--共用scss片段目录-->
_var.scss <!--定义scss-->
_reset.scss <!--重置scss-->
_common.scss <!--共用scss-->
index <!--首页scss片段代码目录-->
...
stylesheets <!--编译后文件目录-->
config.rb <!--compass配置文件-->
配置
require 'compass/import-once/activate'
require 'compass-normalize'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
outoput = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
代码规范
css模块化
_reset.scss // 对浏览器的默认样式进行重设
_layout.scss // 管理页面的布局
_typeset.scss // 图文的编排与
_color.scss // 统一管理颜色的搭配
_ie.scss // 把对ie的hack单独分开
书写规范
样式书写遵循以下格式
div.header{
font-size:12px;
font-weight:normal;
backgorund:url(../images/bg.jpg) no-repeat #fff;
color:$gray;
border:1px solid $gray-light;
@include border-radius(5px);
> ul.menu{
font-size:14px;
line-height:1;
> li{
100px;
> a{
color:$black;
$:hover{
color:$blue;
}
}
}
}
}
具体规范
样式重置
Normalize.css
介绍
normalize不是将所有样式清零，而是让css在各个浏览器中表现一致。这里我们将使用compass-normalize
安装
gem install compass-normalize
使用
- 首先在compass的配置文件中添加
require 'compass-normalize'
- 然后在
style.scss里导入
@import "normalize";
当然你也可以部分导入
@import 'normalize/html5';
@import 'normalize/base';
@import 'normalize/links';
@import 'normalize/typography';
@import 'normalize/embeds';
@import 'normalize/groups';
@import 'normalize/forms';
@import 'normalize/tables';
Neat.css
介绍
Neat.css 是基于normalize的全新的 CSS Reset，兼容 IE 6+ 以及其他现代浏览器。
「normalize」的核心理念是不盲目重置为0，让元素拥有统一的默认间距，大小等表现。但针对国内大部分网站不是纯文字排版，Neat.css 选择回归「有即是无，无即是有」的理念，把大部分标签的默认margin，padding 均重置为 0。如果你需要对大面积文字或者文档快速美化，推荐单独引入专门针对汉字排版的type.css。
模块
Neat
全新的样式重置
Layout
更加丰富的布局
Button
自适应按钮
Type
照顾中文的版式设计
Iconfont
字体图标平台
使用
Cube 托管于强大的阿里 CDN 上，提供 https 支持，只需按如下方式引入便可自适应协议。
<link rel="stylesheet" href="//g.alicdn.com/thx/cube/1.3.1/cube.min.css">
布局规范
非删格布局
删格布局
如采用删格布局，请采用bootstrap框架
图文编排
采用normalize默认格式，以下内容全部指文章内容的样式
标题
h1-h6 标签来定义标题，其它非文章页面尽量不要使用h1-h6标签
概述
使用article标签
<article>这里是概述</article>
正文
<div class="content">
<p>
这里是段落
</p>
<p>
这里是段落
</p>
</div>
加粗（重要）
用来展示重要信息
<b>这里是加粗</b>
斜体（重要）
用来展示重要信息
<em>这里是斜体</em>
删除
用来展示已过期信息
<del>这里是删除</del>
高亮（更重要）
用来展示更重要的信息
<strong>这里是高亮</strong>
由于strong标签跟b标签同是加粗，故此给strong标签再加以下样式
<style>
strong{
background-color:yellow; //具体颜色根据主色来定
}
</style>
引用
展示引用文本，内可嵌套p,span,a标签并且严格按照以下格式进行嵌套
<cite>
<p>这里是引用内容</p>
<span>--摘自<a href="#">《前端开发规范之CSS》</a></span>
</cite>
同时给引用部分添加以下样式
<style>
cite{
display:block;
background-color:#f4f4f4;
padding:1em;
}
cite span,cite a{
font-size:0.8em;
color:#999;
}
cite > span{
display:block;
text-align:right;
}
</style>
有序列表
注意：不要在文章页给li添加任何掩饰，容易引起IEbug
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
图片
请尽可能的添加img的alt标签
<img src="images/01.jpg" alt="详细展示">
链接
尽可能添加title属性，target属性如无特殊要求，全部为_blank
<a href="http://dctxf.com" title="dctxf's website" target="_blank"></a>
颜色
颜色分类按照具体项目进行，大概可分为主色一种和辅助色五种左右
defalut
#333 //字体默认颜色
#fff //白色
red
警告色
blue
一版为链接色
yellow
提示色
green
成功
gray
不可用，无效
组件
按钮
根据模块化原则按钮样式分为以下内容
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
添加以下样式
<style>
.btn{
display:inline-block;
padding:0.5em;
border:1px solid #ddd;
background:none;
text-decoration:none;
color:#333;
}
.btn:hover{
background:#eee;
}
</style>
更多个性化样式请在 btn- 里面添加
表单
保证每个输入框，下来框都有label包裹
<form action="">
<label for=""><input type="text"></label>
</form>