码库记事本

码库记事本

sass简介_动力节点Java学院整理

小诸哥 0

Sass 是什么?

sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。

Sass可以简化你的css工作流,并可以使你的Css的扩展和维护工作变的更加容易!

例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。

Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承。

Sass看起来似乎和css很像,但它没有分号和大括号。

以下是css的表示:

  1. #skyscraper_ad
  2. {
  3.      display: block;
  4.      width: 120px;
  5.      height: 600px;
  6. }
  7.  
  8. #leaderboard_ad
  9. {
  10.      display: block;
  11. width: 728px;
  12.      height: 90px;
  13. }
  14.  

在sass中将会这样写:

  1. #skyscraper_ad
  2.      display: block
  3.      width: 120px
  4.      height: 600px
  5.  
  6. #leaderboard_ad
  7.      display: block
  8.      width: 728px
  9.      height: 90px
  10.  

Sass用两个空格缩进来定义代码的嵌套。

通过以上的展示,你已经了解了Sass怎么书写,接下来看一下一些让sass变的如此神奇的一些东西。

变量

  1. $red: #FF4848

在Sass中,可以使用像darken和lighten函数来修改变量值。

在下面的例子中,p标签中的red将会比h1中的red更深。

  1. $red: #FF4848
  2. $fontsize: 12px
  3. h1
  4.      color: $red
  5.  
  6. p
  7.      color: darken($red, 10%)
  8.  

你能够运用‘加’或‘减’操作符来对相同类型的变量进行运算,如果我们想要手动的轻微的加深一个颜色值,可以通过'-'来减去#101,同样我们可以通过‘+’来将字体值增大10px。

  1. p.addition_and_subtraction
  2.      color: $red - #101
  3.      font-size: $fontsize + 10px

嵌套

嵌套可以分为两种类型:

选择器嵌套

选择器嵌套是第一种类型嵌套。
sass中的嵌套和html中的嵌套是相似的。

  1. $fontsize: 12px
  2.  
  3. .speaker
  4.      .name
  5.      font:
  6.          weight: bold
  7.          size: $fontsize + 10px
  8.      .position
  9.      font:
  10.          size: $fontsize
  11.  

如果你看一下编译后生成的css,你将会看见嵌套的.speaker类下的.name类生成的css选择器:.speaker .name。

  1. .speaker .name {
  2.      font-weight: bold;
  3.      font-size: 22px; }
  4. .speaker .position {
  5.      font-size: 12px; }

属性嵌套

“属性嵌套”是第二种类型的嵌套。
你可以嵌套带有相同前缀的属性。

  1. $fontsize: 12px
  2.  
  3. .speaker
  4.      .name
  5.      font:
  6.          weight: bold
  7.          size: $fontsize + 10px
  8.      .position
  9.      font:
  10.          size: $fontsize
  11.  

从以上的例子中可以看出,我们让font:另起一行,并且给了两个空格的缩进,然后,就可以设置原来带连字符的属性了。
所以当我们以上面的格式书写font的属性weight时,这种格式会自动生成css属性font-weight:

  1. .speaker .name {
  2.      font-weight: bold;
  3.      font-size: 22px; }
  4. .speaker .position {
  5.      font-size: 12px; }

所有带连字符的选择器都支持以上格式。

像这种类型的嵌套对于你组织和结构化你的css是一种神奇的方法,同时,它还可以减少没有必要的代码重复。

混合

混合是另一种让人着迷的Sass特性。

混合能够使你重用一整段Sass代码,你甚至能够给他们传递参数,同时,你还能够确定默认的值,这也是十分酷的!

定义一个混合,[email protected][email protected]数,在名字后面,添加一对括号,并在括号中定义你的参数变量。如果你需要默认值,可以再参数后面添加冒号和你想要的默认值。

使用混合是容易的,[email protected],后面跟着混合名和用括号包含的参数值。

下面是例子:

  1. @mixin border-radius($amount: 5px)
  2.      -moz-border-radius: $amount
  3.      -webkit-border-radius: $amount
  4.      border-radius: $amount
  5.  
  6. h1
  7.      @include border-radius(2px)
  8.  
  9. .speaker
  10.      @include border-radius
  11.  

上面的Sass将会编译生成如下的css:

  1. h1 {
  2.      -moz-border-radius: 2px;
  3.      -webkit-border-radius: 2px;
  4.      border-radius: 2x; }
  5.  
  6. .speaker {
  7.      -moz-border-radius: 5px;
  8.      -webkit-border-radius: 5px;
  9.      border-radius: 5px; }
  10.  

在以上例子中,我们给h1中的radius中设定了值,而.speakr中,因为没有设定值,所以radius中的值为默认值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

选择器继承

选择器继承能够让你实现选择器可以继承其他选择器中的所有样式,这也是让人欲罢不能的!
为了能够实现它,[email protected],后面跟着你想要继承的选择器,这样,想要继承的选择器中的样式都会在被继承选择器中实现。

  1. h1
  2.      border: 4px solid #ff9aa9
  3.  
  4. .speaker
  5.      @extend h1
  6.      border-width: 2px
  7.  

上面的将会编译为如下的css

  1. h1, .speaker {
  2.      border: 4px solid #ff9aa9; }
  3.  
  4. .speaker {
  5.      border-width: 2px; }
  6.  

尝试一下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意味着递归,.意味着当前的目录。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: sass