当前位置: 首页 > news >正文

Sass @mixin 与 @include

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入(mixin)引入到文档中。


定义一个混入

混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }

以下实例创建一个名为 "important-text" 的混入:

Sass 代码:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

注意:Sass 的连接符号 - 与下划线符号 _ 是相同的,也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。

使用混入

@include 指令可用于包含一混入:

Sass @include 混入语法:

selector {
  @include mixin-name;
}

因此,包含 important-text 混入代码如下:

实例

.danger {
  @include important-text;
  background-color: green;
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

混入中也可以包含混入,如下所示:

实例

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}


向混入传递变量

混入可以接收参数。

我们可以向混入传递变量。

定义可以接收参数的混入:

实例

/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入,并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入,并传递两个参数
}

以上实例的混入参数为设置边框的属性 (color 和 width) 。

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

混入的参数也可以定义默认值,语法格式如下:

实例

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

在包含混入时,你只需要传递需要的变量名及其值:

实例

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

可变参数

有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 ... 来设置可变参数。

例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数。

实例

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}


浏览器前缀使用混入

浏览器前缀使用混入也是非常方便的,如下实例:

实例

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

将以上代码转换为 CSS 代码,如下所示:

Css 代码:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

相关文章:

Sass @mixin 与 @include

Sass mixin 与 include mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 include 指令可以将混入(mixin)引入到文档中。 定义一个混入 混入(mixin)通过 mixin 指令来定义。 mixin name { property: value; property: value; ... } 以…...

ROS——Teb算法的优化

