SASS

 

sass入门/sass教程：http://www.w3cplus.com/sassguide/

阮一峰 sass用法指南：http://www.ruanyifeng.com/blog/2012/06/sass.html

sass中文文档：http://sass.bootcss.com/docs/sass-reference/

============================================================================

关于sass语法 参考：http://www.w3cplus.com/sassguide/syntax.html

简述sass语法：

1、sass中可以定义变量，方便统一修改和维护。

//sass style //-----------------------------------
$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
　　font-family: $fontStack;
　　color: $primaryColor;
}
//css style
//-----------------------------------
body {
　　font-family: Helvetica, sans-serif;
　　color: #333;
}

2、sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

//sass style
//-----------------------------------
nav {
　　ul {
　　　　margin: 0;
　　　　padding: 0;
　　　　list-style: none;
　　}

li { display: inline-block; }

a {
　　display: block;
　　padding: 6px 12px;
　　text-decoration: none;
　　}
}

//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3、sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

//sass style
//-----------------------------------
// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}


//sass style
//-----------------------------------
// base.scss 
@import 'reset';
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}


//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

4、sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

5、扩展/继承 sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

6、sass可进行简单的加减乘除运算等

//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

7、颜色sass中集成了大量的颜色函数，让变换颜色更加简单。

//sass style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

 ===================================================================================

示例scss文件编写语法：

注： 注释只能用英文、参考文档里边有的函数还不能实现（安装的sass版本原因）!

$base_color:magenta;
$base_font:50px;
$bg:#ccc;
$color:#fff;
$fontSize: 12px;
*{
    padding: 0;
    margin: 0;
}
body{
    font-size:$fontSize;
}
#mian{
    font-weight:900;
    font-size:28px;
    width:100px;
    height:500px;
}
section{
    width: 100%;
    border: 1px solid #ccc;
    .box1{
        background: $base_color;
        h2{
            color: $color;
        }
        p{
            span{
                font-size: $base_font;
            }
        }
    }
    .box2{
        background: aqua;
        img{
            width: 400px;
            height: 500px;
            border: 1px solid #CCCCCC;
            display: block;
        }
    }
}

@mixin box-sizing($s){
    -webkit-box-sizing: $s;
    -moz-box-sizing: $s;
    box-sizing: $s;
}
.box3{
    border: 1px solid #000000;
    background: skyblue;
    width: 500px;
    height: 500px;
    color: $color;
    @include box-sizing(border-box);
}
.spack{
    @extend .box3;
}

//insert
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
       4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//--------
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
//-------
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//==============================
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//---------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}