百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

Sass 延伸 sas扩展口

yuyutoo 2024-10-12 00:00 12 浏览 0 评论

本节我们学习 Sass 中的延伸，也可以理解为继承。在 Sass 中，我们可以通过 @extend 指令来实现将一个选择器中的样式继承到另一个选择器中。特别是当选择器中样式几乎差不多，只有一点区别的时候，使用 @extend 就很有用啦。

延伸的使用

下面我们来通过一个例子看一下延伸的具体使用。

例如我们在网页中是不是经常会看到有不同颜色的按钮呀，这些按钮除了背景颜色不同，其他样式都几乎一样。这种情况下，我们肯定不会重复定义多个样式，而是单独定义一个公共样式，再分别定义不同颜色样式属性。

示例

例如我们通过继承来创建三个不同颜色的按钮，分别为红色、绿色、蓝色：

.btn {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    border: none;
    color: #fff;
}
.red-btn{
    @extend .btn;
    background-color: red;
}
.green-btn{
    @extend .btn;
    background-color: green;
}
.blue-btn {
    @extend .btn;
    background-color: blue;
}

我们首先定义了一个 .btn 选择器，这个选择器中是所有按钮的共用样式。然后我们根据需要分别定义了三个不同背景颜色的样式，来继承这个 .btn 选择器，这需要使用到 @extend 指令。在 Sass 中，同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器。

然后我们可以看一下编译后的 CSS 代码，如下所示：

.btn, .red-btn, .green-btn, .blue-btn {
  width: 100px;
  height: 40px;
  border-radius: 8px;
  border: none;
  color: #fff;
  font-size: 16px;
}
.red-btn {
  background-color: red;
}
.green-btn {
  background-color: green;
}
.blue-btn {
  background-color: blue;
}

HTML 部分的代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sass学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div>
            <button class="red-btn">红色按钮</button>
            <button class="green-btn">绿色按钮</button>
            <button class="blue-btn">蓝色按钮</button>
        </div>
    </body>
</html>

在浏览器中的演示效果：

当然如果是在 CSS 中，没有延伸，我们也可以实现上述效果，只需要在 HTML 标签中添加一个 .btn 选择器即可。

<button class="btn red-btn">红色按钮</button>
<button class="btn green-btn">绿色按钮</button>
<button class="btn blue-btn">蓝色按钮</button>

延伸复杂的选择器

在 Sass 中，除了可以延伸类选择器，Sass 还允许延伸任何定义给单个元素的选择器。

示例：

例如我们可以在一个样式类中延伸 a:hover ：

a:hover{
    color: #eb8258;
}
.xkd{
    @extend a:hover;
    font-size: 14px;
}

编译成 CSS 代码：

a:hover, .xkd {
  color: #eb8258;
}

.xkd {
  font-size: 14px;
}

继续延伸

当一个选择器延伸给第二个选择器后，可以继续将第二个选择器延伸给第三个选择器。

示例：

.one{
    font-size: 14px;
}
.two{
    @extend .one;
    color: #ccc;
    border: 1px solid #000;
}
.three{
    @extend .two;
    background-color: #fefefe;
}

编译成 CSS 样式：

.one, .two, .three 
  font-size: 14px;
}

.two, .three {
  color: #ccc;
  border: 1px solid #000;
}

.three {
  background-color: #fefefe;
}

我们使用 .two 选择器继承 .one 选择器，这样 .two 中就有了 .one 选择器中的样式。然后又使用 .three 继承 .two 选择器，这样 .three 同时有了 .one 和 .two 选择器中的样式。

相关推荐

VBA中利用Instr函数（vba int函数）

【分享成果，随喜正能量】每一个在你的生命里出现的人，都有原因，喜欢你的人给了你温暖和勇气，你喜欢的人让你学会了爱和自持，你不喜欢的人教会你宽容与尊重，不喜欢你的人让你自省与成长。。...

Insta360 Link体验:支持4K画质，一款使用场景丰富的AI云台摄像头

记者｜王公逸伴随直播、线上会议需求的兴起，网络直播的需求愈发增大，8月2日，影石Insta360正式推出全新产品：Insta360Link，这是一款AI智能云台摄像头。从产品形态来说，Insta3...

VBA技术资料MF299:利用Instr进行文本查找

我给VBA的定义：VBA是个人小型自动化处理的有效工具。利用好了，可以大大提高自己的工作效率，而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套，分为初级、中级、高级三大部分，教程是对VB...

Fabric.js 拖放元素进画布 - 掘金

本文简介点赞+关注+收藏=学会了学习Fabric.js，我的建议是看文档不如看demo。本文实现的功能：将元素拖进到画布中并生成对应的图形或图片。效果如下图所示：...

Vue3为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...

Fabric.js 样式不更新怎么办?（js更改样式）

本文简介带尬猴，我嗨德育处主任不知道你有没有遇到过在使用Fabric.js时无意中一些骚操作修改了元素的样式，但刷新画布却没更新元素样式？如果你也遇到同样的问题的话，可以尝试使用本文的方法。...

Fabric.js 修改画布交互方式到底有什么用?

本文简介点赞+关注+收藏=学会了fabric.js为我们提供了很多厉害的方法。今天要搞明白的一个东西是canvas.interactive。官方文档对canvas.interact...

Rust Web编程:第五章 在浏览器上显示内容

我们现在正处于可以构建一个Web应用程序的阶段，该应用程序可以使用不同的方法和数据管理一系列HTTP请求。这很有用，特别是当我们为微服务构建服务器时。然而，我们也希望非程序员能够与我们的应...

Fabric.js 自由绘制椭圆 - 掘金（canvas画椭圆）

本文简介点赞+关注+收藏=学会了本文讲解在Fabric.js中如何自由绘制椭圆形，如果你还不了解Fabric.js，可以查阅《Fabric.js从入门到精通》。效果如下图所示...

手把手教你实现JS手搓&quot;防抖&quot;优化代码——专业的事用专业的方法!

前言在我们前端编程中，假如我们要给后端发送请求，万一手抖多点了几次，多发送了几遍怎么办？解决方案：防抖！这种事就要交给我们专业的“防抖”先生来处理！今天，我们就来教大家手搓“防抖”...

详解虚拟DOM与Diff算法（虚拟dom一定比实际dom快吗）

vue的虚拟DOM,Diff算法，其中一些关键的地方从别处搬运了一些图进行说明(感谢制图的大佬)，也包含比较详细的源码解读。...

走进 React Fiber 的世界（我走进你的世界手势舞视频）

文/阿里淘系F(x)Team-冷卉Fiber设计思想Fiber是对React核心算法的重构，facebook团队使用两年多的时间去重构React的核心算法，在React16以上...

前端新一代框架 Svelte 火了!十个场景带你简单认识它!

近几年听到的主流框架都是Vue、React、Angular，但其实有一个框架在国外非常火，用起来也是很方便，那就是...

借助DeepSeek实现了一个PDF阅读器

1、简介使用pdf.js库加载和显示PDF文件。实现了翻页、缩放功能。提供了基本的错误处理。功能特点：支持选择本地PDF文件。可以逐页查看PDF内容。支持放大缩小功能。界面简洁，易于使...

DeepSeek代码之旅1:卫星地图标记方法之——html语言的实现

最近遇到一个任务，具体功能如下：1、调用高德地图API，图层为卫星图层，根据需要标记兴趣点；2、标记完成后可以保存兴趣点，便于下次加载历史兴趣点。...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表