summaryrefslogtreecommitdiffhomepage
path: root/zh-cn
diff options
context:
space:
mode:
Diffstat (limited to 'zh-cn')
-rw-r--r--zh-cn/angularjs-cn.html.markdown710
-rw-r--r--zh-cn/c++-cn.html.markdown2
-rw-r--r--zh-cn/less-cn.html.markdown387
-rw-r--r--zh-cn/r-cn.html.markdown2
-rw-r--r--zh-cn/sass-cn.html.markdown585
5 files changed, 1684 insertions, 2 deletions
diff --git a/zh-cn/angularjs-cn.html.markdown b/zh-cn/angularjs-cn.html.markdown
new file mode 100644
index 00000000..418a817d
--- /dev/null
+++ b/zh-cn/angularjs-cn.html.markdown
@@ -0,0 +1,710 @@
+---
+category: tool
+tool: AngularJS
+contributors:
+ - ["Walter Cordero", "http://waltercordero.com"]
+filename: learnangular-cn.html
+translators:
+ - ["Jiang Haiyun", "http://www.atjiang.com"]
+lang: zh-cn
+---
+
+## AngularJS 教程。
+
+AngularJS 1.0 版在 2012 年发布。
+Miško Hevery, 一位 Google 员工， 从 2009 年开始开发 AngularJS。
+结果发现这个想法很好，从而该项目现在也被 Google 官方所支持了。
+
+AngularJS 是一个 JavaScript 框架。它可以通过一个 "script" 标签添加到一个 HTML 页面中。
+AngularJS 通过指令扩展了 HTML 属性，并且通过表达式将数据绑定到 HTML。
+
+## 你应该已经了解了的知识
+
+在学习 AngularJS 之前， 你应该对以下知识有了基本的了解：
+
+- HTML
+- CSS
+- JavaScript
+
+```html
+// AngularJS 是一个 JavaScript 框架。它是一个用 JavaScript 写的库。
+// AngularJS 以一个 JavaScript 文件的形式发布，并且能通过一个 script 标签添加到一个网页中：
+// <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+
+///////////////////////////////////
+// AngularJS 扩展 HTML
+
+//AngularJS 通过 ng-directives 扩展 HTML。
+//ng-app 指令定义一个 AngularJS 应用。
+//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
+//ng-bind 指令将应用的数据绑定到 HTML 视图上。
+<!DOCTYPE html>
+<html>
+ <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+ <body>
+ <div ng-app="">
+ <p>Name: <input type="text" ng-model="name"></p>
+ <p ng-bind="name"></p>
+ </div>
+ </body>
+</html>
+
+/*
+ * 例子解析：
+ * AngularJS 在网页加载后自动开启。
+ * ng-app 指令告诉 AngularJS： <div> 元素是 AngularJS 应用的 "所有者"。
+ * ng-model 指令将 input 输入框的值绑定到应用的 name 变量上。
+ * ng-bind 指令将 <p> 元素的 innerHTML 绑定到应用的 name 变量上。
+*/
+<tag> 这里是要解析的内容 </tag>
+
+///////////////////////////////////
+// AngularJS 表达式
+
+// AngularJS 表达式写在双括号内： {{ 表达式 }}。
+// AngularJS 表达式采用和 ng-bind 指令一样的方式将数据绑定到 HTML。
+// AngularJS 将在编写表达式的原样位置上 "输出" 数据。
+// AngularJS 表达式非常像 JavaScript 表达式：它们能包含文本，运算符和变量。
+// 例如 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
+<!DOCTYPE html>
+<html>
+ <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+ <body>
+ <div ng-app="">
+ <p>My first expression: {{ 5 + 5 }}</p>
+ </div>
+ </body>
+</html>
+
+//如果你删除了 ng-app 指令， HTML 将原样显示表达式，不对它进行解析：
+<!DOCTYPE html>
+<html>
+ <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+ <body>
+ <div>
+ <p>My first expression: {{ 5 + 5 }}</p>
+ </div>
+ </body>
+</html>
+
+// AngularJS 表达式采用和 ng-bind 指令一样的方式将 AngularJS 数据绑定到 HTML。
+<!DOCTYPE html>
+<html>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+ <body>
+ <div ng-app="">
+ <p>Name: <input type="text" ng-model="name"></p>
+ <p>{{name}}</p>
+ </div>
+ </body>
+</html>
+
+// AngularJS 的数字类似 JavaScript 的数字：
+<div ng-app="" ng-init="quantity=1;cost=5">
+ <p>Total in dollar: {{ quantity * cost }}</p>
+</div>
+
+//AngularJS 的字符串类似 JavaScript 的字符串：
+<div ng-app="" ng-init="firstName='John';lastName='Doe'">
+ <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
+</div>
+
+//AngularJS 的对象类似 JavaScript 的对象：
+<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
+ <p>The name is {{ person.lastName }}</p>
+</div>
+
+//AngularJS 的数组类似 JavaScript 的数组：
+<div ng-app="" ng-init="points=[1,15,19,2,40]">
+ <p>The third result is {{ points[2] }}</p>
+</div>
+
+// 和 JavaScript 表达式一样， AngularJS 表达式能包含文本，运算符和变量。
+// 和 JavaScript 表达式不同， AngularJS 表达式能写在 HTML 内。
+// AngularJS 表达式不支持条件，循环和异常，而 JavaScript 表达式却支持。
+// AngularJS 表达式支持过滤器，而 JavaScript 表达式不支持。
+
+///////////////////////////////////
+// AngularJS 指令
+
+
+//AngularJS 指令使用前缀 ng- 扩展 HTML 属性。
+//ng-app 指令初始化一个 AngularJS 应用。
+//ng-init 指令初始化应用的数据。
+//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
+<div ng-app="" ng-init="firstName='John'">
+ <p>Name: <input type="text" ng-model="firstName"></p>
+ <p>You wrote: {{ firstName }}</p>
+</div>
+
+//使用 ng-init 并不常见。你将在有关控制器的章节中学习如何初始化数据。
+
+//ng-repeat 指令会重复一个 HTML 元素：
+<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
+ <ul>
+ <li ng-repeat="x in names">
+ {{ x }}
+ </li>
+ </ul>
+</div>
+
+//ng-repeat 指令用在一个对象数组上：
+<div ng-app="" ng-init="names=[
+{name:'Jani',country:'Norway'},
+{name:'Hege',country:'Sweden'},
+{name:'Kai',country:'Denmark'}]">
+ <ul>
+ <li ng-repeat="x in names">
+ {{ x.name + ', ' + x.country }}
+ </li>
+ </ul>
+</div>
+
+// AngularJS 最适合用于数据库 CRUD (Create Read Update Delete) 的应用。
+// 只需设想这些对象都是来自一个数据库的记录。
+
+// ng-app 指令定义一个 AngularJS 应用的根元素。
+// ng-app 指令将在页面加载后自动启动（自动初始化）应用。
+// 稍后你将学习如何为 ng-app 设置一个值（如 ng-app="myModule"）， 来连接代码模块。
+
+// ng-init 指令为一个 AngularJS 应用定义初始值。
+// 通常，你不太使用 ng-init。你会转而使用一个控制器或模块。
+// 你将在稍后学到更多有关控制器和模块的内容。
+
+//ng-model 指令将 HTML 控件 (input, select, textarea) 的值绑定到应用的数据上。
+//ng-model 指令还能：
+//为应用的数据提供类型验证 (number, email, required)。
+//为应用的数据提供状态信息 (invalid, dirty, touched, error)。
+//为 HTML 元素提供 CSS 类。
+//将 HTML 元素绑定到 HTML 表单。
+
+//ng-repeat 指令为集合（一个数组）中的每个元素克隆出 HTML 元素。
+
+///////////////////////////////////
+// AngularJS 控制器
+
+// AngularJS 控制器控制 AngularJS 应用中的数据。
+// AngularJS 控制器就是常规的 JavaScript 对象。
+
+// AngularJS 应用由控制器控制。
+// ng-controller 指令定义应用的控制器。
+// 一个控制器就是一个 JavaScript 对象， 通过标准的 JavaScript 对象构建器创建。
+
+<div ng-app="myApp" ng-controller="myCtrl">
+
+First Name: <input type="text" ng-model="firstName"><br>
+Last Name: <input type="text" ng-model="lastName"><br>
+<br>
+Full Name: {{firstName + " " + lastName}}
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('myCtrl', function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName = "Doe";
+});
+</script>
+
+//应用的解析：
+
+//AngularJS 应用通过 ng-app="myApp" 定义。该应用运行在 <div> 内。
+//ng-controller="myCtrl" 属性是一个 AngularJS 指令。它定义了一个控制器。
+//myCtrl 函数是一个 JavaScript 函数。
+//AngularJS 将使用一个 $scope 对象来调用控制器。
+//AngularJS 中， $scope 就是该应用对象（应用的变量和函数的所有者）。
+//该控制器在 $scope 内创建了两个属性（即变量 firstName 和 lastName）。
+//ng-model 指令将输入表单项绑定到控制器的属性上（firstName 和 lastName）。
+
+//以上的例子演示了一个包含有两个属性 lastName 和 firstName 的控制器。
+//一个控制器也可以有方法（函数的变量）：
+<div ng-app="myApp" ng-controller="personCtrl">
+
+First Name: <input type="text" ng-model="firstName"><br>
+Last Name: <input type="text" ng-model="lastName"><br>
+<br>
+Full Name: {{fullName()}}
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('personCtrl', function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName = "Doe";
+ $scope.fullName = function() {
+ return $scope.firstName + " " + $scope.lastName;
+ }
+});
+</script>
+
+//在较大型的应用中， 通常是将控制器代码保存在外部文件中。
+//只需将 <script> </script> 标签之间的代码复制到一个名为 personController.js 的外部文件中：
+
+<div ng-app="myApp" ng-controller="personCtrl">
+
+First Name: <input type="text" ng-model="firstName"><br>
+Last Name: <input type="text" ng-model="lastName"><br>
+<br>
+Full Name: {{firstName + " " + lastName}}
+
+</div>
+
+<script src="personController.js"></script>
+
+// 为方便下个例子使用，我们将创建一个新的控制器文件：
+angular.module('myApp', []).controller('namesCtrl', function($scope) {
+ $scope.names = [
+ {name:'Jani',country:'Norway'},
+ {name:'Hege',country:'Sweden'},
+ {name:'Kai',country:'Denmark'}
+ ];
+});
+
+//将文件保存为 namesController.js：
+//然后在一个应用中使用该控制器：
+
+<div ng-app="myApp" ng-controller="namesCtrl">
+
+<ul>
+ <li ng-repeat="x in names">
+ {{ x.name + ', ' + x.country }}
+ </li>
+</ul>
+
+</div>
+
+<script src="namesController.js"></script>
+
+///////////////////////////////////
+// AngularJS 过滤器
+
+// 过滤器可以通过一个管道符添加到表达式和指令上。
+// AngularJS 过滤器能用来转换数据：
+
+- **currency**: 将一个数字格式化成货币格式。
+- **filter**: 从一个数组中选择一组子集元素。
+- **lowercase**: 将一个字符串格式化成小写形式。
+- **orderBy**: 依据一个表达式排序一个数组。
+- **upper**: 将一个字符串格式化成大写形式。
+
+//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个表达式上。
+//（在下面的两个例子中，我们将使用前一章中的 person 控制器）
+//uppercase 过滤器将字符串格式化成大写格式：
+<div ng-app="myApp" ng-controller="personCtrl">
+
+<p>The name is {{ lastName | uppercase }}</p>
+
+</div>
+
+//lowercase 过滤器将字符串格式化成小写格式：
+<div ng-app="myApp" ng-controller="personCtrl">
+
+<p>The name is {{ lastName | lowercase }}</p>
+
+</div>
+
+//currency 过滤器将一个数字格式化成货币格式：
+<div ng-app="myApp" ng-controller="costCtrl">
+
+<input type="number" ng-model="quantity">
+<input type="number" ng-model="price">
+
+<p>Total = {{ (quantity * price) | currency }}</p>
+
+</div>
+
+//一个过滤器可以通过一个管道符 (|) 及一个过滤器表达式添加到一个指令上。
+//orderBy 过滤器根据一个表达式排序一个数组：
+<div ng-app="myApp" ng-controller="namesCtrl">
+
+<ul>
+ <li ng-repeat="x in names | orderBy:'country'">
+ {{ x.name + ', ' + x.country }}
+ </li>
+</ul>
+
+<div>
+
+//一个输入框过滤器可以通过一个管道符 (|)
+//以及后跟一个冒号和模式名的 filter 添加到一个指令上。
+//该过滤器从一个数组中选择一个子集：
+
+<div ng-app="myApp" ng-controller="namesCtrl">
+
+<p><input type="text" ng-model="test"></p>
+
+<ul>
+ <li ng-repeat="x in names | filter:test | orderBy:'country'">
+ {{ (x.name | uppercase) + ', ' + x.country }}
+ </li>
+</ul>
+
+</div>
+
+///////////////////////////////////
+// AngularJS AJAX - $http
+
+//$http 是一个从远程服务器读取数据的 AngularJS 服务。
+
+// 以下数据可由一个 web 服务器提供：
+// http://www.w3schools.com/angular/customers.php
+// **访问 URL 来查看数据格式**
+
+// AngularJS $http 是一个从 web 服务器上读取数据的核心服务。
+// $http.get(url) 这个函数用来读取服务器数据。
+<div ng-app="myApp" ng-controller="customersCtrl">
+
+<ul>
+ <li ng-repeat="x in names">
+ {{ x.Name + ', ' + x.Country }}
+ </li>
+</ul>
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('customersCtrl', function($scope, $http) {
+ $http.get("http://www.w3schools.com/angular/customers.php")
+ .success(function(response) {$scope.names = response.records;});
+});
+</script>
+
+// 应用解析：
+
+// AngularJS 应用由 ng-app 定义。该应用运行在一个 <div> 中。
+// ng-controller 指令命名控制器对象。
+// customersCtrl 函数是一个标准的 JavaScript 对象构造器。
+// AngularJS 会使用一个 $scope 和 $http 对象来调用 customersCtrl。
+// $scope 就是该应用对象（应用的变量和函数的所有者）。
+// $http 是一个用于请求外部数据的 XMLHttpRequest 对象。
+// $http.get() 从 http://www.w3schools.com/angular/customers.php 读取 JSON 数据。
+// 如果成功， 该控制器会根据来自服务器的 JSON 数据，在 $scope 中创建一个属性 (names)。
+
+
+// 向不同的服务器（不同于请求页）请求数据，称作跨站 HTTP 请求。
+// 跨站请求在网站上很普遍。许多网页会从不同的服务器加载 CSS，图片和脚本。
+// 在现代浏览器中，基于安全原因，从脚本内进行跨站 HTTP 请求是被禁止的。
+// 下面的这行代码，已被加入到我们的 PHP 例子中，以便允许跨站访问。
+header("Access-Control-Allow-Origin: *");
+
+
+///////////////////////////////////
+// AngularJS 表格
+
+// 使用 angular 显示表格非常简单：
+<div ng-app="myApp" ng-controller="customersCtrl">
+
+<table>
+ <tr ng-repeat="x in names">
+ <td>{{ x.Name }}</td>
+ <td>{{ x.Country }}</td>
+ </tr>
+</table>
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('customersCtrl', function($scope, $http) {
+ $http.get("http://www.w3schools.com/angular/customers.php")
+ .success(function (response) {$scope.names = response.records;});
+});
+</script>
+
+// 要排序表格，添加一个 orderBy 过滤器：
+<table>
+ <tr ng-repeat="x in names | orderBy : 'Country'">
+ <td>{{ x.Name }}</td>
+ <td>{{ x.Country }}</td>
+ </tr>
+</table>
+
+// 要显示表格索引值，添加一个带有 $index 的 <td>：
+<table>
+ <tr ng-repeat="x in names">
+ <td>{{ $index + 1 }}</td>
+ <td>{{ x.Name }}</td>
+ <td>{{ x.Country }}</td>
+ </tr>
+</table>
+
+// 使用 $even 和 $odd
+<table>
+ <tr ng-repeat="x in names">
+ <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
+ <td ng-if="$even">{{ x.Name }}</td>
+ <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
+ <td ng-if="$even">{{ x.Country }}</td>
+ </tr>
+</table>
+
+///////////////////////////////////
+// AngularJS HTML DOM
+
+//AngularJS 有用于将应用的数据绑定到 HTML DOM 元素属性的指令。
+
+// ng-disabled 指令将 AngularJS 应用的数据绑定到 HTML 元素的 disabled 属性上。
+
+<div ng-app="" ng-init="mySwitch=true">
+
+<p>
+<button ng-disabled="mySwitch">Click Me!</button>
+</p>
+
+<p>
+<input type="checkbox" ng-model="mySwitch">Button
+</p>
+
+</div>
+
+//应用解析：
+
+// ng-disabled 指令将应用的 mySwitch 数据绑定到 HTML 按钮的 disabled 属性上。
+// ng-model 指令将 HTML checkbox 元素的值绑定到 mySwitch 的值上。
+// 如果 mySwitch 的值求值为 true，则该按钮将被禁用：
+<p>
+<button disabled>Click Me!</button>
+</p>
+
+// 如果 mySwitch 的值求值为 false，则该按钮将不会被禁用：
+<p>
+ <button>Click Me!</button>
+</p>
+
+// ng-show 指令显示或隐藏一个 HTML 元素。
+
+<div ng-app="">
+
+<p ng-show="true">I am visible.</p>
+
+<p ng-show="false">I am not visible.</p>
+
+</div>
+
+// ng-show 指令基于 ng-show 的值显示（或隐藏）一个 HTML 元素。
+// 你可以使用任何能求值成 true 或 false 的表达式：
+<div ng-app="">
+<p ng-show="hour > 12">I am visible.</p>
+</div>
+
+///////////////////////////////////
+// AngularJS 事件
+
+// AngularJS 有它自己的 HTML 事件指令。
+
+// ng-click 指令定义一个 AngularJS 点击事件。
+<div ng-app="myApp" ng-controller="myCtrl">
+
+<button ng-click="count = count + 1">Click me!</button>
+
+<p>{{ count }}</p>
+
+</div>
+<script>
+var app = angular.module('myApp', []);
+app.controller('myCtrl', function($scope) {
+ $scope.count = 0;
+});
+</script>
+
+// ng-hide 指令可用于设置一个应用的部分区域的可见性。
+// 值 ng-hide="true" 使得一个 HTML 元素不可见。
+// 值 ng-hide="false" 使得一个 HTML 元素可见。
+<div ng-app="myApp" ng-controller="personCtrl">
+
+<button ng-click="toggle()">Toggle</button>
+
+<p ng-hide="myVar">
+First Name: <input type="text" ng-model="firstName"><br>
+Last Name: <input type="text" ng-model="lastName"><br>
+<br>
+Full Name: {{firstName + " " + lastName}}
+</p>
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('personCtrl', function($scope) {
+ $scope.firstName = "John",
+ $scope.lastName = "Doe"
+ $scope.myVar = false;
+ $scope.toggle = function() {
+ $scope.myVar = !$scope.myVar;
+ };
+});
+</script>
+
+//应用解析：
+
+// personController 的第一部分和讲述控制器章节中的一样。
+// 该应用有一个默认属性（一个变量）：$scope.myVar = false：
+// ng-hide 指令依据 myVar 的值（true 或 false），
+// 设置 <p> 元素的可见性，该元素含有两个输入框。
+// 函数 toggle() 将 myVar 在 true 和 false 间进行切换。
+// 值 ng-hide="true" 使得该元素不可见。
+
+
+// ng-show 指令也能用来设置一个应用的某部分的可见性。
+// 值 ng-show="false" 使得一个 HTML 元素不可见。
+// 值 ng-show="true" 使得一个 HTML 元素可见。
+// 这个例子与上面的一样，但用 ng-show 替代了 ng-hide：
+<div ng-app="myApp" ng-controller="personCtrl">
+
+<button ng-click="toggle()">Toggle</button>
+
+<p ng-show="myVar">
+First Name: <input type="text" ng-model="firstName"><br>
+Last Name: <input type="text" ng-model="lastName"><br>
+<br>
+Full Name: {{firstName + " " + lastName}}
+</p>
+
+</div>
+
+<script>
+var app = angular.module('myApp', []);
+app.controller('personCtrl', function($scope) {
+ $scope.firstName = "John",
+ $scope.lastName = "Doe"
+ $scope.myVar = true;
+ $scope.toggle = function() {
+ $scope.myVar = !$scope.myVar;
+ }
+});
+</script>
+
+///////////////////////////////////
+// AngularJS 模块
+
+// 一个 AngularJS 模块定义一个应用。
+// 模块是一个应用的不同部分所在的一个容器。
+// 模块是应用控制器的一个容器。
+// 控制器总是隶属于一个模块。
+
+// 这个应用 ("myApp") 有一个控制器 ("myCtrl")：
+
+<!DOCTYPE html>
+<html>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+<body>
+
+<div ng-app="myApp" ng-controller="myCtrl">
+{{ firstName + " " + lastName }}
+</div>
+
+<script>
+var app = angular.module("myApp", []);
+app.controller("myCtrl", function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName = "Doe";
+});
+</script>
+
+</body>
+</html>
+
+// 在 AngularJS 应用中通常将模块和控制器放置在 JavaScript 文件中。
+// 在本例中，"myApp.js" 包含了一个应用模块的定义，而 "myCtrl.js" 包含了控制器：
+
+<!DOCTYPE html>
+<html>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+<body>
+
+<div ng-app="myApp" ng-controller="myCtrl">
+{{ firstName + " " + lastName }}
+</div>
+
+<script src="myApp.js"></script>
+<script src="myCtrl.js"></script>
+
+</body>
+</html>
+
+//myApp.js
+var app = angular.module("myApp", []);
+
+// 模块定义中的 [] 参数可用来定义依赖的模块。
+
+// myCtrl.js
+app.controller("myCtrl", function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName= "Doe";
+});
+
+// JavaScript 中应该避免使用全局函数。它们会非常容易地被覆盖
+// 或被其它脚本破坏。
+
+// AngularJS 脚本通过将所有函数保存在模块内，缓解了这种问题。
+
+// 虽然 HTML 应用中通常是将脚本放置在
+// <body> 元素的末尾，但还是推荐你要么在
+// <head> 中要么在 <body> 的开头处加载 AngularJS 库。
+
+// 这是因为对 angular.module 的调用只有在库被加载后才能被编译。
+
+<!DOCTYPE html>
+<html>
+<body>
+<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+
+<div ng-app="myApp" ng-controller="myCtrl">
+{{ firstName + " " + lastName }}
+</div>
+
+<script>
+var app = angular.module("myApp", []);
+app.controller("myCtrl", function($scope) {
+ $scope.firstName = "John";
+ $scope.lastName = "Doe";
+});
+</script>
+
+</body>
+</html>
+
+
+///////////////////////////////////
+// AngularJS 应用
+
+// AngularJS 模块定义 AngularJS 应用。
+// AngularJS 控制器控制 AngularJS 应用。
+// ng-app 指令定义该应用，ng-controller 定义该控制器。
+<div ng-app="myApp" ng-controller="myCtrl">
+ First Name: <input type="text" ng-model="firstName"><br>
+ Last Name: <input type="text" ng-model="lastName"><br>
+ <br>
+ Full Name: {{firstName + " " + lastName}}
+</div>
+<script>
+ var app = angular.module('myApp', []);
+ app.controller('myCtrl', function($scope) {
+ $scope.firstName= "John";
+ $scope.lastName= "Doe";
+ });
+</script>
+
+// AngularJS 模块定义应用：
+var app = angular.module('myApp', []);
+
+// AngularJS 控制器控制应用：
+app.controller('myCtrl', function($scope) {
+ $scope.firstName= "John";
+ $scope.lastName= "Doe";
+});
+```
+
+## 来源 & 参考
+
+**例子**
+
+- http://www.w3schools.com/angular/angular_examples.asp
+
+**参考**
+
+- http://www.w3schools.com/angular/angular_ref_directives.asp
+- http://www.w3schools.com/angular/default.asp
diff --git a/zh-cn/c++-cn.html.markdown b/zh-cn/c++-cn.html.markdown
index d71aa8d6..87951bc3 100644
--- a/zh-cn/c++-cn.html.markdown
+++ b/zh-cn/c++-cn.html.markdown
@@ -315,7 +315,7 @@ void Dog::print() const
void Dog::~Dog()
{
- cout << "Goodbye " << name << "\n";
+ std::cout << "Goodbye " << name << "\n";
}
int main() {
diff --git a/zh-cn/less-cn.html.markdown b/zh-cn/less-cn.html.markdown
new file mode 100644
index 00000000..365a0287
--- /dev/null
+++ b/zh-cn/less-cn.html.markdown
@@ -0,0 +1,387 @@
+---
+language: less
+filename: learnless-cn.less
+contributors:
+ - ["Saravanan Ganesh", "http://srrvnn.me"]
+translators:
+ - ["Jiang Haiyun", "http://www.atjiang.com"]
+lang: zh-cn
+---
+
+
+Less是一种CSS预处理器，它增加了诸如变量、嵌套、mixin等功能。
+Less(以及其它预处理器，如[Sass](http://sass-lang.com/))能帮助开发人员编写易维护，DRY (Don't Repeat Yourself) 的代码。
+
+```css
+
+
+//单行注释在编译成CSS后会被删除。
+
+/* 多行注释将保留. */
+
+
+
+/* 变量
+==============================*/
+
+
+/* 你可以将一个CSS值（如一个颜色值）保存到变量中。
+ 使用'@'符号来创建一个变量。*/
+
+@primary-color: #a3a4ff;
+@secondary-color: #51527f;
+@body-font: 'Roboto', sans-serif;
+
+/* 你可以在你的样式文件中使用这些变量。
+ 现在假如你想修改颜色，你只需修改一次即可。*/
+
+body {
+ background-color: @primary-color;
+ color: @secondary-color;
+ font-family: @body-font;
+}
+
+/* 以上将编译成： */
+
+body {
+ background-color: #a3a4ff;
+ color: #51527F;
+ font-family: 'Roboto', sans-serif;
+}
+
+
+/* 相比于在你的样式文件中逐个修改，这种方式维护性更好。 */
+
+
+
+/* Mixins
+==============================*/
+
+
+/* 如果你要为多个元素编写同样的代码，
+ 你可能想实现轻松地重用。*/
+
+.center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+
+/* 你只需简单地将选择子作为样式添加进来就能使用mixin了 */
+
+div {
+ .center;
+ background-color: @primary-color;
+}
+
+/* 它将编译成: */
+
+.center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+div {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ background-color: #a3a4ff;
+}
+
+/* 通过在选择子后添加括号，可以使这些mixin代码不被编译 */
+
+.center() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+
+div {
+ .center;
+ background-color: @primary-color;
+}
+
+/* 将编译成: */
+div {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ background-color: #a3a4ff;
+}
+
+
+
+/* 嵌套
+==============================*/
+
+
+/* Less允许你在选择子中嵌套选择子 */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+
+ li {
+ background-color: #f00;
+ }
+}
+
+/* '&'将被替换成父选择子。*/
+/* 你也可以嵌套伪类。 */
+/* 注意过度嵌套将会导致代码难以维护。
+ 最佳实践推荐在嵌套时不超过3层。
+ 例如： */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+
+ li {
+ background-color: red;
+
+ &:hover {
+ background-color: blue;
+ }
+
+ a {
+ color: white;
+ }
+ }
+}
+
+/* 编译成： */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+}
+
+ul li {
+ background-color: red;
+}
+
+ul li:hover {
+ background-color: blue;
+}
+
+ul li a {
+ color: white;
+}
+
+
+
+/* 函数
+==============================*/
+
+
+/* Less提供的函数可以用来完成多种任务。
+ 考虑以下情况： */
+
+/* 函数可以通过其名称及传入其所需的参数来调用。 */
+
+body {
+ width: round(10.25px);
+}
+
+.header {
+ background-color: lighten(#000, 0.5);
+}
+
+.footer {
+ background-color: fadeout(#000, 0.25)
+}
+
+/* 编译成: */
+
+body {
+ width: 10px;
+}
+
+.header {
+ background-color: #010101;
+}
+
+.footer {
+ background-color: rgba(0, 0, 0, 0.75);
+}
+
+/* 你也可以定义自己的函数。函数非常类似于mixin。
+ 当你在函数和mixin之间抉择时，
+ 记住mixin最适合用来创建CSS而函数更适合于
+ 处理那些可能在你的Less代码中使用的逻辑。
+ '数学运算符'部分的例子是转成可重用函数的最佳选择。*/
+
+/* 该函数计算两数的平均值： */
+
+.average(@x, @y) {
+ @average-result: ((@x + @y) / 2);
+}
+
+div {
+ .average(16px, 50px); // "调用"mixin
+ padding: @average-result; // 使用它的"返回"值
+}
+
+/* 编译成: */
+
+div {
+ padding: 33px;
+}
+
+
+
+/* 扩展 (继承)
+==============================*/
+
+
+/* 扩展是在选择子间共享属性的一种方法。 */
+
+.display {
+ height: 50px;
+}
+
+.display-success {
+ &:extend(.display);
+ border-color: #22df56;
+}
+
+/* 编译成: */
+.display,
+.display-success {
+ height: 50px;
+}
+.display-success {
+ border-color: #22df56;
+}
+
+/* 扩展一条CSS语句优于创建一个mixin，
+ 这是由其组合所有共享相同基样式的类的方式决定的。
+ 如果使用mixin完成，其属性将会在调用了该mixin的每条语句中重复。
+ 虽然它不至会影响你的工作流，但它会在由Less编译器
+ 生成的的文件中添加不必要的代码。*/
+
+
+
+/* 片段与导入
+==============================*/
+
+
+/* Less允许你创建片段文件。它有助于你的Less代码保持模块化。
+ 片段文件习惯上以'_'开头，例如 _reset.css，并被导入到
+ 一个将会被编译成CSS的主less文件中。*/
+
+/* 考虑以下的CSS，我们将把它们放入一个叫_reset.css的文件中 */
+
+html,
+body,
+ul,
+ol {
+ margin: 0;
+ padding: 0;
+}
+
+/* Less提供的@import能用来将片段导入到文件中。
+ 它与传统的CSS @import语句不同，无需通过
+ HTTP请求获取导入文件。Less提取导入文件
+ 并将它们与编译后的代码结合起来。 */
+
+@import 'reset';
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+/* 编译成: */
+
+html, body, ul, ol {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+
+
+/* 数学运算符
+==============================*/
+
+
+/* Less提供以下的运算符: +, -, *, /, 和 %。
+ 相比于使用你事先手工计算好了的数值，它们
+ 对于直接在你的Less文件中计算数值很有用。
+ 以下是设置一个两列设计的例子。*/
+
+@content-area: 960px;
+@main-content: 600px;
+@sidebar-content: 300px;
+
+@main-size: @main-content / @content-area * 100%;
+@sidebar-size: @sidebar-content / @content-area * 100%;
+@gutter: 100% - (@main-size + @sidebar-size);
+
+body {
+ width: 100%;
+}
+
+.main-content {
+ width: @main-size;
+}
+
+.sidebar {
+ width: @sidebar-size;
+}
+
+.gutter {
+ width: @gutter;
+}
+
+/* 编译成： */
+
+body {
+ width: 100%;
+}
+
+.main-content {
+ width: 62.5%;
+}
+
+.sidebar {
+ width: 31.25%;
+}
+
+.gutter {
+ width: 6.25%;
+}
+
+
+```
+
+## 实践Less
+
+如果你想在你的浏览器中尝试LESS，参阅：
+* [Codepen](http://codepen.io/)
+* [LESS2CSS](http://lesscss.org/less-preview/)
+
+## 兼容性
+
+Less可以用于任何项目中，只要你有程序能将它编译成CSS即可。你还需要验证你所使用的CSS是否与你的目标浏览器兼容。
+
+[QuirksMode CSS](http://www.quirksmode.org/css/)和[CanIUse](http://caniuse.com) 对于检查兼容性来说都是不错的资源。
+
+## 延伸阅读资料
+* [Official Documentation](http://lesscss.org/features/)
+* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)
diff --git a/zh-cn/r-cn.html.markdown b/zh-cn/r-cn.html.markdown
index 55a29b11..d576db29 100644
--- a/zh-cn/r-cn.html.markdown
+++ b/zh-cn/r-cn.html.markdown
@@ -303,7 +303,7 @@ if (4 > 3) {
# 定义如下
jiggle <- function(x) {
- x + rnorm(x, sd=.1) #add in a bit of (controlled) noise
+ x = x + rnorm(1, sd=.1) # 添加一点（正态）波动
return(x)
}
diff --git a/zh-cn/sass-cn.html.markdown b/zh-cn/sass-cn.html.markdown
new file mode 100644
index 00000000..985c6470
--- /dev/null
+++ b/zh-cn/sass-cn.html.markdown
@@ -0,0 +1,585 @@
+---
+language: sass
+filename: learnsass-cn.scss
+contributors:
+ - ["Laura Kyle", "https://github.com/LauraNK"]
+ - ["Sean Corrales", "https://github.com/droidenator"]
+ - ["Kyle Mendes", "https://github.com/pink401k"]
+ - ["Keith Miyake", "https://github.com/kaymmm"]
+translators:
+ - ["Jiang Haiyun", "http://www.atjiang.com"]
+lang: zh-cn
+---
+
+Sass是一种CSS扩展语言，它增加了诸如变量、嵌套、mixin等功能。
+Sass(以及其它预处理器，如[Less](http://lesscss.org/)等) 能帮助开发人员编写易维护和 DRY (Don't Repeat Yourself)的代码。
+
+Sass有两种不同的语法可选用。SCSS的语法和CSS的相同，但增加了Sass的额外功能。或者Sass（原来的语法），它使用缩进而非大括号和分号。
+
+本教程使用SCSS编写。
+
+如果你已熟悉CSS3，你可能相对能较快地掌握Sass。它并没有提供任何新的类型属性，而只是提供了一些工具使你能更高效的编写CSS，并且使维护更加容易。
+
+```scss
+
+
+// 单行注释当Sass被编译成CSS后会被删除。
+
+/* 多行注释将保留. */
+
+/* 变量
+============================== */
+
+
+
+/* 你可以将一个CSS值（如一个颜色值）保存到变量中。
+使用'$'符号来创建一个变量。*/
+
+$primary-color: #A3A4FF;
+$secondary-color: #51527F;
+$body-font: 'Roboto', sans-serif;
+
+/* 你可以在你的样式文件中使用变量。
+ 现在假如你想修改颜色，你只需修改一次即可。*/
+
+body {
+ background-color: $primary-color;
+ color: $secondary-color;
+ font-family: $body-font;
+}
+
+/* 以上将编译成： */
+body {
+ background-color: #A3A4FF;
+ color: #51527F;
+ font-family: 'Roboto', sans-serif;
+}
+
+/* 相比于在你的样式文件中逐个进行修改，这种方式维护性更好。 */
+
+
+
+/* 控制指令
+============================== */
+
+/* Sass允许你使用@if, @else, @for, @while, 和 @each 来控制
+ 你的代码如何编译成CSS */
+
+/* @if/@else块的行为和你可能预想的会完全相同 */
+
+$debug: true !default;
+
+@mixin debugmode {
+ @if $debug {
+ @debug "Debug mode enabled";
+
+ display: inline-block;
+ }
+ @else {
+ display: none;
+ }
+}
+
+.info {
+ @include debugmode;
+}
+
+/* 如果$debug设置为了true, .info 将会显示; 如果设置为false那么
+ .info 将不显示。
+
+注意： @debug将在命令行中输出调试信息。
+在调试你的SCSS时它对于检查变量很有用。*/
+
+.info {
+ display: inline-block;
+}
+
+/* @for是控制循环，它能遍历区间值。
+它对于设置一组元素的类型特别有用。
+有两种形式，"through"和"to"。前者包括最末那个值，
+而后者止于最末那个值。
+*/
+
+@for $c from 1 to 4 {
+ div:nth-of-type(#{$c}) {
+ left: ($c - 1) * 900 / 3;
+ }
+}
+
+@for $c from 1 through 3 {
+ .myclass-#{$c} {
+ color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3);
+ }
+}
+
+/* 将编译成: */
+
+div:nth-of-type(1) {
+ left: 0;
+}
+
+div:nth-of-type(2) {
+ left: 300;
+}
+
+div:nth-of-type(3) {
+ left: 600;
+}
+
+.myclass-1 {
+ color: #555555;
+}
+
+.myclass-2 {
+ color: #aaaaaa;
+}
+
+.myclass-3 {
+ color: white;
+// SASS automatically converts #FFFFFF to white
+}
+
+/* @while也非常直白： */
+
+$columns: 4;
+$column-width: 80px;
+
+@while $columns > 0 {
+ .col-#{$columns} {
+ width: $column-width;
+ left: $column-width * ($columns - 1);
+ }
+
+ $columns: $columns - 1;
+}
+
+/* 将输出以下CSS: */
+
+.col-4 {
+ width: 80px;
+ left: 240px;
+}
+
+.col-3 {
+ width: 80px;
+ left: 160px;
+}
+
+.col-2 {
+ width: 80px;
+ left: 80px;
+}
+
+.col-1 {
+ width: 80px;
+ left: 0px;
+}
+
+/* @each函数类似@for, 除了它使用一个列表而不是序列值
+注意: 你指定列表的方式和指定其它变量一样，
+用空格作为分隔符。 */
+
+$social-links: facebook twitter linkedin reddit;
+
+.social-links {
+ @each $sm in $social-links {
+ .icon-#{$sm} {
+ background-image: url("images/#{$sm}.png");
+ }
+ }
+}
+
+/* 将输出: */
+
+.social-links .icon-facebook {
+ background-image: url("images/facebook.png");
+}
+
+.social-links .icon-twitter {
+ background-image: url("images/twitter.png");
+}
+
+.social-links .icon-linkedin {
+ background-image: url("images/linkedin.png");
+}
+
+.social-links .icon-reddit {
+ background-image: url("images/reddit.png");
+}
+
+
+/* Mixins
+==============================*/
+
+/* 如果你发现你要为多个元素编写相同的代码，
+你可能想将那些代码保存到一个mixin中。
+
+使用'@mixin'指令，再为你的mixin加上一个名称。*/
+
+@mixin center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+}
+
+/* 你可以通过'@include'及mixin名来调用mixin。 */
+
+div {
+ @include center;
+ background-color: $primary-color;
+}
+
+/* 将编译成: */
+div {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ background-color: #A3A4FF;
+}
+
+/* 你可以使用mixin来创建一个快捷属性。*/
+
+@mixin size($width, $height) {
+ width: $width;
+ height: $height;
+}
+
+/* 你可以通过传入width和height参数来调用它。*/
+
+.rectangle {
+ @include size(100px, 60px);
+}
+
+.square {
+ @include size(40px, 40px);
+}
+
+/* 编译成: */
+.rectangle {
+ width: 100px;
+ height: 60px;
+}
+
+.square {
+ width: 40px;
+ height: 40px;
+}
+
+
+
+/* 函数
+============================== */
+
+
+
+/* Sass提供的函数可以用来完成各种各样的任务。
+ 考虑以下情况 */
+
+/* 函数可以通过其名称及传入其所需的参数来调用 */
+body {
+ width: round(10.25px);
+}
+
+.footer {
+ background-color: fade_out(#000000, 0.25);
+}
+
+/* 编译成: */
+
+body {
+ width: 10px;
+}
+
+.footer {
+ background-color: rgba(0, 0, 0, 0.75);
+}
+
+/* 你也可以定义你自己的函数。函数非常类似于mixin。
+ 当你在函数和mixin之间抉择时，记住mixin最适合于创建CSS而函数更适合于
+ 处理那些可能在你的Sass代码中使用的逻辑。'数学运算符'部分的例子
+ 是转成可重用函数的最理想选择。 */
+
+/* 该函数将接收一个目标尺寸大小和父结点尺寸大小，然后计算并
+ 返回百分数 */
+
+@function calculate-percentage($target-size, $parent-size) {
+ @return $target-size / $parent-size * 100%;
+}
+
+$main-content: calculate-percentage(600px, 960px);
+
+.main-content {
+ width: $main-content;
+}
+
+.sidebar {
+ width: calculate-percentage(300px, 960px);
+}
+
+/* 编译成: */
+
+.main-content {
+ width: 62.5%;
+}
+
+.sidebar {
+ width: 31.25%;
+}
+
+
+
+/* 扩展 (继承)
+============================== */
+
+
+
+/* 扩展是在选择子间共享属性的一种方法。 */
+
+.display {
+ @include size(5em, 5em);
+ border: 5px solid $secondary-color;
+}
+
+.display-success {
+ @extend .display;
+ border-color: #22df56;
+}
+
+/* 编译成: */
+.display, .display-success {
+ width: 5em;
+ height: 5em;
+ border: 5px solid #51527F;
+}
+
+.display-success {
+ border-color: #22df56;
+}
+
+/* 扩展一条CSS语句优于创建一个mixin，
+ 这是由Sass组合所有共享相同基样式的类的方式决定的。
+ 如果使用mixin完成，width, height, 和border将会在
+ 调用了该mixin的每条语句中重复。虽然它不至于会影响你的工作流，
+ 但它会在由Sass编译器生成的的文件中添加不必要的代码。*/
+
+
+/* 嵌套
+============================== */
+
+
+
+/* Sass允许在选择子中嵌套选择子 */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+
+ li {
+ background-color: #FF0000;
+ }
+}
+
+/* '&'将被父选择子替换。*/
+/* 你也可以嵌套伪类。 */
+/* 注意过度嵌套将导致你的代码难以维护。
+最佳实践推荐在嵌套时不超过3层。
+例如： */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+
+ li {
+ background-color: red;
+
+ &:hover {
+ background-color: blue;
+ }
+
+ a {
+ color: white;
+ }
+ }
+}
+
+/* 编译成： */
+
+ul {
+ list-style-type: none;
+ margin-top: 2em;
+}
+
+ul li {
+ background-color: red;
+}
+
+ul li:hover {
+ background-color: blue;
+}
+
+ul li a {
+ color: white;
+}
+
+
+
+/* 片段与导入
+============================== */
+
+
+
+/* Sass允许你创建片段文件。它有助于你的Sass代码保持模块化。
+ 片段文件应该以 '_' 开头，例如 _reset.css。
+ 片段不会输出到CSS中。*/
+
+/* 考虑以下的CSS，我们会将它们放入一个叫作_reset.css的文件中 */
+
+html,
+body,
+ul,
+ol {
+ margin: 0;
+ padding: 0;
+}
+
+/* Sass提供的@import能用来将片段导入到文件中。
+ 它与传统的CSS @import语句不同，不需要通过
+ 另外的HTTP请求来获取导入的文件。
+ Sass提取导入文件并将它与编译后的代码结合起来。 */
+
+@import 'reset';
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+/* 编译成: */
+
+html, body, ul, ol {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-size: 16px;
+ font-family: Helvetica, Arial, Sans-serif;
+}
+
+
+
+/* 占位符选择子
+============================== */
+
+
+
+/* 占位符在创建用于扩展的CSS语句时非常有用。
+ 如果你想创建一条只通过@extend使用的CSS语句，你可以利用占位符来实现。
+ 占位符以'%'而非'.'或'#'开头。占位符不会出现在编译后的CSS中 */
+
+%content-window {
+ font-size: 14px;
+ padding: 10px;
+ color: #000;
+ border-radius: 4px;
+}
+
+.message-window {
+ @extend %content-window;
+ background-color: #0000ff;
+}
+
+/* 编译成: */
+
+.message-window {
+ font-size: 14px;
+ padding: 10px;
+ color: #000;
+ border-radius: 4px;
+}
+
+.message-window {
+ background-color: #0000ff;
+}
+
+
+
+/* 数学运算
+============================== */
+
+
+
+/* Sass提供以下的运算符: +, -, *, /, 和 %。它们
+ 相比于使用你事先手工计算好了的数值，它们
+ 对于直接在你的Sass文件中计算数值很有用。
+ 以下是设置一个简单的两列设计的例子。*/
+
+$content-area: 960px;
+$main-content: 600px;
+$sidebar-content: 300px;
+
+$main-size: $main-content / $content-area * 100%;
+$sidebar-size: $sidebar-content / $content-area * 100%;
+$gutter: 100% - ($main-size + $sidebar-size);
+
+body {
+ width: 100%;
+}
+
+.main-content {
+ width: $main-size;
+}
+
+.sidebar {
+ width: $sidebar-size;
+}
+
+.gutter {
+ width: $gutter;
+}
+
+/* 编译成： */
+
+body {
+ width: 100%;
+}
+
+.main-content {
+ width: 62.5%;
+}
+
+.sidebar {
+ width: 31.25%;
+}
+
+.gutter {
+ width: 6.25%;
+}
+
+```
+
+## SASS还是Sass?
+该语言的名字，“Sass”，是一个词，不是一个缩写。
+你有没想过Sass是否是一个缩写词？你可能没有，但我反正会告诉你。
+该语言的名字是一个单词，不是一个缩写词。
+由于人们老是将它写成"SASS"，语言的作者开玩笑地称它为"Syntactically Awesome StyleSheets"。
+
+
+## 实践Sass
+如果你想在你的浏览器中尝试Sass，参阅[SassMeister](http://sassmeister.com/)。
+你可以选用任一种语法，只需进到设置页然后选择Sass或SCSS。
+
+
+## 兼容性
+Sass可以用于任何项目中，只要你有程序能将它编译成CSS即可。你还需要验证你所使用的CSS是否与你的目标浏览器兼容。
+
+[QuirksMode CSS](http://www.quirksmode.org/css/)和[CanIUse](http://caniuse.com)对于检查兼容性来说都是不错的资源。
+
+
+## 延伸阅读资料
+* [Official Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)
+* [The Sass Way](http://thesassway.com/) 上提供了教程(初学者-高级)和文章。