今天小编跟大家讲解下有关sass简介_动力节点Java学院整理 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关sass简介_动力节点Java学院整理 的相关资料，希望小伙伴们看了有所帮助。
Sass 是什么？
Sass 是Syntactically Awesome Stylesheete Sass的缩写，是由Hampton Catlin开发的。
Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！
例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。
Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承。
Sass看起来似乎和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: 90pxSass用两个空格缩进来定义代码的嵌套。
通过以上的展示，你已经了解了Sass怎么书写，接下来看一下一些让sass变的如此神奇的一些东西。
变量
$red: #FF4848在Sass中，可以使用像darken和lighten函数来修改变量值。
在下面的例子中，p标签中的red将会比h1中的red更深。
$red: #FF4848$fontsize: 12pxh1 color: $redp color: darken($red, 10%)你能够运用‘加’或‘减’操作符来对相同类型的变量进行运算，如果我们想要手动的轻微的加深一个颜色值，可以通过'-'来减去#101，同样我们可以通过‘+’来将字体值增大10px。
p.addition_and_subtraction color: $red - #101 font-size: $fontsize + 10px嵌套
嵌套可以分为两种类型：
选择器嵌套
选择器嵌套是第一种类型嵌套。sass中的嵌套和html中的嵌套是相似的。
$fontsize: 12px.speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize如果你看一下编译后生成的css，你将会看见嵌套的.speaker类下的.name类生成的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:另起一行，并且给了两个空格的缩进，然后，就可以设置原来带连字符的属性了。所以当我们以上面的格式书写font的属性weight时，这种格式会自动生成css属性font-weight:
.speaker .name { font-weight: bold; font-size: 22px; }.speaker .position { font-size: 12px; }所有带连字符的选择器都支持以上格式。
像这种类型的嵌套对于你组织和结构化你的css是一种神奇的方法，同时，它还可以减少没有必要的代码重复。
混合
混合是另一种让人着迷的Sass特性。
混合能够使你重用一整段Sass代码，你甚至能够给他们传递参数，同时，你还能够确定默认的值，这也是十分酷的！
定义一个混合，[email protected]，[email protected]�数，在名字后面，添加一对括号，并在括号中定义你的参数变量。如果你需要默认值，可以再参数后面添加冒号和你想要的默认值。
使用混合是容易的，[email protected]，后面跟着混合名和用括号包含的参数值。
下面是例子：
@mixin border-radius($amount: 5px) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amounth1 @include border-radius(2px).speaker @include border-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中设定了值，而.speakr中，因为没有设定值，所以radius中的值为默认值。We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.
选择器继承
选择器继承能够让你实现选择器可以继承其他选择器中的所有样式，这也是让人欲罢不能的！为了能够实现它，[email protected]，后面跟着你想要继承的选择器，这样，想要继承的选择器中的样式都会在被继承选择器中实现。
h1 border: 4px solid #ff9aa9.speaker @extend h1 border-width: 2px上面的将会编译为如下的css
h1, .speaker { border: 4px solid #ff9aa9; }.speaker { border-width: 2px; }尝试一下sass
通过在线的方式尝试一下
你能体验Sass通过try Sass online，不需要将Sass安装在你本地电脑。在编译以前，你需要选择底部的缩进语法。
安装使用
Sass是一个Ruby gem，假如以前你的机子中装有Ruby gem，很容易在机子中安装Sass。Sass 能被用作为一个命令行工具，将你的Sass文件编译成css文件。你能做这个通过定义Sass类型——监控sass_文件夹：样式列表_文件夹中包含着sass文件夹和样式列表文件夹，sass文件夹中包含的sass文件后缀名必须为.sass，样式列表文件夹中包含的是你的输出文件夹。监控选项的选择意味着如果你对文件作任何改变，一旦你保存他们，文件将会自动转变。
将css转变为Sass
你开始在现有的项目中使用Sass通过使用sass转化。进入你的电脑，打开你想要转化的文件夹，选择-convert-from-css-to sass.-R意味着递归，.意味着当前的目录。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。
来源：爱蒂网
