环境说明：本文仅针对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); }
