今天完成的任务

完成了任务13 投票页面的左边的导航栏一开始我是用dom写的 后来看了师兄的代码了解到可以用check来写

学习到了 label与input不一定要在一起 可以分开也会有效果的！ 选择器我之前没怎么看！ ~就是兄弟选择器！

明天要完成的任务

 完成任务14 看boot框架栅格布局的源代码  自己手写栅格布局

附上任务总结：

任务名称：css11-13

成果链接（11）：https://jackzhoujia.github.io/xiuzhenyuan/TaskEleven/TaskEleven.html

成果链接（12）：https://jackzhoujia.github.io/xiuzhenyuan/TaskFive/TaskTwolve.html，https://jackzhoujia.github.io/xiuzhenyuan/TaskSix/TaskTwolve.html

成果链接（13）：https://jackzhoujia.github.io/xiuzhenyuan/TaskThirTeen/TaskThirTeenVersion.html

任务耗时：5天

官网脑图：

个人脑图：

官方提供的任务11-13主要样我们使用Sass

下面是我对sass一些总结：

sass是底层语言Rydy语言写的 需要先编译成css代码才能使用！！

单文件编译：sass<sass文件路径>/style.scss:<css文件路径>/style.css

多文件:sass sass/:css/

动态:sass --watch <sass文件路径>/style.scss:<css文件路径>/style.css

有一些可视化工具 我下载了 考拉 亲测有效 非常好用

sass什么时候声明变量

1该值至少重复出现俩次

2该值至少可能被更新

3该值所有的表现都与变量有关;

基本上 没有理由声明一个永远不需要更新 或者只在单一地方使用的变量

避免选择器的嵌套

我的理解是选择器嵌套很难阅读 对自己还好 要是队友看 简直噩梦 而且编译万之后css还是一样的 一般少用吧！！

混合器

语法 @mixin ..(){} 调用:@include ..

可以把重复代码放到混合器中 节省代码！而且可以带参传参 进行判断！！！

sass继承

可以继承类样式块中所有样式代码 调用:@extend..

占位符

%..{

功能十分强大，用处和继承相同，但是如果不被@extend的话css不会产生任何代码

}

这三位功能似乎都很强大 他们的一些优劣

混合器的优势是可以传参带参 缺点是编译的css代码会产生多个对应的样式代码 造成多余的代码

继承: 编译后代码合并,不能传参

占位符:使用上与继承基本相同 但不掉用时不会产生代码

插值

#{$..}作用在css属性上:border-#{$..}

不能作用在混合器上 可以作用在继承 占位符上

sass注释

/**/css可见

//css不可见

for循环

@for $i from<start> to/through<end>

$i表示变量

start表示起始值

end表示结束值

through包括end to不包括

each

@each $. in <list>

$list:.. ... ... .. 多个值就是list

一些sass常用函数

unquote($string):删除字符串中的引号

quote($string)给字符串加引号

to-upper-case()将字符串小写转大写

to-lower-case()将字符串大写转小写

数字类函数

percentage()将一个不带单位的数字 转换成%

round()将数字四舍五入

ceil()只做入 不做舍

floor()只做舍 不做入

abs()返回一个数的绝对值

min()多个数返回最小

max()多个数返回最大

rundom()用来获取一个随机数

列表函数

length()返回列表中有几个值

nth($list,$n)指定列表中某个位置的值

join()将俩个列表合并成一个列表

append()将某个值插到列表中，并且处于最末

index()找到某个值所处的位置

Introspection函数

type-of($value)返回值类型

unit($number)返回值单位

unitless($number)判断一个值是否有单位

comparable($number-1,$number-2)判断俩个值是否可以做相加/减和合并

Miscellanecus函数

三元:if($..,$if-true,$if-false)

任务 11 与12 主要就是用sass重构之前写过的页面 并没有新功能 没有什么好说的。

任务13 向左慢慢偏移的时候可以用到 css3 的新属性 

transition

关于sass的一些个人理解

sass什么时候声明变量

1该值至少重复出现俩次

2该值至少可能被更新

3该值所有的表现都与变量有关;

我认为一般都是同时满足以上三点才有申明变量的必要性！！！如$one = 0 在margin ; $one;下引用 ， 这样真的有意义吗？反而我在写代码时 还要想$one变量的值是多少

往往申明的变量一般都会与混合器同时去使用！ 什么时候又需要用到混合器 我是这么理解的：在用继承或者占位符不能实现一些代码的公用是才需要用到混合器！因为

混合器可以进行传参数 然后进行一些条件判断