SASS（Syntactically Awesome Stylesheets Sass）绝对生手入门教程 _Web前端

SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程

日期：2013-2-18??来源：GBin1.com

SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass，最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式，帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS，你可以先看看这篇文章为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最简单的例子，你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个16进制的颜色？或者是打开一个计算器来计算多列设计中的列宽？ SASS介绍了一个新的概念例如，variables，mixins，镶套或者是选择器继承。从外形上看起来，非常像CSS，但是并没有分割号或者大括号。

看看下面这个简单的CSS：

#skyscraper_ad
{
  display: block;
  width: 120px;
  height: 600px; 
}

#leaderboard_ad 
{
  display: block;
  width: 728px;
  height: 90px; 
}

如果你需要使用SASS，则如下代码：

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

#leaderboard_ad 
  display: block
  width: 728px
  height: 90px

SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子，下面我们将介绍为什么SASS如此的棒！

如果你需要更多了解SASS，可以查看这篇内容为什么需要将SASS和Compass融入CSS代码开发流程。

在SASS中使用美元符号定义一个变量，在这个例子里，一个美元自负，变量名字加上一个冒号定义一个变量。

........

来源：SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程