Sass入门教程

Sass(Syntactically Awesome StyleSheets) 是对 CSS 的扩展,可以编译成传统CSS,供浏览器使用。使用 Sass 是为了解决在大型项目中传统CSS会遇到的重复、可维护性差等问题。Sass 新增了nested rules(嵌套规则), variables(变量), mixins(混入), selector inheritance(选择器继承)等特性。

使用 Sass 优点:

  • 简单简洁
  • 语义化(expressive)
  • 重复使用性好(reusable)
  • 可维护性和扩展性好

Sass 的语法分为:

  • 新的SCSS  ( Sassy CSSSass 3,扩展名为*.scss);
  • 旧的SASS  ( 学习Haml,具备不使用大括弧格式、使用缩排,不能直接使用CSS语法、学习曲线较高等特性,扩展名为*.sass)

关于两者比较的补充可以参考这篇文章 What’s the difference between SCSS and Sass?

由于新的 SCSS 语法是 CSS3 的超集合,所以传统的 CSS3 档案就算直接复制过来也不会出错,学习曲线相对较缓,因此对于前端开发工程师来说推荐使用SCSS语法。

为了方便演示,你可以将示例代码直接在线转译:http://www.sassmeister.com/

本教程仅供入门学习,如果你想完整学习Sass,或者你的团队,你的项目中正在Sass,建议你查看完整的Sass文档:http://www.css88.com/doc/sass/

使用Sass

在开始介绍Sass特性之前,我们先来学习如何将 Sass 转译成 CSS 。 继续阅读

JavaScript 秘密花园-函数

原文:http://bonsaiden.github.io/JavaScript-Garden/  翻译:三生石上

函数

函数声明与表达式

函数是JavaScript中的一等对象,这意味着可以把函数像其它值一样传递。 一个常见的用法是把匿名函数作为回调函数传递到异步函数中。

函数声明

function foo() {}

上面的方法会在执行前被 解析(hoisted),因此它存在于当前上下文的任意一个地方, 即使在函数定义体的上面被调用也是对的。

foo(); // 正常运行,因为foo在代码运行前已经被创建
function foo() {}

函数赋值表达式

var foo = function() {};

这个例子把一个匿名的函数赋值给变量 foo

foo; // 'undefined'
foo(); // 出错:TypeError
var foo = function() {};

由于 var 定义了一个声明语句,对变量 foo 的解析是在代码运行之前,因此foo 变量在代码运行时已经被定义过了。

但是由于赋值语句只在运行时执行,因此在相应代码执行之前, foo 的值缺省为 undefined

命名函数的赋值表达式

另外一个特殊的情况是将命名函数赋值给一个变量。

var foo = function bar() {
    bar(); // 正常运行
}
bar(); // 出错:ReferenceError

bar 函数声明外是不可见的,这是因为我们已经把函数赋值给了 foo; 然而在 bar 内部依然可见。这是由于 JavaScript 的 命名处理 所致, 函数名在函数内总是可见的。

继续阅读