今天完成的事：

1、早上写了一下任务13，以前的东西写的很不规范，弄得我浑身难受。

2、今天下午的小课堂。讲完了就写博客什么的，感觉每次小课堂后续工作量比较大。

明天的计划：

1、用SASS重构任务7的页面，整改一下，

别的都不弄了，专心先写任务吧。

遇到的困难：

1、讲小课堂的时候，思路第一次好多了，但是还是不是很好。慢慢适应吧，感觉挺锻炼人的。这次没翻车！

收获：

1、再次体验了小课堂，第一次准备的太仓促了，讲的很不好，还翻了车。这次好了一些。其实就是心态问题，就是讲给自己听就好了，相当于一次学习机会，别怕丢脸呐...虽然还是觉得有点羞耻...

2、对SASS的组件化开发有了更深的认识。晚上按要求写了一篇博客。

如何使用SASS？

分享人：陈皓宇

1.背景介绍

我们学web的都知道CSS。CSS是一门描述性的语言，它有一些自身的局限性，只能一行一行单纯地描述， 并不能像其他的编程语言那样使用变量、循环、运算等方式来操作；这非常不利于代码的复用性、模块化等。 CSS预处理器的出现，使得我们可以像操作JavaScript那样以“编程”的方式来书写CSS。 在CSS预处理器中，我们可以使用变量、循环、函数等方式来简化操作，提高开发效率 CSS预处理器，说白了就是用编程方式来写CSS的一类语言，来解决CSS的局限性，就这么简单。

国内常用的有less和sass，这次，我们选择来讲sass。

那么问题来了~为何选择SASS？

仁者见仁智者见智。下面讲的是我个人选择Sass的原因：
1、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护；
2、Sass对于我来说参考的教程多；
3、Sass有一些成熟稳定的框架。特别是Compass、Foundation之类；
4、还有一个原因是国外讨论Sass的同行要多于LESS，出于这几个原因， 我想我学习或者使用Sass更容易一些， 碰到问题更有参考资料， 更有朋友帮忙解决；
5、bootstrap的4.0+版本用了。 
当然，有的同学喜欢less，这也是不错的。这是自身看法，比较主观，仅供参考。参考来自知乎。

2.知识剖析

一、sass的使用

    sass是基于Ruby实现语言开发，因此安装sass前需要安装Ruby。

（注:mac下自带Ruby无需在安装Ruby!） 先从官网下载Ruby并安装。然后再安装sass即可，教程网上大同小异这里就不阐述了。 安装好sass，之后我们就可以直接写sass，写好之后把Sass编译成sass。 编译方法很多，比如命令行编译，软件koala编译， 我们常用的编辑器也可以webstorm、sublime、VScode等IDE也可以进行实时编译。

可以参考sass中文网站地址：https://www.sass.hk/install/；

那么问题又来了，sass到底该怎么写呢？或者说它到底是个啥？

二、基本知识

     我们从下面四个方面来告诉你SASS的主要基础语法。

1、Sass 变量

    一图胜百语。我们来看看，最简单的变量：

    再看看下面的例子：

 $fontSize: 12px;

//这里声明了一个名称为fontSize的变量；

 body{
             font-size:$fontSize;

            } 

//这里利用这个$fontSize变量把12px这个值传递到这里；

然后CSS里面的代码是这样的：
 body{

 font-size:12px; }

是不是非常好理解呢？这不就相当于以前的一元一次方程，开头设一个未知数x,令x=12px，然后往下的函数（就是body）代入进去运算。

        没错，就是这样子的。编程的变量应用思想就这样带入了CSS,很赞！！~

但是这里的要提一下，变量是有作用范围的。

分为局部变量和全局变量

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。举个栗子！~~

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

 }

嗯，如果还不明白，打开你的IDE，敲一遍，看看效果。那么，新问题又来了，一个CSS文件好多值，我们是不是都要写成变量呢？什么时候创建变量？

我的建议是，创建变量只适用于感觉确有必要的情况下。 不要为了某些骇客行为而声明新变量，这丝毫没有作用。 只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

2、Sass 继承

继承。就是class，和.class没什么区别，唯一区别，就是我们在SASS里面要调用它的时候，需要用@exdent+class（name）来调用它。

 .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;

  }

熟悉的朋友一看就知道这是bootstrap的btn默认样式。哈哈，好了，继续下一个。

3、Sass 占位符

Sass 中的占位符 ，%placeholder 是一个很强大， 很实用的一个功能，这也是我个人非常喜欢的功能。 他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。栗子栗子，别急：

%mt5 {
    margin-top: 5px;
 }
%pt5{
  padding-top: 5px;
  }
//声明两个占位符，名字分别为mt5、pt5；

 .btn {
  @extend %mt5;
  @extend %pt5;
   }
//调用它们

 .block {
@extend %mt5;
  span {
            @extend %pt5;
            }

  }

4、Sass 混合宏

我个人的看法：混合宏，其实就是是带入了函数的思想。特么的不就是数学的方程传递未知数吗？

