发表于: 2018-07-01 23:14:25

1 779



今天完成的事情

任务十一

sass变量的使用

CSS3 :default伪类选择器






明天的计划

任务十二






遇到的问题





收获

CSS3 :default 伪类选择器只能作用在表单元素上,表示默认状态的表单元素。

CSS3 :default 伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。



sass变量

sass使用$符号来标识变量


sass变量的声明和css属性的声明很像

比如$highlight-color:#F90

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值


凡是css属性的标准值可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。


sass的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线。这完全取决于个人的喜好,有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color),而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍,这也是compass和本文都用的方式。


不过,sass并不想强迫任何人一定使用中划线或下划线,所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用,反之亦然。这意味着即使compass选择用中划线的命名方式,这并不影响你在使用compass的样式中用下划线的命名方式进行引用:


$picture-style:inline-block;
$picture-height:.45rem;
$picture-margin:0 .36rem 0 .46rem;
.iphion{
display:$picture-style;
height:$picture-height;
margin:$picture-margin;
background: url(../picture/task-css11.png) no-repeat 0 0;
}

编译后

.iphion {
display: inline-block;
height: 0.45rem;
margin: 0 0.36rem 0 0.46rem;
background: url(../picture/task-css11.png) no-repeat 0 0;
}



返回列表 返回列表
评论

    分享到