SASS的使用

前端开发规范

每个一个前端都会包含库类、jQuery插件以及很多的各种各样目的的JS、CSS文件，有效管理不同的技术、不同文档集中起来运行良好确实需要一个很好的得工作流。因此，我们需要遵循开发模式、开发约定、文件组织良好，以保持所有的文档结构清晰、便于管理。
每一个项目的根目录下有以下目录：

• CSS
  —存放css文件，basic.css、font.css、color.css...
• JS
  —存放所有的js文件，可以包括几个子文件夹
• views
  —视图，每个显示文件对应一个视图
• images
  —存放所有的图片。

为了提高项目的开发效率和质量，我们使用各种工具来管理css或者js。例如：

1. 使用sass来管理前端的css文件。
2. 使用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

输出方式

1. 嵌套输出方式nested
   -编译时需带上参数“--style nested”
2. 展开输出方式expanded
   -编译时需带上参数“--style expanded”
3. 紧凑输出方式compact
   -编译时需带上参数“--style compact”
4. 压缩输出方式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