sass笔记-3|Sass基础语法之样式复用和保持简洁

原创
2016/12/05 15:19
阅读数 429

上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式都能复用样式,使用它们也不难,但一定要注意什么时候该用什么。

零. 混合器——样式层上复用

当你需要一直复用大段样式的时候,可以考虑下混合器。

1. 基本用法

混合器使用@mixin标识符定义,然后通过@include引入,简单的说就是用@mixin定义一个混合器,它具有一个名字和一堆包含在花括号中的规则,用@include引入这个混合器(通过混合器的名字),混合器中的样式规则就会被提取到调用@include的地方。

此外,混合器中也可以包含CSS规则,可以包含选择器和选择器中的规则,甚至可以用父选择器标识符&

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

.notice{
	background-color:green;
	border:2px solid #0a0;
	@include rounded-corners;
}

//导出的css如下
.notice{
	background-color:green;
	border:2px solid #0a0;
	-moz-border-radius:5px;
	-webkit-border-redius:5px;
	border-radius:5px;
}

2. 可以给混合器传参

混合器复用样式的时候,可以通过传参改变混合器中的具体属性值,和function很像。

混合器定义时,参数名称必须以变量名形式指定,此外,可选的是,参数可以有默认值,只需要在参数名后面以冒号:分隔后写上默认属性值,如果你了解各类编程语言函数的默认参数值,这应该不会陌生。

引入含有参数的选择器时,有两种传入参数的形式,一种是仅仅传入参数值,这要求传入参数值的顺序和混合器定义的参数顺序一致,另一种则是通过$name:value的形式指定传入参数的名字和值,这就不要求顺序。

以下代码定义了一个有3个参数的选择器来设置一个链接各个状态的颜色样式,其中常规样式的颜色$normal有一个默认值#233,另外两个参数没有默认值:

@mixin link-col($hover, $visited, $normal:#233){
	color:$normal;
	&:hover { color:$hover; }
	&:visited { color:$visited; }
}

当引入这个混合器的时候,可以有以下两种方式引入:

//可以这么引入,因为最后一个参数默认,可以不传入
a{
	@include link-col(red, gray);
}
//也可以这样,就不用管顺序
a{
	@include link-col($visited:gray, $hover:red);
}

3. 混合器的使用场景——注意和类的区别

如果发现一直在不停复用一段样式,应该考虑把这段样式构造成一个混合器,尤其是它本身可能是一组有意义的样式组合,并且考虑进参数的设置,让混合器更加智能。

判断一组选择器是否应该组合在一起组成一个混合器,一条经验法则:**能否为这个混合器想出一个能概括它的好名字。**如果能想出一个短名字来描述这几条样式组合的作用,那么往往能构造出一个合适的混合器。

混合器和CSS类很像,css类也可以复用样式,一段样式给一个类,然后那里需要这一段样式去修饰,就在哪里添加这个类。

区别在于,类是在HTML中运用的,混合器是在样式表中使用的。这意味着,“类”具有语义化的含义,而混合器仅仅是有关样式的,仅仅是描述展示出来是什么样子的。

能区分这两者微妙的区别,并且有意地去选择更合适的方式去复用样式,这能让你的代码保持可读性和可维护性。诚然,现在很多流行框架,依旧在用类去复用样式,但是语义和样式的解耦绝对是趋势。

一. 选择器继承——语义化关系上复用样式

刚描述完混合器和类的差别,在于“语义”和“展示样式”,又突然到了建立在语义化关系上复用样式的选择器继承,似乎有点绕,为什么不用类而要用选择器继承呢?

实际上,选择器继承最常用的场景就是和类一起工作的。

1. 基本用法

选择器继承,用@extend去继承一个选择器定义的所有样式。以下代码,.seriousError将会继承.error定义的所有样式。

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

//输出的CSS代码是这样的
.error, .seriousError{
	border: 1px red;
	background-color: #fdd;
}
.seriousError{
	border-width: 3px;
}

是的,平时我们完全可以写输出的纯CSS代码,多写一个选择器名字和多写一行@extend命令,我们觉得差不多。

但是,在上面的例子中,.seriousError不仅会继承.error自身的所有样式(就像上面的那样),任何和.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承。

