搜索
六年老品牌值得信赖！！！我们的使命：加速中国职业化进程！我们的价值观：感恩、专业、尽责、合作、超越什么是SASS?SASS英文意思是SyntacticallyAwesomeStylesheetsSass，最早由HamptonCatlin开发和设计。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_addisplay：blockwidth：120pxheight：600px#leaderboard_addisplay：blockwidth：728pxheight：90pxSASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子，下面我们将介绍为什么SASS如此的棒！如果你需要更多了解SASS，可以查看这篇内容为什么需要将SASS和Compass融入CSS代码开发流程。变量在SASS中使用美元符号定义一个变量，在这个例子里，一个美元自负，变量名字加上一个冒号定义一个变量。$red：#FF4848当然，在SASS中有一些内建的功能，例如，darken，lighten来帮助你修改变量。下面例子里，我们使用lighten方法来生成段落中更亮的红色：$red：#FF4848$fontsize：12pxh1color：$redpcolor：lighten（$red，10%）在SASS中你还可以使用加减的方式来修改变量的值，如下：六年老品牌值得信赖！！！我们的使命：加速中国职业化进程！我们的价值观：感恩、专业、尽责、合作、超越p.addition_and_subtractioncolor：$red-#101font-size：$fontsize+10px镶套两种类型的镶套：选择器镶套这是第一个镶套类型。镶套类似我们在html中使用的方式。$fontsize：12px.speaker.namefont：weight：boldsize：$fontsize+10px.positionfont：size：$fontsize如果你看看生成的CSS代码，你可以看到如果镶套的.nameclass位于.speakerclass中，生成的CSS选择器.speaker.name.speaker.name{font-weight：bold;font-size：22px;}.speaker.position{font-size：12px;}属性镶套这是第二个镶套的类型：你可以使用同名前缀来镶套属性$fontsize：12px六年老品牌值得信赖！！！我们的使命：加速中国职业化进程！我们的价值观：感恩、专业、尽责、合作、超越.speaker.namefont：weight：boldsize：$fontsize+10px.positionfont：size：$fontsize在上面的例子中，我们可以看到font属性后添加了一个双空格缩进，接下来是weight和size，这将会生成font-weight和font-size属性，如下：.speaker.name{font-weight：bold;font-size：22px;}.speaker.position{font-size：12px;}所有的CSS连接符的属性都支持。使用这种属性的镶套方式，可以帮助你有效的组织CSS的结构。MixinsMixins是另外一个SASS的超棒属性，允许你高效的重用你的一些SASS的代码片段，甚至可以传递参数并且指定缺省的值。定义mixins只需要使用@mixin关键字，然后是你需要使用的代码部分。如果你需要使用任何的参数，包含一对括号和参数即可。如果你希望使用缺省值，添加一个冒号即可。包含一个mixin也非常简答，使用@include关键字，后面跟随着Mixin名称和任何括号中定义的参数即可。如下：@mixinborder-radius（$amount：5px）-moz-border-radius：$amount六年老品牌值得信赖！！！我们的使命：加速中国职业化进程！我们的价值观：感恩、专业、尽责、合作、超越-webkit-border-radius：$amountborder-radius：$amounth1@includeborder-radius（2px）.speaker@includeborder-radius上面的SASS将会被编译成如下CSS：h1{-moz-border-radius：2px;-webkit-border-radius：2px;border-radius：2x;}.speaker{-moz-border-radius：5px;-webkit-border-radius：5px;border-radius：5px;}我们指定了h1中的radius，但是对于.speaker我们没有指定任何内容。所以会使用缺省的5px。选择器继承选择器继承允许你告诉任何选择器从另外一个选择器继承所有的样式，非常棒的一个特性。使用它需要指定关键字@extend，后面跟随一个你喜欢继承的选择器，然后所有的选择器的样式将会被继承。h1border：4pxsolid#ff9aa9.speaker@extendh1border-width：2px以上代码将会被编译成如下CSS：h1，.speaker{border：4pxsolid#ff9aa9;}.speaker{border-width：2px;}调试SASS六年老品牌值得信赖！！！我们的使命：加速中国职业化进程！我们的价值观：感恩、专业、尽责、合作、超越在线调试：你可以不安装而使用SASS的在线调试来尝试SASS的超棒特性。安装使用：如果你有Rubygems你只需要简单运行geminstallsass即可。你可以输入如下命令：sass--watchsass_folder:stylesheets_folder其中sass_folder是你的sass文件的目录，stylesheets_folder是生成的css的目录。--watch选项意思是将会关注这个目录，如果我们修改了任何文件，保存后将会被自动的转化。将CSS转化成SASS你可以在已经存在的项目中使用sass-convert。输入你需要转换的目录并且输入：sass-convert--fromcss--tosass-R.其中-R意思是递归，.意思是当前目录关于SCSS(SASSYCSS)这里我们只介绍了SASS语法。然而，这里有一个叫做SCSS(SassyCSS)的更新的格式。区别在于SassyCSS看起来更像我们在CSS中使用的样子，但是也有类似variable，mixins，镶套和选择器继承的特性。总结SASS是一个超棒的保持CSS结构话的好工具，这里甚至有一些项目例如Compass使用mixins来包含CSS框架而不是将无任何语义的CSS插入你的HTML中。但是不论如何，相信你会喜欢这个超棒的CSS工具的，还想什么，在下一个项目中尝试一下它吧！