继承/扩展 - inheritance

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在订阅年付会员多送 6 个月,重订、续订多送 12 个月(最后 5 天)。订阅 →

在 Sass 里面,我们可以使用继承或者叫扩展来减少重复的工作,用的是 @extend 这个指令,它的功能就是,可以让一个选择器去继承另一个选择器里面定义的所有的样式。下面,我们去试一下这个 @extend ...

比如这里我们有一个类叫 .alert,在这里定义了一些样式 ... 这个 .alert 的作用就是让元素变成一个警告提醒的区块 ... 另外我们可能还想再设计一些其它样式的警告提醒 ... 它们都有不同的背景,文字,边框的颜色 ...

在下面,我们再添加一个叫 .alert-info 的类选择器 .. 在这个选择器里,需要用到在 .alert 里面定义的所有的样式 ... 另外它还需要一些自己的更具体的样式。

这里先用一个 @extend ... 去继承一下 .alert 这个选择器 ... 然后再添加一个自己的样式 ... 比如一个浅蓝色的背景 ... background-color ... #d9edf7 ...

.alert-info {
@extend .alert;
background-color: #d9edf7;
}

保存 ... 你会看到编译之后的结果 ... 因为 .alert-info 里面用了一个继承,去继承了 .alert 这个选择器里的样式 ... 所以输出的时候,会用一个群组选择器 ... 这里就是 .alert ... .alert-info ... 这两个选择器,会同时拥有在这个群组选择器里定义的样式 .. 也就是这个 15px 的内边距 ...

另外,Sass 还给我们把 .alert-info 独有的样式单独拿出来 .. 就是这个浅蓝色的背景 ... 这个继承不仅仅是去继承 .alert 这个选择器里的样式 .. 另外一些跟 .alert 相关的选择器里的样式,都会被 .alert-info 继承过来 ...

在这里,我们再去添加一个跟 .alert 相关的样式 ... .alert a .... 去设计一下在 .alert 下面的链接的样式 .. 用一个 font-weight 属性 ... 设置成加粗的样式 ...

.alert a {
font-weight: bold;
}

保存 ... 你会看到,编译以后,这个为 .alert 下面的 a 标签添加的样式,也会用在 .alert-info 这个类下面的 a 标签上 ... Sass 的 @extend 输出的结果,就是使用这样的群组选择器,来保证让使用继承的选择器,拥有它继承的选择器还有相关的选择器里面定义的样式。

继承/扩展 - inheritance《 Sass 基础 》

统计

11346
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点