2018web开发学习路线之sass

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

sass安装（mac）

先安装ruby（安装略）,  ruby -v 查看ruby是否安装成功

安装sass:gem install sass,sass -v 查看sass是否安装成功

sass安装（window）https://www.imooc.com/code/6389

单文件编译：sass --watch body.scss:body.css

多文件编译：

sass sass/:css/复制代码

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

不同样式风格的输出方法

1. 嵌套输出方式 nested 
2. 展开输出方式 expanded
3. 紧凑输出方式 compact
4. 压缩输出方式 compressed

sass --watch test.scss:test.css --style nested\expanded\compact\compressed复制代码

变量声明：$width:200px;

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}复制代码

编译后的css代码：

body{
    line-height:2;
}复制代码

//SCSS 全局变量 局部变量

$color: orange !default;//定义全局变量
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量（全局变量 $color 的影子）
  a {
    color: $color;//调用局部变量
  }
}复制代码

&：选择器嵌套（&：当前的层级）

nav {

 a {

   color: red;

   header & {

    color:green;

   }

 }

}

编译后 

nav a { color: red; }

header nav a { color: green; }

嵌套-属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}复制代码

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}复制代码

嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}复制代码

编译出来的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}复制代码

@mixin border-radius{

-webkit-border-radius: 3px;

border-radius: 3px;

}

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}复制代码

button {

@include border-radius;//调用混合宏

}

复杂的混合宏：

上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}复制代码

//SCSS 继承
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
编译出来之后：//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}
复制代码

//SCSS %占位
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}复制代码

属性中使用变量 插值#{}

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

属性值可使用+-*/

Sass进阶篇

//SCSS @if @else
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}复制代码

@for $i from <start> through <end>
@for $i from <start> to <end>复制代码

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

如下代码，先来个使用 through 关键字的例子：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}复制代码

编译出来的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}复制代码

再来个 to 关键字的例子：

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}复制代码

编译出来的 CSS:

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}复制代码

//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}复制代码

这有一个 @each 指令的简单示例：

$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}复制代码

编译出 CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }复制代码

• 字符串函数
• 数字函数
• 列表函数
• 颜色函数
• Introspection 函数
• 三元函数等

列表函数主要包括一些对列表参数的函数使用，主要包括以下几种：

• length($list)：返回一个列表的长度值；
• nth($list, $n)：返回一个列表中指定的某个标签值
• join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
• append($list1, $val, [$separator])：将某个值放在列表的最后；
• zip($lists…)：将几个列表结合成一个多维的列表；
• index($list, $value)：返回一个值在列表中的位置值。

@import @media @extend

@at-root 从字面上解释就是跳出根元素。

@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug

@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass。

@error 和 @warn、@debug 功能是如出一辙