前端开发规范
每个一个前端都会包含库类、jQuery插件以及很多的各种各样目的的JS、CSS文件，有效管理不同的技术、不同文档集中起来运行良好确实需要一个很好的得工作流。因此，我们需要遵循开发模式、开发约定、文件组织良好，以保持所有的文档结构清晰、便于管理。
每一个项目的根目录下有以下目录：
- CSS
—存放css文件，basic.css、font.css、color.css... - JS
—存放所有的js文件，可以包括几个子文件夹 - views
—视图，每个显示文件对应一个视图 - images
—存放所有的图片。
为了提高项目的开发效率和质量，我们使用各种工具来管理css或者js。例如：
- 使用sass来管理前端的css文件。
- 使用coffeescript来管理js文件。
SASS
SASS是最早、最成熟的CSS预处理，它可以通过变量、嵌套、函数、继承等使CSS变得更强大，更优雅，而且完全兼容CSS的语法。
SASS可以帮助我们更好地组织大CSS文件，更加便捷地开发和运行CSS文件，在Compass等类库的帮助下，我们将更加如虎添翼。
SASS特性
- 完全兼容CSS3
- 诸如变量、嵌套、混合(Mixins)之类的语言扩展
- 操作颜色和其他的巨量实用函数
- 类型控制语句的强大特性
- 可以自定义的、格式良好的输出
- 整合Firebug
SASS语法
SASS允许有两种语法：
- SASS
—sass是Sass的最初语法格式，通过tab键控制缩进的一种语法规则，而且对缩进要求非常严格，不带有任何的分号和大括号。以".sass"为扩展名。 - SCSS
—scss是Sass的新语法格式，从外形上来判断他和CSS长得一样，代码都包裹在一对大括号里，并且末尾技术处都有一个分号。以".scss"为扩展名。
//使用SCSS
$baseFontsize:14px;
$Largefontsize:16px;
body{
font-size:$baseFontsize;
p{
font-size:$Largefontsize;
}
}
//使用SASS
$baseFontsize:14px
$Largefontsize:16px
body
font-size:$baseFontsize
p
font-size:$Largefontsize
命令编译
命令编译时指使用电脑中的命令终端，通过Sass指令来编译Sass。
- 单文件编译
sass <要编译的Sass文件路径>/style.scss:<要输出的css文件路径>/style.css
- 多文件编译
sass sass/:css/
上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。
- watch功能
开启“watch”功能，对代码进行任何修改，都能自动检测代码的变化并直接编译
sass --watch<要编译的Sass文件路径>/style.scss:<要输出的CSS文件路径>/style.css
输出方式
- 嵌套输出方式nested
-编译时需带上参数“--style nested” - 展开输出方式expanded
-编译时需带上参数“--style expanded” - 紧凑输出方式compact
-编译时需带上参数“--style compact” - 压缩输出方式compressed
-编译时需带上参数“--style compressed”
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
针对上边的CSS文件，采用不同的编译方式：
- 嵌套方式
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
- 展开方式
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
与nested方式类型，只是大括号在另起一行
- 紧凑方式
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
类似于单行CSS样式格式
- 压缩方式
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
压缩输出方式会去掉标准的Sass和CSS注释及空格。
SASS调试
浏览器支持“sourcemap”功能，可以实现在浏览器中直接调试sass文件。
如果不支持，需要在编译的时候添加“--sourecmap”参数：
sass --watch --scss --sourcemap style.scss:style.css
在Sass3.3版本之上，不需要添加这个参数也可以：
sass --watch style.scss:style.css
