文享日志

Sass中混合器与继承

CSS

发表于2017年11月19日13:29:08

更新于2018年02月06日10:18:05

0条评论 244次阅读

先说说混合器,示例代码如下:

@minix show_font_light{
	color: yellow;
	font-size: 1.1rem;
        font-weight: blod;
}

p{
	line-height: 20px;
	@include show_font_light;
}

首先使用@minix定义一个show_font_light混合器,可以看到是用来展示需要突出的文字,导入时用@include导入。编译之后的效果是这样:

p{
	line-height: 20px;
	color:yellow;
	font-weight: bold;
	font-size: 1.1rem;
}

混合器中还可以传入参数:

@minix show_font_light($fcolor,$fontWeight,$fontSize){
	color:$fcolor;
	font-weight: $fontWeight;
	font-size: $fontSize;
}

p{
	line-height: 20px;
	@include show_font_light(red,blod,1.1rem);
        //还可以不按顺序传参,不过要指定变量名
	@include show_font_light($fcolor:red,$fontSize:1.1rem,$fontWeight:blod)
}


然后是继承,先看示例代码:

.error {
	border: 1px solid red;
	background-color: #fdd;
}
.seriousError {
	@extend .error;
	border-width: 3px;
}

定义了一个超类error,在子类seriousError继承超类。结果相当于给类名为seriousError的元素有加了error。

相当于这种效果class="seriousError error"。


混合器与继承区别:

混合器主要用于展示性样式的重用,而继承用于语义化样式的重用。


参考:

Sass官网


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广