今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

完成了任务十二
明天计划的事情：（一定要写非常细致的内容） 

开始进行了任务十三
遇到的问题：（遇到什么困难，怎么解决的） 

就是关于，SASS的问题，有的时候会有这样的情况，就是在编译成CSS文件的时候，出现

像这样的情况，如何去消除之前的东西，像我只想要 header .alt .location {

这一段，不像要之前的body这部分要怎么去实现

收获：（通过今天的学习，学到了什么知识）

重新的看了下SASS的SCSS部分

Sass是什么？

Sass (Syntactically Awesome Style Sheets)是一个CSS预处理器。Sass与CSS关系就像CoffeeScript与Javascript关系。它通过添加标记到样式表中，帮助我们更轻松惬意的书写CSS。

那么，Sass使如何工作的？

很高兴你有此疑问，实际上有多种编译Sass的方法：

Ruby Sass二进制源码。通过gem install sass命令安装，然后就可以使用running sassc myfile.scss myfile.css来编译了。

类似Hammer，CodeKit和Compass的GUI软件。

我个人喜爱libsass

一个使用C语言编写且速度极快的Sass编译器。也可以通过NPM的node-sass (npm install node-sass)安装libsass。

到底应该选择哪一个呢？这取决于你所做的事。

目前我在从事大型电子商务网站代码库的维护工作，因此使用Ruby Sass编译大量源码就显得有点慢。我通常在构建系统中使用node-sass，但是必须牢记libsass的特性并非完全与Ruby Sass相同。

如果你不是一个善于使用命令行工具的人，那么GUI软件是个不错的选择。通过安装此类软件监视.scss文件，那么当你编写它们的时候，软件将会自动编译。

如果你只是想尝鲜或者共享几段代码，非常建议使用Sassmeister。这是一款基于WEB的Sass开发平台，而我也将在本文中使用它。

.sass vs .scss?

Sass面世之初，其核心语法是明显不同于CSS的。它使用缩进代替了括号，没有分号并且操作符很短。简而言之，像极了Haml。

有些人非常不喜欢这种语法格式，所以在Sass 3.0中开发者将核心语法改成了.scss。SCSS是CSS的一个超集，在与 CSS写法完全相同的基础上，还同时兼具了Sass的所有特性。

也就是说，如果你喜欢还可以使用原生语法。我个人使用.scss，并且在本文中也是使用.scss语法。

为什么使用Sass?

问得不错。Sass让编写可维护的CSSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。

如此，你还需要更多理由吗？

安装

废话少说，让我们开始干吧。如果你想尝鲜，下面的方法都不错：

安装你选择的编译方法（软件或者命令行），同时创建style.scss文件。

或者

在Sassmeister上实践

变量

没错，就是变量。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%;

    }

}

看看下面这个演示，了解我们新的混合宏是怎样渲染媒体查询的吧：

在SassMeister上练习

函数指令

在Sass中，函数指令类似于混合宏，它们会通过@return指令返回值而不是返回样式。这可以降低代码中的重复率并提高可读性。

让我们创建一个函数指令以清除grid例子中的grid运算式：

@function getColumnWidth($width, $columns,$margin){

    @return ($width / $columns) - ($margin * 2);

}

现在就可以在代码中使用这个函数了：

$container-width: 100%;

$column-count: 4;

$margin: 1%;

.container {

  width: $container-width;

}

.column {

  background: #1abc9c;

  height: 200px;

  display: block;

  float: left;

  width: getColumnWidth($container-width,$column-count,$margin);

  margin: 0 $margin;

}

很有范儿对不对？

演示

现在我们已经可以使用这些工具，那我们怎样构建自己配置的栅格框架呢？继续看：

让我们从创建一个setings map开始：

$settings: (

    maxWidth: 800px,

    columns: 12,

    margin: 15px,

    breakpoints: (

        xs: "(max-width : 480px)",

        sm: "(max-width : 768px) and (min-width: 481px)",

        md: "(max-width : 1024px)  and (min-width: 769px)",

        lg: "(min-width : 1025px)"

    )

);

记下来创建一个混合宏渲染我们的框架：

@mixin renderGridStyles($settings){

//

}

继而，我们需要渲染每个断点处的样式，所以遍历所有断点并调用媒体查询的混合宏。我们可以使用map-get方法获取断点值，同时使用@each指令遍历所有断点：

@mixin renderGridStyles($settings){

  $breakpoints: map-get($settings, "breakpoints");

  @each $key, $breakpoint in $breakpoints {

    @include media($breakpoint) {

      //

    }

  }

}

我们需要在迭代器内部实现具体栅格的样式渲染，所以创建一个renderGrid混合宏。使用map-get方法获得map值，并使用@while指令迭代以$i作为索引的列。我们使用插值作为类名。

@mixin renderGrid($key, $settings) {

  $i: 1;

  @while $i <= map-get($settings, "columns") {

    .col-#{$key}-#{$i} {

      float: left;

      width: 100% * $i / map-get($settings,"columns");

    }

    $i: $i+1;

  }

}

接下来，添加容器和列的样式：

.container {

    padding-right: map-get($settings, "margin");

    padding-left: map-get($settings, "margin");

    margin-right: auto;

    margin-left: auto;

}

.row {

    margin-right: map-get($settings, "margin") * -1;

    margin-left: map-get($settings, "margin") * -1;

}

任务12任务总结。

任务耗时2018.10.27~10.29

成果链接 https://jksmiss.github.io/start-a-project/task12/task12.html

成果链接https://jksmiss.github.io/start-a-project/task12/task12-1/task12-1.html

官方脑图。

我的脑图

这一步我就首先把之前的东西拿来运用，像嵌套这样的，还有一部分就是变量和全局变量这一块的

就是底部的部分有一些难懂，就是关于嵌套的部分，因为说在上边的部分我是做了是个跳转的页面

所以我在下面的嵌套可能会失败了点

当构建选择器时应该使用清晰， 准确和有语义的class(类)名。避免使用标签选择器。

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

同一rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等

Box Model 相关属性包括：border / margin / padding / width / height 等

Typographic 相关属性包括：font / line-height / text-align / word-wrap 等

Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。