今天完成的事情:

完成任务89第三个页面

修改任务10

完成任务11

明天计划的事情:

完成任务12，13

遇到的问题:

input radio 前面圆点的修改

解决方法

disply：none；后 用一个新的span放背景图做点击事件

收获:

 学习了sass

变量

没错，就是变量。Sass让CSS可以使用变量。

变量类型可以是数字，字符串，颜色，null，列表和maps。

在Sass中使用$符号定义变量。让我们来创建第一个变量：

$primaryColor: #eeffcc;

如果尝试编译这个文件，你并不会在CSS中看到任何东西，但你做的都是对的。定义变量并不会输出任何CSS，它们只会被记录在当前作用域的变量集中。你需要使用一段CSS声明使用它，然后就可以看见了：

$primaryColor: #eeffcc;

body {

    background: $primaryColor;

}

提一下作用域这个坑，你知道Sass有变量作用域吧？那就对了，如果你在选择器中声明了一个变量，那么它的作用范围就是这个选择器内部。看看这个：

$primaryColor: #eeccff;

body {

  $primaryColor: #ccc;

  background: $primaryColor; //编译后#ccc

}

p {

  color: $primaryColor; //编译后#eeccff

}

但如果我们想在选择器中声明一个全局变量可如何是好？Sass提供了一个!global标识符来实现这一功能：

$primaryColor: #eeccff;

body {

  $primaryColor: #ccc !global;

  background: $primaryColor; //编译后#ccc

}

p {

  color: $primaryColor; //编译后#ccc

}

另一个很有用的标识符是!default——特别是编写混合宏时。这确保了我们在触发事件时，即使未传递参数，变量也会有默认的值。如果传递了参数，那么该参数就会覆盖默认值：

$firstValue: 62.5%;

$firstValue: 24px !default;

body {

    font-size: $firstValue; //编译后62.5%;

}

通过下面几个关于变量的例子，看看你编写的Sass是如何编译成CSS的：

在SassMeister上练习

数学计算

与CSS不同，Sass允许使用数学表达式！这对于混合宏非常有用，是我们能够使用自己的标记做一些很酷的事情。

支持的操作符包括：

加：+

减：-

除：/

乘：*

取余：%

相等：==

不相等：!=

在继续之前，我要提醒两个Sass有关于数学计算的“陷阱”。

第一，因为/符号用来简写CSS字体属性，比如font: 14px/16px，所以如果你想在非变量值上使用除法操作符，那么你需要使用括号包裹它们：

$fontDiff: (14px/16px);

第二，不可以混合使用值的单位：

$container-width: 100% - 20px;

上面这个例子行不通。相反，对于这个特殊的例子你可以使用calc函数——它可以在渲染时解释执行。

回到数学计算上来，让我们基于基础的容器宽度创建一个动态列声明：

$container-width: 100%;

.container {

  width: $container-width;

}

.col-4 {

  width: $container-width / 4;

}

//  Compiles to:

//  .container {

//   width: 100%;

//  }

//

//  .col-4 {

//      width: 25%;

//  }

非常棒，对不对？尝试下面的代码，看看我们是如何进一步使用Sass的数学计算增加margin值。

在SassMeister上练习

函数

在我看来，Sass最好的一点就是它的内建函数。可以在这里查看完整的函数列表。内容非常广泛。

你是否想创建一个非常酷的按钮，然后在调色板上花费了很多时间，以尝试为阴影部分找到正确的色调？

尝试darken()函数吧。你可以传递给它一个颜色和比例，稍等一会，就会使你的颜色变暗了。看看这个例子就知道为什么它很酷了：

在SassMeister上练习

嵌套

Sass中一个很有用又经常被误用的特性，就是嵌套声明。能力越大责任越大，所以让我们花费点时间了解它都做了什么，另一方面，也看看它做了什么坏事。

基础的嵌套指在一个声明内实现另一个声明的能力。通常在CSS中，我们会这么写：

.container {

    width: 100%;

}

.container h1 {

    color: red;

}

但在Sass中，我们可以通过如下写法获得相同代码：

