scss常用混入(mixin)、@inclue

@mixin和@inclue的基本使用
@mixin混入可以用于定义重复使用的样式,比如下面CSS代码

.header {display: flex;justify-content: center;align-items: center;width: 500px;height: 100px;
}.footer {display: flex;justify-content: center;align-items: center;width: 1400px;height: 50px;
}
@mixin center {display: flex;justify-content: center;align-items: center;
}.header {@include center;width: 500px;height: 100px;
}.footer {@include center;width: 1400px;height: 50px;
}
带参数的@mixin和@include
@mixin定义的样式支持接收外部参数,来作为内部样式的值,如下 @mixin flex($align,$justify)接收了两个参数$align,$justify并且这两个参数作为了混入样式align-item、justify-content的值。@mixin定义参数,需要通过@include来传递值,如下.header中@include flex(center,start)的center给@align,start给$justify,而这种传参方式是顺序传参,即传参顺序严格按照@mixin定义的参数顺序来。
@mixin flex($align,$justify) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex(center, start)}

@include指定传参
@include除了可以顺序传参外,还支持指定传参,即不按照@mixin定义的参数顺序传值

@mixin flex($align,$justify) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex($align:center, $justify:start)}

@mixin的参数默认值
当@mixin样式需要的入参较多时,一般会设置一些默认值,来减轻@include传参压力,即对于有默认值的参数,@include可以不传值

@mixin flex($align:center,$justify:center) {display: flex;align-items: $align;justify-content: $justify}.header{@include flex($justify:start)}

@mixin可变参数
有一些样式的值可以无穷传,比如backgroud:linear-gradient,此时我们无法通过手动定义无穷个@mixin参数来接收,需要使用可变参数来接收,可变参数和普通参数的区别在于,可变参数名字后面需要紧跟着三个点

@mixin bg($direct,$colors...) {background: linear-gradient($direct,$colors);}.header{@include bg(90deg,white,red,green,yellow,bule)}

上面代码中@mixin有两个参数, d i r e c t 是普通参数, direct是普通参数, direct是普通参数,colors是可变参数,当@include传参时,第一个参数90deg传给了 d i r e c t ,其余参数都传递给了 direct,其余参数都传递给了 direct,其余参数都传递给了colors。

@mixin的使用场景
多个样式类,如果具有重复的样式属性名,但是样式属性值不同,此时可以将这些重复的样式提取到混入@mixin中定义,可以有效的减少代码。

@mixin布尔写法
条件编译中的用法:我们可以在条件编译中使用布尔值。请看下面的例子,我们在 mixin 中传递了一个真值,这样@if 块将被编译。

@mixin button-format( $round-button, $size ) {color: white;background-color: blue;width: $size;@if $round-button {height: $size;border-radius: $size / 2; }
}
.mybutton {@include button-format(true, 100px);
}编译后的 CSS 文件:.mybutton {color: white;background-color: blue;width: 100px;height: 100px;border-radius: 50px;
}

一、常用混入
1、宽高