比如,在上面的样式代码是这样的:

.error{
	border: 1px red;
	background-color: #fdd;
}
.seriousError{
	@extend .error;
	border-width: 3px;
}
.error a{
	color:red;
	font-weight:bold;
}
h1.error{
	font-size:1.3em;
}

//输出的CSS是这样的,注意看下面的选择器
.error, .seriousError{
	border: 1px red;
	background-color: #fdd;
}
.seriousError{
	border-width: 3px;
}
.error a, .seriousError a{
	color:red;
	font-weight:bold;
}
h1.error, h1.seriousError{
	font-size:1.3em;
}

这个时候,如果我们不借助Sass的选择器继承,而用纯CSS来写,是不是就会有一些繁琐了。

我们再来想一下这几段代码的含义:我们描述了一个.error类来整体修饰错误提示都应该有的样式,然后.seriousError.error类的细化,描述了一个严重的错误应该有的进一步的样式。所以.seriousError应该有.error相关的所有样式,而这就是选择器继承帮助我们做的事。

2. 继承背后的基本实现思路

@extend背后最基本的想法是,如果.seriousError继承了.error,那么样式表中的任何一处.error选择器都会用.error, .seriousError这一选择器组进行替换和打开。

3. 继承的使用场景

继承是建立在语义化的关系上的,当一个元素拥有的类表明它是属于另一个类时(是另一个类的细化时),在这种情况下需要复用样式时使用,它的本质作用还是样式复用。

它和混合器相比,继承生成的代码量会相对较少,因为继承仅仅重复选择器,而混合器是重复一段样式。

另外,可以看到,一般它和类一起协同工作,当你在构建一些有关系的类时,在写这些具有层级关系的类的样式的时候,选择器继承可以帮你严谨地完成某些样式的复用,无论是这个选择器本身,还是隐藏在其他复杂选择器中的目标选择器。

4. 继承的高级用法

既然这被称为选择器继承,不是“类”继承,那么必然继承是可以针对类之外的选择器使用的,只是继承类是最常用的使用场景。

还有一种场景是,继承一个HTML元素的样式,如定一个.disabled类,样式修饰让它看上去像一个灰掉的链接,通过继承a这一元素实现:

.disabled{
	color: gray;
	@extend a;
}

还有一些关于复杂选择器的继承规则:

  1. 如果继承了一个复杂的选择器,那么只会继承这个复杂选择器命中的样式, 比如.seriousError @extend .important.error,那么被继承的.important.error被看做一个整体,单独的.important或者.error是不会被继承的;
  2. 如果一个选择器序列继承了另一个选择器,那么只会完全命中序列选择器的才会继承,比如(#main .seriousError) @extend .error最好不要这么做),那么前者的#main .seriousError也被看做一个整体,只有完全命中这个选择器的才会继承;
  3. 以逗号分隔的选择器序列是不能被继承的,因为这和继承其中任何一个选择器效果一样。

5. 使用继承时注意后代选择器

可以放心地继承有后代选择器修饰的选择器,但不用用后代选择器去继承别的选择器。即放心地用.serious { @extend (.main .error) },但是不要用.something .serious { @exten .error }

为什么,因为不这么做可能会导致继承迅速变复杂,sass可能会遗漏一些情况,考虑:

.foo .bar { @extend .baz; }
.bip .baz { a:b; }

当下面那条规则应用到.foo .bar时,有3种情况:

<div class="foo">
	<div class="bip">
		<div class="bar">...</div>
	</div>
</div>

<div class="bip">
	<div class="foo">
		<div class="bar">...</div>
	</div>
</div>

<div class="bip foo">
	<div class="bar">...</div>
</div>

所以sass必须要生成3种组合选择器才能覆盖这3种情况,但遗憾的是,sass并不总是会生成所有情况,另外,这样做,选择器的个数会迅速增加,所以最好的方式是不要这么用。

三. 小结

Sass保持样式复用和简洁的两个方式,一是混合器,混合器主要用于样式展示层的复用,可以给混合器传参从而在复用代码的同时保持灵活性,二是选择器继承,一般和类一起使用,主要用于建立在语义化关系上的样式复用,注意继承可能引发的问题。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部