学习笔记《Sass》

最近一直被各种安利 Sass 的使用，正好 Laravel5.3 也已经高度集成，所以刚好学习，Wikipedia 上对于 Sass 的定义：

Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files.

Hampton Catlin 也是 Haml 语法的设计者，Natalie Weizenbaum 则是一位 Google 的工程师，正在为 Google 改进 Dart 语言

Sass 是一套 CSS 的编写规则，然后经过工具的编译可以成为浏览器可以识别的 CSS 文件，Sass 发源于 Ruby 社区，最开始是基于 Ruby 做的实现，现在已经转向了 C/C++ 实现的 LibSass，Laravel 默认是选择用 nodejs 的 node-sass（ gulp 基于 node-sass，node-sass 基于 LibSass）：
https://github.com/gulpjs/gulp
https://github.com/sass/node-sass
https://github.com/sass/libsass

目前 Sass 最新版本是 3.4.22，从维护频率上来看已经相当稳定了，3.5 版本和 4 版本也都在紧锣密鼓中

导入：

@import "reset.css";

变量：

$fontSize: 12px;
body{
    font-size:$fontSize;
}

嵌套：

#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

嵌套可以把以前一长串的 CSS 名字，使用更直观的层次感表现出来

混合：

@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;
}

函数：

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

运算：

$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

条件判断及循环：

$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;
  }
}