今天完成的事：提交任务十三  继续深入学习sass的  混合 继承  占位符的应用与差别    学习拆分组件库的知识

使用@extend调用定义好的选择器占位符%placeholder有所限制，他不能在不同的@media中运行。

如下面的示例：

此时编译你的SCSS文件时，编译器将会报错：

>>> Sass is watching for changes. Press Ctrl-C to stop.

      error test.scss (Line 3: You may not @extend an outer selector from within @media.

You may only @extend selectors within the same directive.

From "@extend %icon" on line 10 of test.scss.

)

因为@extend是将一个选择器样式扩展到另一个选择器当中，而实际上在不同的@media中却无需复制这些样式。

虽然他可以通过其他的方式来工作，在@media块中定义选择器占位符，在@extend调用时，将会将整个样式包含在@media区块中：

编译出的CSS:

收获：对 混合  和 继承占位符的理解更深入了

任务名称：css-task-11

成果链接：https://1239937890.github.io/mywork/task11/html/task11.html#   

任务耗时：11.20日-11.21日  （2天）

官方脑图：

自己脑图：

任务总结：

（1）背景介绍：

什么是SASS

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。 Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法 并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的 大力推动，还是有很多开发者选择了 Sass。 Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。 最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

（2）知识剖析：

1、SASS的安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

mac下自带Ruby无需在安装Ruby! 先从官网下载Ruby并安装。然后再安装sass即可。 安装好sass，之后我们就可以直接写sass，写好之后把Sass编译成sass。 编译方法很多，比如命令行编译，软件koala编译， 我们常用的编辑器也可以webstorm，sublime也可以实时编译。 那么，sass到底该怎么写呢？

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

2.SASS的使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss

3.SASS的变量

SASS的变量使用$开头，可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

由变量声明符、变量名称、变量值组成，例如：$width:300px;

    ·声明变量：普通变量、默认变量  $width:300px;/$width:300px ！default;

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

    ·变量的调用：$fontSize: 12px;//声明

        body{

                font-size:$fontSize;//调用

               }

    ·全局变量与局部变量：

                全局变量就是定义在元素外面的变量！（在选择器、函数、混合宏…的外面定义的变量为全局变量）；

                局部变量：定义在元素内部的变量，内部的局部变量不会影响外部的其他元素，局部变量只会在局部范围内覆盖全局变 量。在局部变量的属性值后加上!global关键字可以将变量提升为全局变量。

什么时候声明变量？

该值至少重复出现了两次；

该值至少可能会被更新一次；

该值所有的表现都与变量有关（非巧合）。

4.SASS的嵌套

在sass中属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

嵌套分为3种：选择器嵌套、属性嵌套、伪类嵌套。

     ·选择器嵌套：有很好的结构性，可以依照html布局的结构依层依次写下来，嵌套层数最好不要超过四层

     ·属性嵌套：CSS 有一些属性前缀相同，只是后缀不一样，可以进行嵌套。

      //属性嵌套

        .box {

                border: {

                              top: 1px solid red;

                              bottom: 1px solid green;

                             }

                   }

      · 伪类嵌套：伪类嵌套和属性嵌套非常类似，需要借助&符号一起配合使用。

       .clearfix{

                    &:before,

                    &:after {                             //&代表父元素选择器的名字

                                content:"";

                               display: table;

                               }

                      &:after {

                                   clear:both;

                                      overflow: hidden;

                                     }

                        }

注意：嵌套不是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深。

5.SASS的继承

SASS允许一个选择器，继承另一个选择器。sass的继承用@extend。

.btn {

  border: 1px solid #ccc;

  padding: 6px 10px;

  font-size: 14px;

}

.btn-primary {

background-color: #f36;

color: #fff;

@extend .btn;

}

6.SASS的占位符

占位符 用%开头

占位符也是一个非常强大的功能，和继承也有着密切的关系。比如说，我们有多个类都有相同的代码共有，需要继承同一个基类。但是基类本身并不存在或者基类自身并不需要这些样式，像继承的写法有产生了代码的冗余，最终会编译出多余的代码。

用占位符声明的代码，在不被@extend调用的情况下，是不会产生任何代码 ，占位符可以改变以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。

7.SASS的注释

SASS共有两种注释风格。

标准的CSS注释 /* 注释 */ ，该会保留到编译后的文件。

单行注释 // 注释 ，只保留在SASS源文件中，编译后被省略。

8.SASS混合器

混合器使用@mixin标识符定义。

这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式,然后可以通过@include来使用这个混合器，放在你希望的任何地方。调用的混合器会把所有样式提取出来放在被调用的地方

混合器并不一定总得生成相同的样式。可以通过在混合器时给混合器传参，来定制混合器生成的精确样式。

混合宏、继承、占位符的使用时机：

1，混合宏的使用：

不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码冗余，但它可以传参数，较为灵活。

建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

2.继承的使用：

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起变为组合选择器。编译后的代码相对于混合宏来说要干净整洁，但是它不能传变量参数。

建议：若代码块不需传任何变量参数，且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

3.占位符的使用：

编译后的 CSS 代码和使用继承基本相同，占位符和继承的主要区别是：

占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；

继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中

任务名称：css-task12

成果链接：https://1239937890.github.io/mywork/task12/html/task12.html 

任务耗时：11.20日-11.21日    2天

官网脑图：

个人脑图：

任务总结：

熟悉scss操作，规范化自己的代码，符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.而CSS的书写顺序也要注意，

ule 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 属性，应放在最前面。