一颗小树 简单的 css 布局和修饰效果的实现。
Task_1_6
收获
初次尝试使用 sass
众所周知，css 对于程序员来说并不像是一门编程语言，而是像叙事文一样一句一句平铺直叙下来，编写和维护成本都很高。自然的就有一些前端大牛不甘寂寞，为 css 越来越多的加入编程元素，如变量，如可复用的 mixin 代码块，这被叫做 css 预处理器。sass 就是这样一种 css 预处理器，先使用其专门的类 css 语言，然后再编译成我们通常意义上的 css 文件。接下来说一下我感觉非常方便的几个特性：
- 变量 这是在我看来 css 实现可复用的一个最基本的要求，在设计稿中，我们经常会发现有很多的模块会有相同的颜色、边距、大小等等属性，如果在之前直接编写 css 的过程中，就需要不断重复去写这样的代码，如果改了需求就需要逐行查找并更改，实在是一个痛苦的过程。俗话说的好，不想“偷懒”的程序员不是好程序员。在 sass 中，可以将其相同的属性设置为一个变量，修改时也只需更改这个变量的值即可，一劳永逸。如：
$color: #f00;
p{
color: $color;
}
span{
background: $color;
}
h1{
border: 1px solid $color;
}
- 嵌套 实质是 css 中后代选择器的一种更为简洁的方式，在 css 中如果想要选取父元素的后代元素可能需要这样写：
table tr td{
//你的css代码
}
- 而在 sass 中你只需要像函数嵌套一样直接在内层嵌套,非常的直观清晰：
table{
//table's css code
tr{
//tr's css code
td{
//td's css code
}
}
}
- 父级选择器 在目前的 css 规范中 css 是层叠覆盖样式的，只能从父级选择子级，不可以变更选择的顺序，而 sass 是可以很方便的实现父级选择器，配合嵌套非常便捷。如：
div{
&{
//为div设置样式
}
&:hover{
//为div添加hover伪类
}
}
- 多种样式复用 我学习到了两种方式，一种是针对像按钮这样的完全可复用的样式，可以先把样式写好，然后通过@extend 功能进行复用。
.blue-button{
background: #00f;
}
button{
@extend .blue-button;
}
- 等同于
button{
background: #00f;
}
- 另一种方式就是需要对样式进行定制，其中用到的属性相同，但是值不相同。如：
//定义一个代码块，其中变量作为参数分别控制三种属性
@mixin font($size,$color,$line-height){
font-size: $size;
color: $color;
line-height: $line-height;
}
p{
@include font(12px,#f00,20px);
}
- 等同于
p{
font-size: 12px;
color: #f00;
line-height: 20px;
}
font-variant 属性
在设计图的右上角有个英文单词，需要全部字母大写并且首字母较大，起初我的想法是嵌套标签分别设置样式来实现，在 review 过别的人代码之后，发现了 font-variant 这个之前没有了解过的属性。
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
直接就可以完美解决这样一个需求！那么兼容性呢？查阅资料后发现兼容所有主流浏览器，短短一行 css 就实现了我想要嵌套标签实现的效果，更加优雅简洁。
font-style 属性设置斜体字
之前只知道它的一个 italic 属性是斜体字，经过查阅发现 oblique 也可以设置倾斜的效果，倾斜程度较 italic 要轻一些。
首字下沉
对于一段文字，如果需要实现首字下沉，我们只需使用:first-letter选择器选取文段的第一个字，然后为其设置浮动即可实现环绕的效果。浮动同样可以实现图片的四周环绕效果。
小结
这一任务主要学习了 sass 的用法，了解了更多的 css 属性和文字排版的知识。