CSS的华丽转身：SASS/SCSS浅述及入门

环境说明：本文仅针对SASS在Weex开发环境的使用

由来

总所周知，CSS不是一种编程语言，它可以开发网页的样式，但是由于没有变量、条件语句等程序员眼中的“编程元素”，所以写CSS是一件非常“不爽”的事情。
举个栗子：

.one {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  color: #1e1e1e;
}
.two {
  padding-top: 20px;
  color: #1e1e1e;
}

看到此情此景，身为程序员的你，是不是很想把color: #1e1e1e;这行代码抽出来？比如说定义一个redColor变量的值为#1e1e1e

目前业界已经有"好事者"为CSS加入一个名为"CSS预处理器"（css preprocessor）的东西，目的是为了添加编程元素。

"CSS预处理器"的基本思想：用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件

SASS正是这个思想驱动下的产物，也是目前较为流行，优点较多的编程语言。而SCSS称为SASS的升级版，主要的区别在于编写的文件后缀和格式有所不同：

• SCSS支持的是.scss的文件后缀，而SASS为.sass
• 具体语法上，SASS对代码的排版有着非常严格的要求，而且没有大括号，没有分号，还有行首空格问题，比如第一个元素的属性空2个空格就不能通过编译，阅读性，灵活性都不高，SCSS则针对SASS这几点缺点进行了优化和扩展

在Weex工程中，可以比较合适地支持SCSS，只需要规避CSS在Weex中的使用规则即可。

安装配置步骤及使用方法

• 在标准的weex工程里面，需要先安装几个依赖：

  npm install node-sass;
  npm install sass-loader; //依赖node-sass
  

• 配置loader，打开webpack.config.js，修改loader，此处loader用于解析.scss文件：

  loaders: [
          {
            test: /\.scss$/,
            loader: "css!sass", //这样写样式和脚本会混在一个文件，也就是不分离样式，webpack有插件可以实现分离样式
            exclude: /node_modules/
          }
        ]
  

• 用 import 或 require 引入的sass文件进行加载，以及声明的内部样式进行加载，两种方式可以同时使用

  <style lang="sass">
    //方式一：import
    @import "./foo.scss";
    //方式二：直接写sass语法样式
  </style>
  

• 踩过的坑：目前无法在<script>里面通过require的方式来加载scss文件，不建议如下用法：

  <script>
    require("./foo.scss")
  </script>
  

基本语法

• 变量

  • 书写格式：$开头

  $red : #1875e7;　
  
  .component {
    color : $red;
  }
  

• 选择器嵌套

  div h1 {
    color : red;
  }
  div {
    hi {
      color:red;
    }
  }
  

• 属性嵌套

  .one {
    border: {   //border后面必须加上冒号
      color: red;
    }
  }
  // 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
  .two {
    &:hover { color: #dcdcdc; }
  }
  

• 计算功能

  .tabbar {
    margin: (88px/4);
    top: 50px - 100px;
    height: $var * 17%;
  }
  

• 注释

  • 标准的CSS注释：/* comment */ 注意一下，这种注释会保留到编译后的CSS文件
  • 单行注释：// comment 只保留在SASS源文件中，编译后被省略，即编译后的CSS不再保留这些注释
  • 重要注释：/*! 内容 */ 即使是压缩模式编译，也会保留这行注释（标准的CSS注释压缩之后会被省略），通常用于声明版权信息

• 颜色函数

  // SASS提供了一些内置的颜色函数，以便生成系列颜色
  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c
  

• 插入文件

  // @import命令，用来插入外部文件
  @import "path/filename.scss";
  // 如果插入的是.css文件，则等同于css的import命令
  @import "foo.css";
  

• 代码的重用

  • 继承

    .class1 {   // 定义一个class1
      border: 2px solid #1e1e1e;
    }
    .class2 {  // 使用@extend命令，让class2继承class1
      @extend .class1;
      font-size:80%;
    }
    

  • Mixin
    • Mixin可以理解成是C语言的宏（macro），可以用来书写重用的代码块

    // 使用@mixin命令，定义一个代码块，类似于给样式添加一个标签，标记这个样式可以复用
    @mixin right {
      float: right;
      margin-right: 20px;
    }
    // 使用@include命令，调用这个mixin。
    .one {
      @include right;
    }
    // mixin还可以指定参数和缺省值
    @mixin right($value: 20px) {  // $value为right的参数，缺省值为20px
      float: right;
      margin-left: $value;
    }
    // 调用时根据需要加入实参
    .two {
      @include left(40px);
    }
    // 有了mixin，我们可以抽象出不同属性中的相同内容，通过参数形式传递，比如以下场景：生成浏览器前缀
    @mixin rounded($vert, $horz, $radius: 20px) {
      border-#{$vert}-#{$horz}-radius: $radius;
      -moz-border-radius-#{$vert}#{$horz}: $radius;
      -webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }
    // 以上代码调用方式
    .one { @include rounded(top, left); }
    .two { @include rounded(top, left, 5px); }
    

• 高级用法

  • 条件语句

  // 可以使用@if用来判断
  .one {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }
  // 还可以配套上@else
  @if lightness($color) > 50% {
    background-color: #dcdcdc;
  } 
  @else {
    background-color: #ffffff;
  }
  

  • 循环语句

  // 支持for循环
  @for $i from 1 to 10 {
    .border-#{$i} {
    border: #{$i}px solid red;
    }
  }
  // 支持while循环
  $i: 6;
  @while $i > 0 {
    .item-#{$i} { width: 4em * $i; }
    $i: $i - 3;
  }
  // each命令，作用与for类似
  @each $item in a, b, c, d {
    .#{$item} {
    background-image: url("/image/#{$item}.jpg");
    }
  }
  

  • 自定义函数

  @function treble($n) {
    @return $n * 3;
  }
  #sidebar {
    width: treble(5px);
  }