@mixin w-h($w: auto, $h: auto) {@if $w != auto {width: #{$w}rpx;} @else {width: auto;}@if $h != auto {height: #{$h}rpx;} @else {height: auto;}
}

2、字体

@mixin font($s: 24, $c: #444, $l: 24, $f: 400) {font-size: #{$s}rpx;color: #{$c};line-height: #{$l}rpx;font-weight: #{$f};font-family:PingFangSC-Regular,PingFang SC;
}

3、flex布局

@mixin flex($d: column, $j: normal, $a: normal) {display: flex;flex-direction: $d;justify-content: $j;align-items: $a;
}

在需要使用的地方@import引入scss文件以后使用@include使用混入:

@include w-h(100, 100);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/791141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux C++ 017-运算符重载

Linux C 017-运算符重载 本节关键字:Linux、C、运算符重载、匿名函数 相关库函数: 运算符重载的概念 对已有的运算符重新进行定义,赋予其另外一种功能,以适应不同的数据类型* 运算符重载可以发生函数重载 * 对于内置的数据类型…

动态规划详解(Dynamic Programming)

目录 引入什么是动态规划?动态规划的特点解题办法解题套路框架举例说明斐波那契数列题目描述解题思路方式一:暴力求解思考 方式二:带备忘录的递归解法方式三:动态规划 推荐练手题目 引入 动态规划问题(Dynamic Progra…

【并发编程系列】使用 CompletableFuture 实现并发任务处理

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Autodesk AutoCAD 2025 (macOS, Windows) - 自动计算机辅助设计软件

Autodesk AutoCAD 2025 (macOS, Windows) - 自动计算机辅助设计软件 AutoCAD 2024 开始原生支持 Apple Silicon,性能提升至 2 倍 请访问原文链接:https://sysin.org/blog/autodesk-autocad/,查看最新版。原创作品,转载请保留出处…

Golang | Leetcode Golang题解之第8题字符串转换整数atoi

题目&#xff1a; 题解&#xff1a; func myAtoi(s string) int {abs, sign, i, n : 0, 1, 0, len(s)//丢弃无用的前导空格for i < n && s[i] {i}//标记正负号if i < n {if s[i] - {sign -1i} else if s[i] {sign 1i}}for i < n && s[i] >…

SQL Server 存储过程:BBS论坛(表结构文档下载及30个存储过程)

基于 Asp.Net 和 SQL Server 实现了一个BBS论坛&#xff0c;论坛功能比较强大&#xff0c;论坛大部分业务逻辑基于存储过程实现&#xff0c;记录一下。 BBS论坛存储过程清单 序号存储过程功能说明1sp_bbs_admin_add添加管理员2sp_bbs_admin_del删除系统管理员3sp_bbs_admin_m…

Spark-Scala语言实战(9)

之前的文章中&#xff0c;我们学习了如何在spark中使用RDD方法的flatMap,take,union。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言实战&am…

【ESP32S3 Sense接入语音识别+MiniMax模型+TTS模块语音播报】

【ESP32S3 Sense接入语音识别MiniMax模型TTS模块语音播报】 1. 前言2. 功能模块概述2.1 语音接入2.2 大模型接入2.3 TTS模块接入 3. 先决条件3.1 环境配置3.2 所需零件3.3 硬件连接步骤 4. 核心代码4.1 源码分享4.2 代码解析 5. 上传验证5.1 对话测试5.2 报错 6. 总结 1. 前言 …

C语言杂谈

努力扩大自己&#xff0c;以靠近&#xff0c;以触及自身以外的世界 文章目录 什么是定义&#xff1f;什么是声明&#xff1f;什么是赋值&#xff1f;什么是初始化&#xff1f;什么是生命周期&#xff1f;什么是作用域&#xff1f;全局变量&#xff1f;局部变量&#xff1f;size…

HCIA-RS基础-VLAN路由

目录 VLAN 路由1. 什么是 VLAN 路由2. VLAN 路由的原理及配置3. VLAN 的缺点和 VLAN Trunking4. 单臂路由配置 总结 VLAN 路由 1. 什么是 VLAN 路由 VLAN 路由是指在虚拟局域网&#xff08;VLAN&#xff09;之间进行路由转发的过程。传统的 VLAN 配置只能在同一个 VLAN 内进行…

简单认识 node 包的幽灵依赖

幽灵依赖的概念与成因 在 Node.js 的包管理生态系统中&#xff0c;特别是使用 npm&#xff08;Node Package Manager&#xff09;作为包管理器时&#xff0c;“幽灵依赖”是指那些没有直接在项目的 dependencies 或 devDependencies 中显式声明&#xff0c;但却能够在项目的依…

LCD1602显示屏

LCD1602显示 概述 LCD1602&#xff08;Liquid Crystal Display&#xff09;是一种工业字符型液晶&#xff0c;能够同时显示 1602 即 32 字符(16列两行) 引脚说明 //电源 VSS -- GND VDD -- 5V //对比度 VO -- GND //控制线 RS -- P1.0 RW -- P1.1 E -- P1.4 //背光灯 A -- 5…

LLaMA-Factory+qwen多轮对话微调

LLaMA-Factory地址&#xff1a;https://github.com/hiyouga/LLaMA-Factory/blob/main/README_zh.md qwen地址&#xff1a;https://huggingface.co/Qwen/Qwen-7B-Chat/tree/main 数据准备 数据样例 [ {"id": "x3959", "conversations": [{&qu…

2024年150道高频Java面试题(十六)

31. Java 8 中引入的 Stream API 有哪些用途&#xff1f; Java 8 中引入的 Stream API 是一个强大的新特性&#xff0c;它提供了一种高效且易于使用的处理数据的方法。Stream API 的用途主要包括以下几个方面&#xff1a; 简化集合操作&#xff1a;Stream API 可以对集合对象…

在ChatGPT中,能用DALL·E 3编辑图片啦!

4月3日&#xff0c;OpenAI开始向部分用户&#xff0c;提供在ChatGPT中的DALLE 3图片编辑功能。 DALLE 3是OpenAI在2023年9月20日发布的一款文生图模型&#xff0c;其生成的图片效果可以与Midjourney、leonardo、ideogram等顶级产品媲美&#xff0c;随后被融合到ChatGPT中增强其…

matlab的歧视:simulink不能使用stm32f4系列的ADC?

2023b的matlab&#xff0c;stm32f407芯片&#xff0c;运行内容Using the Analog to Digital Converter Block to Support STMicroelectronics STM32 Processor Based Boards Using the Analog to Digital Converter Block to Support STMicroelectronics STM32 Processor Base…

基于SSM的社区疫情防控管理信息系统

目录 背景 技术简介 系统简介 界面预览 背景 随着时代的进步&#xff0c;计算机技术已经全方位地影响了社会的发展。随着居民生活质量的持续上升&#xff0c;人们对社区疫情防控管理信息系统的期望和要求也在同步增长。在社区疫情防控日益受到广泛关注的背景下&#xff0c…

【漏洞复现】通天星CMSV6车载主动安全监控云平台inspect_file接口处存在任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

电商技术揭秘一:电商架构设计与核心技术

文章目录 引言一、电商平台架构概述1.1 架构设计原则与架构类型选择1.2 传统电商平台架构与现代化架构趋势分析 二、高并发处理与负载均衡2.1 高并发访问特点分析与挑战2.2 负载均衡原理与算法选择 三、分布式数据库与缓存技术3.1 分布式数据库设计与一致性考量3.2 缓存策略与缓…

第四十二章 保护与 IRIS 的 Web 网关连接 - Windows

文章目录 第四十二章 保护与 IRIS 的 Web 网关连接 - WindowsKerberos 的 Windows Web 网关配置 Kerberos 的 UNIX Web 网关配置Kerberos 的 UNIX Web 网关配置基于 SSL/TLS 的身份验证和数据保护 第四十二章 保护与 IRIS 的 Web 网关连接 - Windows Kerberos 密钥表未针对 Wi…