今天完成的事情：

修改优化了任务10的css代码部分，重新设置了文本输入款限制非数字字符的输入。

学习了sass:

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，就可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量

ass变量的声明和css属性的声明很像：

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，

是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;

上边示例中的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。

在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效 果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。

明天计划的事情：

学习sass的混合宏和属性嵌套规则。

完成任务11.

遇到的困难：

暂无。

收获：

学会了使用sass进行css的编译，使用变量。

css-task10-郭巍

转至元数据结

转至元数据起始