发表于： 2018-10-02 19:45:03

1 773

今天完成的事情：写完任务十二。开始任务十三。十一十二难度不大，看懂scss就可以了。多用。

明天计划的事情：明天打算写一下任务十三。晚上看看休息不休息。

遇到的问题：问题基本没多少，都是写过的任务。scss的 @mixin @include @import @extend 不太懂。等下再看看。

收获：

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass的文件并将其导入。

@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式

.hoverlink { @extend a:hover; }

a:hover { text-decoration: underline; }

编译为

a:hover, .hoverlink

{ text-decoration: underline; }

@mixin

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px; }

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {

background-color: green;

border: 2px solid #00aa00;

@include rounded-corners; } //sass最终生成：

.notice {

background-color: green;

border: 2px solid #00aa00;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px; }

在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。这一节将介绍使用混合器来避免重复。通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

补任务10总结

官网脑图：

自己的脑图：

任务总结：

bootstarp框架 input表单控件。

z-index解决叠加顺序问题，使效果不会产生意料之外的效果。
学习了radio和input样式修改的方法。
input设置步骤：
1.在input后面添加一个兄弟元素span，设置span样式
如：span {
display：inline-block；
width：30px；
height：30px；
background：#00f；
border：1px solid #000；
}
2.设置input本身display：none；
3.利用伪类选择器：input：checked+span{
border：10px solid #0f0;
backgroud: #534578;
}
这里的+代表选择相邻的兄弟元素，若为不相邻的兄弟元素请使用 input：checked~span{}

补任务11总结

官网脑图：

自己的脑图：

任务总结：

学习了scss。

Sass是一种动态样式语言，Sass语法的缩排语法，比Css比多出很多功能，如变量，嵌套，运算，继承，颜色处理，函数等，易于阅读。Cass的安装需要安装Ruby环境，是服务器端处理的，Less是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less,然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。scss我们用起来很好用，选择器的嵌套，让开发变得更加方便。

声明一个变量使用