sass与handlebars入门

javascript

首先了解一下handlebars

Handlebars模板看起来就像是正常的Html，并使用了嵌入的 handlebars 表达式。

<div>
    <h1>{{title}}</h1>
    <div>
        {{body}}
    </div>
</div>

他的表达式，是以 “{{” 开始“ }} ”结束，在两个花括号中加内容。

可以用把模板加入：

<script id="entry-template" type="text/x-handlebars-template">
        template content
</script>

如何在JavaScript代码中使用 Handlebars.compile 来编译模板。

<script type = "text/javascript">
    var source   = $("#entry-template").html();
    var template = Handlebars.compile(source);
<script/>

注意：以上代码使用了jQuery，但是handlebars并不是非要与jQuery结合使用。

只需要再传递一个content模板就可以得到返回的HTML的值

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

总结来说handlebars编译了两次，第一次编译传入的是我们写好的模板，第二次编译则是我们想要再模板中添加的内容。

Expressions

表达式中的任何html代码将会被自动忽略，这是一个非常实用的性能，但是有的时候我们需要解析html，那么就要用三个花括号{{{ }}}，另外，handlebars表达式允许嵌套值，可以方便我们访问javascript对象的任何值。

块表达式

块级表达式允许你定义一个helpers，并使用一个不同于当前的上下文（context）来调用你模板的一部分。有时候当你需要对某条表达式进行更深入的操作时，Blocks就派上用场了，在Handlebars中，你可以在表达式后面跟随一个#号来表示Blocks，然后通过{{/表达式}}来结束Blocks。 如果当前的表达式是一个数组，则Handlebars会“自动展开数组”，并将Blocks的上下文设为数组中的元素。 例如：

    <ul>  
    {{#programme}}
        <li>{{language}}</li>
    {{/programme}}
    </ul>  

有以下json数据

{
  programme: [
    {language: "JavaScript"},
    {language: "HTML"},
    {language: "CSS"}
  ]
}

上面的代码会自动匹配programme数据并展开数据，渲染DOM后就是这样的

<ul>  
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>  

Handlebars的内置块表达式（Block helper）

1.each
你可以使用内置的{{#each}} helper遍历列表块内容，用this来引用遍历的元素.

<ul>  
    {{#each name}}
        <li>{{this}}</li>//这里的this指的是数组里的每一项元素
    {{/each}}
</ul>  

2.if else
{{#if}}就你使用JavaScript一样，你可以指定条件渲染DOM，如果它的参数返回false，undefined, null, "" 或者 [] (a "falsy" value), Handlebar将不会渲染DOM，如果存在{{#else}}则执行{{#else}}后面的渲染

    {{#if list}}
        <ul id="list">  
            {{#each list}}
                <li>{{this}}</li>
            {{/each}}
        </ul>  
        {{else}}
            <p>{{error}}</p>
    {{/if}}

3.with
{{#with}}一般情况下，Handlebars模板会在编译的阶段的时候进行context传递和赋值。使用with的方法，我们可以将context转移到数据的一个section里面（如果你的数据包含section）。 这个方法在操作复杂的template时候非常有用。

<div class="entry">  
  <h1>{{title}}</h1>
  {{#with author}}
  <h2>By {{firstName}} {{lastName}}</h2>
  {{/with}}
</div> 

自定义helper
Handlebars，可以从任何上下文可以访问在一个模板，你可以使用Handlebars.registerHelper()方法来注册一个helper。

接下来将有关sass的内容：

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。

特色：
1.完全兼容 CSS3
2.在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
3.对颜色和其它值进行操作的{Sass::Script::Functions 函数}
4.函数库控制指令之类的高级功能
5.良好的格式，可对输出格式进行定制
6.支持 Firebug

语法:

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。

接下来讲用法：

在线编译器

1.变量:

SASS允许使用变量，所有变量以$开头。

　　$black : #000000;　

　　div {
　　　color : $black;
　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

　　$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

2.嵌套:

SASS允许选择器嵌套。比如，下面的CSS代码：

　　div h1 {
　　　　color : red;
　　}

可以写成：

　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

属性也可以嵌套，比如border-color属性，可以写成：

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}
　

注意，border后面必须加上冒号。

3.注释：

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

4.继承：

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

5.Mixin：

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。

　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。

　　div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和缺省值。

　　@mixin left($value: 10px) {
    　　　　float: left;
    　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数：

　　div {
　　　　@include left(20px);
　　}

下面是一个mixin的实例，用来生成浏览器前缀。

　　@mixin rounded($vert, $horz, $radius: 10px) {
    　　　　border-#{$vert}-#{$horz}-radius: $radius;
    　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
    　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

使用的时候，可以像下面这样调用：

　　#navbar li { @include rounded(top, left); }

　　#footer { @include rounded(top, left, 5px); }

(1) 传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：

@mixin border-radius($radius){
      -webkit-border-radius: $radius;
      border-radius: $radius;
}

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

(2)在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:3px){
      -webkit-border-radius: $radius;
      border-radius: $radius;
}

在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:

(3)Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：

@mixin center($width,$height){
  width: $width;
      height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
      margin-left: -($width) / 2;
}

在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：

.box-center {
  @include center(500px,300px);
}

参考链接：慕课网
sass用法指南（阮一峰）