[武汉|结业弟子]JS-庄引|2017年03月25日的日报-技能树.IT修真院

发表于： 2017-03-25 22:44:53

1 692

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

没有什么标准的答案，只有对代码之美的不尽追求。比如一个类名，一开始取名为.b,很显然这个名字太没有意义了，不利于程序的可读性，所以需要取一个有意义的命名比如.button。这样就够了么，显然不是，我们已经用上了预编译器，那么可以给颜色边框等设置变量，便于多处调用。然后我们又发现这个按钮在不同页面基本一致，只有边角圆弧度数不一样，那么是不是可以使用混合的技巧，将圆弧度数作为参数来使用。。。在这个过程中，逐渐让代码更佳优美健壮。

进一步了解SCSS 嵌套，混入，继承。

明天计划的事情：（一定要写非常细致的内容）

任务12:标准化——阅读html和css规范，不使用bs重写任务5和6（护工）

遇到的问题：（遇到什么困难，怎么解决的）

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

嵌套

CSS虽然支持嵌套但是不支持代码块的嵌套，而SCSS支持。这样可更加清晰地表示元素之间的关系。

table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.3em;
}
}

会被解释成：

table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.3em;
}

在Sass文档中还可以看到有关命名空间、父级引用等的内容。

混入（Mixin）

Mixin包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {
padding: 2px;
}
}
#data {
@include table-base;
}

会被解释成：

#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}

循环

Sass支持用@for、@each和@while语句进行迭代。

$squareCount: 3;
@for $i from 1 through $squareCount {
#square-#{$i} {
  background-color: red;
  width: 50px * $i;
  height: 120px / $i
}
}

会被解释为：

#square-1 {
background-color: red;
width: 50px;
height: 120px;
}
#square-2 {
background-color: red;
width: 100px;
height: 60px;
}
#square-3 {
background-color: red;
width: 150px;
height: 40px;
}

参数

Mixin支持参数。

@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}

会被解释为：

#data {
float: left;
margin-left: 10px;
}

包含

@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {
padding: 2px
}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}

会被解释为：

#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}

继承编辑

CSS3支持DOM层次，但是不支持样式的继承。

Sass语言通过@extend关键词实现了继承功能。

.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}

会被解释为：

.error, .badError { 
   border: 1px #f00; 
   background: #fdd;
}
.error.intrusion,.badError.intrusion { 
   font-size: 1.3em; 
   font-weight: bold;
}
.badError { 
   border-width: 3px;
}