好了，咳咳...不该爆粗口，正题正题，SASS混合宏分两种

(1)不传参数（就是带变量），栗子如下（这不是错别字！）：

@mixin border-radius
                {
                  -webkit-border-radius: 5px;
                   border-radius: 5px;

                }

我们在后面用@include调用它就可以了。

(2)传参数（不带变量的）

@mixin center($width,$height)
                {
                width: $width;
                height: $height;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -($height) / 2;
                margin-left: -($width) / 2;

                }

这是可变的，带变量，或者说传参的混合宏。我们给他调用一下，并传值：

.box-center
                {
                @include center(500px,300px);

                }

然后,去看看编译出来的CSS的，大体上是这样的：

.box-center
                {
                width: 500px;
                height: 300px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -150px;
                margin-left: -250px;

                }

很简单吧。其实，我们往下看...

3.常见问题

      上面的几种方式，有些很像，我们如何在适当的时候用适当的方法？比如什么时候用继承，什么时候用占位符？

4 解决方案

继承和占位符的用法是很像，都是用@exdent调用， 而且都是多来传递定量的属性为主，但是！！！ 占位符它编译出来的 CSS 代码和使用继承基本上是相同， 然而不会在代码中生成占位符 mt 的选择器。 那么占位符和继承的主要区别的，"占位符是独立定义， 不调用的时候是不会在 CSS 中产生任何代码； 继承是首先有一个基类存在，不管调用与不调用， 基类的样式都将会出现在编译出来的 CSS 代码中。"这很重要，在防止我们代码过于冗杂和沉重，请务必理解。不然迟早有一天你会自己坑自己。

而，混合宏是用在一些复杂的多属性的调用，或者是复杂的逻辑， 记住它是唯一能传递参数的！！

5.编码实战（栗子上面有）

6.扩展思考

问题：sass和less的不同？ 

1,变量名称的不同，less是@，sass是$;

2,Sass的安装需要Ruby环境，是在服务端处理的， 而Less是需要引入less.js来处理Less代码输出css到浏览器; 也可以在开发环节

使用Less，然后编译成css文件，直接放到项目中; 

3，sass支持条件语句，比如if else for等，less不支持; 

4,sass可以设置输出类型， nested：嵌套缩进的css代码 expanded：展开的多行css代码 compact：简洁格式的css代码 

compressed：压缩后的css代码，less不可以。

7.参考文献

参考一：http://www.manongjc.com/sass/sass_tutorial.html 
                码农Sass 教程 - Sass入门学习

参考二：https://www.sass.hk/install/ 
                sass中文网

8 更多讨论

1、关于在sass编译，有多少种方式？

刚刚讲了，有三种，命令行、koalo、IDE编译。

其实问这个问题的大佬其实是想问，命令行怎么实现时时编译。其实，我们可以设置监听要编译的sass文件，实时监听，能够做到同时更新的效果。我试了一下，可以的。但是还是觉得有点麻烦，这里具体可以看看这个：https://blog.csdn.net/ABAP_Brave/article/details/54668248。

2、关于嵌套层级的问题？

其实这里讲漏了嵌套的问题，谢谢提醒。SCSS的嵌套写法，一共常用的有这几种：

a、选择器嵌套：

body{  
    background: antiquewhite;  
    header{  
        background: aquamarine;  
    }  

}  

这里我是非常不建议写代码的时候用这种嵌套的写法，除非你的CSS需要出现后代选择器，比如ul里面嵌套的li，你要出现下面这种形式的时候才去考虑这个，

ul li {

.....

}

而且，这样会在一定程度上加大了编译的难度，试想一下，你套了10+个父类，编译器解析成CSS累不累啊，兄die?？？

b、属性嵌套

   footer{  
       background: {  
           color: red;  
           size: 100% 100%;  
       }  

   }

非常好用的一个写法，很赞。

c、伪类选择器嵌套（其实就是“&”代替了父类），栗子如下

li{  

   &:before{  
       color:red;  
   } /*&为上一级选择器*/  
   &:after{  
       background: green;  
   }  

}  

3、SASS就是为了编译一个很长的CSS文件吗？

    当然不是，你会发现，单个SASS文件写的，会比CSS还长- =...SASS 是为了把CSS组件化，模块化这才是它的使命。

    很通俗的例子，比如我现在有三个网页，他们的navgation是一个样子的，按照传统的办法，我们是不是要去复制粘贴？累不累 啊...100个网页的时候呢？有了SASS，我们只要把一个navigation写在一个SASS文件里面，我们在用的时候用@import+文件名.scss去调用它就好了。

    说到这里，是不是有点灵光了呢？其实我们平时，每次都要reset一些CSS样式，可以慢慢试着写一些常用的reset，写成SASS,用的时候，一个@import，岂不是省心省力？我已经慢慢开始做了。好了，今天就到这里吧。

开始时间：2018.05.31

结束时间：2018.06.6（之前错估任务难度，延期，感觉真的很不好做）

有无延期风险： 无。

禅道：http://task.jnshu.com/zentao/my-task.html