sass @extend(继承)指令详解

更新日期: 2022-08-03阅读: 454标签: 指令

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。

通常会在 html 中给元素定义两个 class,一个通用样式,一个特殊样式。

普通css的实现

接下来以警告框为例进行讲,解4种类型

类型说明
info信息!请注意这个信息。
success成功!很好地完成了提交。
warning警告!请不要提交。
danger错误!请进行一些更改。

所有警告框的基本样式(风格、字体大小、内边距、边框等...) ,因为我们通常会定义一个通用alert样式,类似于这样的

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

然后定义不同警告框单独风格:

.alert-info{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

然后这样使用:

<div class="alert alert-info">
    信息!请注意这个信息。
</div>

<div class="alert alert-success">
    成功!很好地完成了提交。
</div>

<div class="alert alert-warning">
    警告!请不要提交。
</div>

<div class="alert alert-danger">
    错误!请进行一些更改。
</div>

最后的效果:

![image-20220803090251819](D:\html\一些资料\营销\视频营销\软件相关\CSS预处理器SASSSCSS从入门到高级进阶—完整视频课程【最新录制】\第九讲 sass @extend(继承)指令详解\images\image-20220803090251819.png)

使用继承@extend进行改进

基本样式我们没有变,主要是各个警告框单独的样式

.alert-info{
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    @extend .alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    @extend .alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

这样编译后:

.alert, .alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }

.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

使用时就不须要再写基本类了

<div class="alert-info">
    信息!请注意这个信息。
</div>

<div class="alert-success">
    成功!很好地完成了提交。
</div>

<div class="alert-warning">
    警告!请不要提交。
</div>

<div class="alert-danger">
    错误!请进行一些更改。
</div>

使用多个@extend

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important{
    font-weight: bold;
    font-size: 14px;
}

.alert-danger{
    @extend .alert;
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

@extend多层继承

上面的方式还可以写成

.alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important{
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}

.alert-danger{
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

占位符

你可能发现被继承的css父类并没有被实际应用,也就是说html代码中没有使用该类,它的唯一目的就是扩展其他选择器。

对于该类,可能不希望被编译输出到最终的css文件中,它只会增加CSS文件的大小,永远不会被使用。

这就是占位符选择器的作用。

占位符选择器类似于类选择器,但是,它们不是以句点(.)开头,而是以百分号(%)开头。

当在Sass文件中使用占位符选择器时,它可以用于扩展其他选择器,但不会被编译成最终的CSS。

之前的代码进行改写:

%alert{
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
.alert-info{
    @extend %alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    @extend %alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    @extend %alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    @extend %alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

编译后:

.alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }

.alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }

.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }

.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }

.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

从结果可以看到,没用alert类的样式生成,因为它根本没有用,所以此种情况用“占位符选择器”更合适

sass@extend指令的基本使用就是这些,对你有用的话,记得点赞哦~

来自:https://www.cnblogs.com/top8/archive/2022/08/03/16545890.html

链接: https://www.fly63.com/article/detial/11972

指令式编程 VS 声明式编程

指令式编程:告诉机器该如何做,并得到自己想要的结果。声明式编程:告诉机器您想得到什么,让机器自己计算该如何做。

vue内置指令大全_整理常用的Vue内置指令

整理vue常用的内置指令:v-bind指令、v-text指令、v- html指令、v-show指令、v-if指令、v-else 指令、v-else-if 指令、v-for 指令、v-on 指令、v-model 指令、v-once 指令、v-cloak指令、v-pre指令

如何在Vue里建立长按指令

本文将解释如何通过按下(或按住)按钮来执行功能和删除输入。首先,我将解释如何在VanillaJS中实现这一目标。然后,为它创建一个Vue指令。那么,让我们开始吧。

深入解析Vue.directive 自定义指令

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

VUE指令大全

v-text主要用来更新textContent,可以等同于JS的text属性。v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。

Vue中的全部指令

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

vue v-for 使用问题Error in render

今天使用v-for指令的时候遇到一个错误:[Vue warn]: Error in render: \\\"TypeError: Cannot read property \\\'children\\\' of undefined\\\",猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值

Vue.js 自定义指令使用场景及案例

使用场景:代码复用和抽象的主要形式是组件;当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令;但是,对于大幅度的 DOM 变动,还是应该使用组件

Vue中插槽指令

意义就是在组件里留着差值方便后续组件内容新增,而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量,组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

Vue常用指令

vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。Vue.js 使用了基于 HTML 的模板语法最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!