.container {

    width: 100%;

    h1 {

        color: red;

    }

}

这太疯狂了！那么如果我们想引用父选择器又该怎么办呢？可以通过使用&符号实现。看看我们是如何利用这个方式给伪选择器添加链接属性的吧：

a.myAnchor {

    color: blue;

    &:hover {

        text-decoration: underline;

    }

    &:visited {

        color: purple;

    }

}

现在已经知道怎样嵌套了，但是如果想离开嵌套回到顶层选择器，那么我们可以使用@at-root指令。比如我们有一个这样的嵌套：

.first-component {

    .text { font-size: 1.4rem; }

    .button { font-size: 1.7rem; }

    .second-component {

        .text { font-size: 1.2rem; }

        .button { font-size: 1.4rem; }

    }

}

当意识到第二个组件可能会被用作他处，那我们就有麻烦了。实际上，这并不完全对。@at-root可以解决这个问题：

在SassMeister上练习

很酷对不对？嵌套是节省时间和提高可读性的窍门，但是过度嵌套则会制造过度选择和文件大小的问题。思考你的Sass编译结果并尝试遵循“inception rule”。

Inception Rule:选择器深度不要超过四层。——thesassway

如果可能，嵌套不要超过四层。不过即使你必须嵌套五层，Hampton Catlin也不会去你家和你理论的。尽量不要这样做。

Imports

开始Sass中我又一个喜爱的部分吧。imports允许将总的样式分割成小文件，并在另一个文件中导入。这对于组织方式和编写速度来说是神奇的。

我们可以使用@import指令导入.scss文件：

@import "grids.scss";

实际上，你都不需要写扩展名：

@import "grids";

Sass编译器还有一个“partials”的概念。如果.sass或.scss文件名有一个下划线前缀，那么它就不会被编译成CSS。如果你的文件只是被引用到主体样式style.scss中而并不需要编译，这个特性就会很有用。

扩展和占位符

在Sass中，@extend 指令是继承既有样式的标准方式。

让我们使用@extend指令扩展一个input样式——指向input-error类：

.input {

  border-radius: 3px;

  border: 4px solid #ddd;

  color: #555;

  font-size: 17px;

  padding: 10px 20px;

  display: inline-block;

  outline: 0;

}

.error-input {

  @extend .input;

  border:4px solid #e74c3c;

}

请注意，这么做并不会从.input复制样式到.error-input中。看看这个例子中编译后的CSS样式，理解Sass是如何智能处理的吧：

在SassMeister上练习

但如果我们想声明的扩展来自尚未实现的样式集，那该如何做呢？占位符选择器就可以解决这个问题。

%input-style {

    font-size: 14px;

}

input {

    @extend %input-style;

    color: black;

}

声明占位符选择器需要在目标类名上前缀一个%符号。只有当扩展它的元素被渲染时，占位符选择器才会被编译输出。

看看下面了解上一个例子使用占位符是怎样编译的：

在SassMeister上练习

混合宏

混合宏是Sass令人惊艳的特性，因为它在让你实现类似@extend功能的同时还提供了传参的功能。

Sass使用@mixin指令定义混合宏，并使用@include指令引入。让我们构建一个简单的混合宏实现媒体查询吧。

第一步是定义混合宏：

@mixin media($queryString){

  //

}

注意我们在混合宏media中声明了一个$queryString参数。当我们引入混合宏时，可以一个字符串参数以实现动态渲染。勇敢试一下吧：

@mixin media($queryString){

    @media #{$queryString} {

      @content;

    }

}

因为我们期待字符串参数被目标函数使用，所以使用了Sass的插值语法，#{}。当你传递变量到这个括号中时，变量会像字符串一样输出而不是进行某种逻辑运算。

这个例子中另一个生疏的地方是@content指令。当你使用的混合宏后接被大括号包裹的样式，那么被包裹样式就可以通过@content指令加以使用。

最后，让我们使用混合宏和@include指令试一下吧：

.container {

    width: 900px;

    @include media("(max-width: 767px)"){

        width: 100%;

    }

}