sass学习笔记(4)

1.混合器

如果你整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合使用@mixin标识符定义。看上去很像其他CSS@标识符,比如@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段SASS代码,定义了一个非常简单的混合器,目的是跨浏览器的圆角边框。

@mixin rounded-corners {
     -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
              border-radius: 5px;
}

然后就可以在你的样式表中通过@include 来使用这个混合器,放在你希望的任何地方。@include 调用会把混合器中的所以样式提取出来放在@include 被调用的地方。如果像下边这样写:

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最终生成:

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。这一节将介绍使用混合器来避免重复。通过使用参数,你可以使用混合器把你样式中的通用样式抽离出来,然后轻松地在其他地方重用。实际上,混合器太好用了,一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大,导致加载缓慢。所以,首先我们将讨论混合器的使用场景,避免滥用。

2.何时使用混合器

利用混合器,可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式,那就应该把这段样式抽离出来,构造成优良的混合器,尤其是这段样式本身就是一个逻辑单元,比如说是一组放在一起有意义的属性。

判断一组属性是否应该组合成一个混合器,一条经验法则就是你是否为这个混合器相处一个好名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式,比如 rounded-corners fancy-font 或者no-bullets,那么往往能够构造一个合适的混合器,如果找不到,这时候构造一个混合器并不合适。

混合器在某些方面跟css类很像。都是让你给一大段样式命名,所以在选择使用哪个的时候可能产生疑惑。重要的区别就是类名是在HTML文件中应用的,而混合器是在样式表中应用的。这就意味着类名具有语义化含义,而不仅仅是一种展示性的描述,用来描述一条css规则应用之后产生怎样的效果。

在之前的例子中,.notice是一个有语义的类名。如果一个html元素有一个notice的类名,就表明了这个html元素的用途:向用户展示提醒信息。rounded-corners混合器是展示性的,它描述了包含它的css规则最终的视觉样式,尤其是边框角的视觉样式。混合器和类配合使用写出整洁的html和css,因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性,在写样式的过程中一定要铭记二者的区别。

有时候仅仅把属性放在混合器中还远远不够,可喜的是,sass同样允许你把css规则放在混合器中

posted @ 2019-07-29 14:32  Heson  阅读(124)  评论(0编辑  收藏  举报
Live2D