一、简介 “TEB”全称Time Elastic Band(时间弹性带)Local Planner,该方法针对全局路径规划器生成的初始轨迹进行后续修正(modification),从而优化机器人的运动轨迹,属于局部路径规划。 关于eletic band(橡…...

java+ssm 社区超市网上商城果蔬(水果蔬菜)管理系统

在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括超市果蔬管理系统的网络应用,在外国超市果蔬管理系统已经是很普遍的方式,不过国内的超市果蔬管理系统可能还处于起步阶段。超市果蔬管理系统具有果蔬管…...

igh主站搭建过程(e1000e 网卡/ generic网卡)

1、下载igh源码 garyjxes:~$ git clone https://gitlab.com/etherlab.org/ethercat.git 2、配置(可参考官方文档) garyjxes:~/Xenomai/xenomai-v3.2.1$ sudo cp …/…/ethercat/ . -r garyjxes:~/Xenomai/xenomai-v3.2.1/ethercat$ sudo ./bootstrap to…...

K8S第一讲 Kubernetes之Secret详解

Secret详解 secret用来保存小片敏感数据的k8s资源,例如密码,token,或者秘钥。这类数据当然也可以存放在Pod或者镜像中,但是放在Secret中是为了更方便的控制如何使用数据,并减少暴露的风险。 用户可以创建自己的secre…...

每周一算法:高精度减法

高精度减法 高精度减法是采用模拟算法对上百位甚至更多位的整数进行减法运算,其基本思想是模拟竖式计算,一般分为下面几步: 首先,使用数组存储大整数的每一个位然后,判断被减数和减数的大小关系: 如果被减数大于等于减数,结果为非负数,直接计算差否则,结果为负数,先…...

Session使用和原理分析图与实现原理-- 代码演示说明 Session 的生命周期和读取的机制代码分析

目录 Web 开发会话技术 -Session —session 技术 session 基本原理 Session 可以做什么 如何理解 Session Session 的基本使用 session 底层实现机制 原理分析图 代码演示 CreateSession.java 测试 Session 创的机制, 注意抓包分析​编辑 ReadSession.j…...

在win10系统中安装anaconda

1、 Anaconda的下载 你可以根据你的操作系统是32位还是64位选择对应的版本到官网下载,但是官网下载龟速。 建议到清华大学镜像站下载 :Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source MirrorIndex of /anaconda/archiv…...

【菜鸡读论文】Cross-domain Named Entity Recognition via Graph Matching

【菜鸡读论文】Cross-domain Named Entity Recognition via Graph Matching 最近到了研一下学期,很多身边的同学也开始有了成果,但本菜鸡一点成果都没有【大哭】所以也没什么好写的。虽然菜鸡口头上不说,但内心也感受到非常之焦虑。最近读论…...

代码随想录算法训练营第三十五天|860.柠檬水找零、406.根据身高重建队列、452. 用最少数量的箭引爆气球

文章目录 860.柠檬水找零406.根据身高重建队列452. 用最少数量的箭引爆气球:star: 860.柠檬水找零 链接:代码随想录 5美元相当滴珍贵 解题思路: 情况一:账单是5,直接收下。 情况二:账单是10,消耗一个5,增加…...

爬虫为什么需要多线程

多线程爬虫是一种同时运行多个线程来提高爬取速度的爬虫方式。通过将大量的工作分配给不同的线程,可以减少爬虫的运行时间,提高效率。不过需要注意的是,在爬取过程中需要合理的管理线程数,以避免对被爬取的网站造成过大的负荷。 …...

下一代智能座舱风口下,“超级”Tier 1强势崛起

智能座舱进入全新周期,强者愈强的趋势会快速显现。 可以观察到,智能座舱功能日趋多元化。从多屏互动到舱内全场景多元交互,到更多娱乐平台的上线,智能座舱已经从最初的重多功能转变成重体验。 从架构层面来看,各个功…...

第 三 章 UML 类图

文章目录 前言一、依赖关系(虚线箭头)二、泛化关系:继承(实线空心箭头)三、实现关系(虚线空心箭头)四、关联关系(一对一为实线箭头,一对多为实线)五、聚合关系…...

java版工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离 功能清单

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下: 首页 工作台:待办工作、消息通知、预警信息,点击可进入相应的列表 项目进度图表:选择(总体或单个)项目显示…...

内网穿透实现在外远程连接RabbitMQ服务

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 转载自远控源码文章:无公网IP&#xff…...

抖音数字人主播app

抖音数字人主播app是指一款利用计算机生成的虚拟数字人,在抖音平台上进行实时音视频传输和互动的应用程序。该软件可以让用户创建自己的虚拟数字人,并在抖音平台上进行实时互动和交流。 抖音数字人主播app通常需要包含以下功能: 3D建…...

亚马逊平台使用API接口通过关键字搜索商品

亚马逊公司(Amazon,简称亚马逊;NASDAQ:AMZN),2022年营收为5140亿美元, 是美国最大的一家网络电子商务公司,位于华盛顿州的西雅图。是网络上最早开始经营电子商务的公司之一&#xff…...

《花雕学AI》用ChatGPT创造猫娘角色:人工智能角色扮演聊天对话的风险与对策

出于好奇心,我以“ChatGPT,调教猫娘”为题,开始了解ChatGPT角色扮演提示语的用法。ChatGPT给出的介绍是,调教猫娘是一种利用ChatGPT的角色扮演功能,让模型模仿一种类似猫的拟人化生物的行为和语言的活动,并…...

软件测试常规测试过程模型——V模型与X模型

一、V模型简单介绍及讲解 V模型是软件测试过程模型中最广为人知的模型,尽管很多富有实际经验的测试人员还是不太熟悉V模型,或者其它的模型。V模型中的过程从左到右,描述了基本的开发过程和测试行为。V模型的价值在于它非常明确地标明了测试过…...

feign-starter

使用说明 功能 自动装配 设置客户端不主动重试日志打印客户端负载均衡json 转换使用 JacksonUtil 如何引入 com.hete.support xx-feign-starter 如何配置 超时时间 ⚠️ 默认值比较大,需要手动根据实际场景设置 feign: client: config: # 默认配置,…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

uniapp中使用aixos 报错

问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

C++使用 new 来创建动态数组

问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1)下载安装包2)配置环境变量3)安装镜像4)node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1)使用 http-server2)详解 …...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下&#xf…...