今天完成的事情：

今天用scss写了任务十一和任务十二第一个页面，总体感觉是写的比之前的代码样式还多，而且scss还特容易出错，任何一个分号，大扩号出现少了，中文的都会导致编译失败，所以写的比css还闹心

明天计划的事情：任务十二第二个页面
遇到的问题：
已解决

任务6在

代码结构如下：

<div class="btn-group">

                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

                    <span class="caret"></span>

                    所在地

                </button>

对小三角设置

Float：right；效果如下

在设置一个上边距达到居中的状态

在谷歌浏览器上，显示的是垂直居中小三角是处于垂直居中的

但是在火狐浏览器上显示的是：

此时小三角是处于非垂直居中的，而且靠下，看到这种现象很像 所在地 这三个字被一个block的盒子包裹，强制性让小三角换行，但是我给 所在地 三个字加span标签仍然解决不了

仔细查看了下，发现居然是父元素的  white-space: nowrap这么个属性导致的；

解决的办法：

方法一：将文字和小三角换个位置即可

方法二：设置white-space:normal即可；

<div class="btn-group">

                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

                    <span class="caret"></span>

                    所在地

                </button>

最后附上white-space各种取值的表现：

normal     默认。空白会被浏览器忽略。

pre   空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line    合并空白符序列，但是保留换行符。

inherit      规定应该从父元素继承 white-space 属性的值。

收获：

多值变量

这种变量可也真是让人涨姿势，分为list变量和map变量。对应javascript来说，也就是数组和对象。下面一一来简单介绍一下。

list

list中的值，可以用三种形式来区分，空格、逗号还有小括号。其中若灵活混用，则可以做成类似二维数组的变量，如[['white', 'black'] ['red', 'blue']]。那使用什么办法取值呢，sass提供了一个nth($variable, index)的方法。一起来看看吧。

$color: white black red blue;

a{

    color: nth($color, 2);

    &:hover{

        color: nth($color, 4);

    }

}

------编译后------

a {

  color: black;

}

a:hover {

  color: blue;

}

全局变量与局部变量

Global

sass中的变量也是分为全局与局部的，在代码块内声明的变量只会在代码块内生效，除非为其添加了!global。前面关于全局和局部变量，学过一点js的都应该懂，这里就不再赘述。我们直接看看如何在局部变量里声明一个全局的变量。

$color: white;

body{

    $partial-color: black !global; //若没有!global则会报错，无法编译

    $color: red;

}

div{

    color: partial-color;

    color: $color; //编译后仍然是white，说明并未收到上一个代码块的影响

}

default

当然还有一个类似的命令是!default，直接根据语意即可知，它是说明变量值为默认值。任何的值都可以覆盖默认值，即使默认值出现在后面。

$color: red;

$color: blue !default;

body{

    color: $color //编译后为red

}