SASS绝对新手入门教程.docVIP

什么是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中使用美元符号定义一个变量，在这个例子里，一个美元自负，变量名字加上一个冒号定义一个变量。 $red： #FF4848 当然，在SASS中有一些内建的功能，例如，darken，lighten来帮助你修改变量。下面例子里，我们使用lighten方法来生成段落中更亮的红色： $red： #FF4848 $fontsize： 12px h1 color： $red p color： lighten（$red， 10%） 在SASS中你还可以使用加减的方式来修改变量的值，如下： p.addition_and_subtraction color： $red - #101 font-size： $fontsize + 10px 镶套 两种类型的镶套： 选择器镶套 这是第一个镶套类型。镶套类似我们在html中使用的方式。 $fontsize： 12px .speaker .name font： weight： bold size： $fontsize + 10px .position font： size： $fontsize 如果你看看生成的CSS代码，你可以看到如果镶套的.name class位于.speaker class中，生成的CSS选择器.speaker .name .speaker .name { font-weight： bold; font-size： 22px; } .speaker .position { font-size： 12px; } 属性镶套 这是第二个镶套的类型： 你可以使用同名前缀来镶套属性 $fontsize： 12px .speaker .name font： weight： bold size： $fontsize + 10px .position font： size： $fontsize 在上面的例子中，我们可以看到font属性后添加了一个双空格缩进，接下来是weight 和 size，这将会生成font-weight和font-size属性，如下： .speaker .name { font-weight： bold; font-size： 22px; } .speaker .position { font-size： 12px; } 所有的CSS连接符的属性都支持。使用这种属性的镶套方式，可以帮助你有效的组织CSS的结构。 Mixins Mixins是另外一个SASS的超棒属性，允许你高效的重用你的一些SASS的代码片段，甚至可以传递参数并且指定缺省的值。 定义mixins只需要使用@mixin关键字，然后是你需要使用的代码部分。如果你需要使用任何的参数，包含一对括号和参数即可。如果你希望使用缺省值，添加一个冒号即可。 包含一个mixin也非常简答，使用@include关键字，后面跟随着Mixin名称和任何括号中定义的参数即可。如下： @mixin border-radius（$amount： 5px） -moz-border-r