Sass基础

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

0. 介绍

• CSS扩展语言
• 完全兼容CSS
• 简单 稳定 可维护
• 两种语法（sass & scss）

    //文件后缀名为sass的语法
    body
      background: #fff
      font-size: 12px
    div
      background: #000
    
    
    //文件后缀名为scss的语法  
    body {
     background: #fff;
     font-size: 12px;
    }
    div {
     background: #000;
    } 

1. 变量(Variables)

Sass中允许使用变量， 所有变量以 $ 开头。

    $width: 5rem;
        
    #main {
      width: $width;
    }

可以使用 #{ } 插入变量。

    $name: ".main";
    
    div #{name} {
      color: #ffffff;
    }   

支持7种数据类型

• Number: 1.2, 13, 10px
• String: “foo”, ‘bar’, baz
• Color: blue, #04a3f9, rgba(255, 0, 0, 0.5))
• Boolean: true, false
• Null: null
• Lists:
  $font-list: 'Raleway','Dosis','Lato';
• Maps:
  $style: (
  'color': tomato,
  'background': black
  );

2. 嵌套规则(Nested rules)

Sass允许选择器之间嵌套。符号 & 用来引用父元素。

    #main {
      width: 5rem;
      height: 5rem;
        
      div {
        font-size: 1rem;
      }
        
      div p {
        font-size: 1rem;
      }
        
      div, p {
        font-size: 1rem;
      }
        
      &.active {
        width: 10rem;
        height: 10rem;
      }
        
      .active &{
        width: 10rem;
        height: 10rem;
      }
    }

编译后结果：

    #main {
      width: 5rem;
      height: 5rem;
    }
    
    #main div {
      font-size: 1rem;
    }
    
    #main div p {
      font-size: 1rem;
    }
    
    #main div, #main p {
      font-size: 1rem;
    }
    
    #main.active {
      width: 10rem;
      height: 10rem;
    }
    
    .active #main {
      width: 10rem;
      height: 10rem;
    }

Sass还支持属性嵌套

    nav {
      border: 1px solid #ccc;
      border-left: 0px;
      border-right: 0px;
    }

编译后结果：

    nav {
      border: 1px solid #ccc {
        left: 0px;
        right: 0px;
      }
    }

3. @import

Sass允许import外部文件，使用 @import 命令。

导入文件的后缀若为 .sass 或 .scss, import时可以不加文件后缀。

    @import "index.scss";
    @import "index";

可以在一个 @import 后可以导入多个文件

    @import "index1.scss", "index2.scss";

4. @extend

Sass允许选择器之间相互继承，使用 @extend 命令。

    #first {
        font-size: 12px;
    }
    
    #second {
        @extend #first;
        color: #ffffff;
    }       

编译后结果：

    #first, #second {
      font-size: 12px;
    }

    #second {
      color: #ffffff;
    }

5. @mixin

Sass可以实现样式复用，使用 @mixin 和 @include

    @mixin red-text {
      color: #ff0000;
    }
    
    .page-title1 {
      @include red-text;
      padding: 4px;
      margin-top: 10px;
    }
    
    .page-title2 {
      @include red-text;
      padding: 4px;
      font-size: 20px;
    }

@mixin 支持参数传递

    @mixin button($width, $radius: 5px) {
      width: $width;
      border-radius: $radius;
    }
    
    . button1 { 
      @include button(5px, 10px)
    }

    . button2 { 
      @include button(5px)
    }

编译后结果：

    .button1 {
      width: 5px;
      border-radius: 10px;
    }

    .button2 {
      width: 5px;
      border-radius: 5px;
    }

@mixin支持传递内容，使用 @content

    @mixin mediaMax($w) {
      @media screen and (max-width: $w) {
        @content;
      }
    }
    
    .hidden-ipad {
      @include mediaMax(1024px) {
        display: none;
      }
    }

6. 函数

Sass提供了一系列的函数功能，主要有：

• 颜色函数

  • lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮
    
  • darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗
    
  • alpha($color) /opacity($color)：获取颜色透明度值
    
  • rgba($color, $alpha)：改变颜色的透明度值

• 字符串函数

  • unquote($string)：删除字符串中的引号
    
  • quote($string)：给字符串添加引号

• 数字函数

  • percentage($value)：将数字转换成百分比
    
  • round($value)：四舍五入
    
  • ceil($value)：向上取整
    
  • floor($value)：向下取整
    
  • abs($value)：返回绝对值
    
  • min($numbers…)：找出最小值
    
  • max($numbers…)：找出最大值

• 列表函数
  • length($list)：返回列表长度
  • join($list1, $list2, [$separator])：将两个列表给连成一个列表
    
  • append($list1, $val, [$separator])：将某个值放在列表的最后
    
  • zip($lists…)：将多个列表合成一个多维列表
    
  • index($list, $value)：返回某一个值在列表中的位置

......

• 自定义函数

    @function calculateNumber($number){
        @return $number + 1;
    }   

7. 资料

1. 阮一峰：<a href="http://www.ruanyifeng.com/blog/2012/06/sass.html">http://www.ruanyifeng.com/blog/2012/06/sass.html</a>
2. Sass中文：<a href="http://www.sasschina.com/guide/">http://www.sasschina.com/guide/</a>
3. SassMeister: Sass转换器 <a href="http://www.sassmeister.com/">http://www.sassmeister.com/</a>