SASS初学者入门（转）

傷城~ 2021-12-22 08:41 517阅读 0赞

http://rd.189works.com/article-108018-1.html

**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: 90px

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

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

**变量**

$red: #FF4848

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

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

$red: #FF4848 
    $fontsize: 12px 
    h1 
      color: $red 
     
    p  
      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

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/03/20/2970407.html