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);
相关文章:
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…...
补代码随想录算法训练营第44天 | 完全背包、518. 零钱兑换 II 、377. 组合总和 Ⅳ
完全背包 视频讲解:带你学透完全背包问题! 和 01背包有什么差别?遍历顺序上有什么讲究?_哔哩哔哩_bilibili https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5…...
【Linux】网络基础常识{OSI七层模型/ TCP/IP / 端口号 /各种协议}
文章目录 1.网络常识1.0DHCP协议1. 1IP地址/MAC地址/ARP协议是什么?IP/MACARP:IP ⇒ MAC 1.2手机连接wifi的原理 SSID与BSSID手机连接wifiSSID与BSSID 1.3手机如何通过“数据/流量”上网?1.4电脑连接wifi的原理?电脑通过热点上网…...
python--面向对象编程和类的定义,对象的创建
一、面向对象简介 1、什么是面向对象 面向对象是一种编程思想,把数据和对数据的多个操作方法封装在一起组成类,这样通过这个类创建出来的对象,就可以直接调用这些方法了。 2、面向对象相关的术语 类:用来描述具有相同的属性和方法的对象的…...
nssm 工具把asp.net core mvc变成 windows服务,使用nginx反向代理访问
nssm工具的作用:把项目部署成Windows服务,可以在系统后台运行 1.创建一个asp.net core mvc的项目weblication1 asp.net core mvc项目要成为windows服务需要安装下面的nuget包 <ItemGroup><PackageReference Include"Microsoft.Extension…...
String Encryptor custom Bean not found with name ‘jasyptStringEncryptor‘...
项目采用 spring boot 2.6.13 jasypt-spring-boot-starter 3.0.5 apollo-client 1.6.0 自定义jasyptStringEncryptor,服务器上启动死活报找不到bean jasyptStringEncryptor,采用默认的,密文配置项自然解密失败导致服务无法启动。 经过一…...
FastAPI+React全栈开发14 FastAPI如何开发REST接口
Chapter03 Getting Started with FastAPI 14 How does FastAPI speak REST FastAPIReact全栈开发14 FastAPI如何开发REST接口 Let’s create a minial FastAPI application, a classic Hello World example, and start examining how FastAPI structures the endpoints. I u…...
在 DDD 中,如何处理领域对象的持久化?
在 DDD 中,领域对象的持久化工作通常是通过仓库 Repository 和工厂 Factory 实现的。仓库是一种用于访问领域对象的机制。他负责将领域对象从内存中保存到持久存储,如数据库中,以及从持久存储中检索领域对象。而工厂则负责从持久存储中组装领…...
centos 如何安装nvidia-container-runtime
在CentOS上安装nvidia-container-runtime,首先需要确保你的系统已经安装了NVIDIA的驱动和docker。以下是安装步骤: 确保Docker已安装: sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/lin…...
非写代码无以致远
标题党一下,本篇文章主要汇总了一些代码题,让大家写一些代码练习一下吧! 变种水仙花_牛客题霸_牛客网 (nowcoder.com) #include<stdio.h> int main() {for (int i 10000; i < 99999; i) {int sum 0;for (int j 10; j < 1000…...
刷题之Leetcode34题(超级详细)
34. 在排序数组中查找元素的第一个和最后一个位置 力扣链接(opens new window)https://leetcode.cn/problems/find-first-and-last-position-of-element-in-sorted-array/ 给定一个按照升序排列的整数数组 nums,和一个目标值 target。找出给定目标值在数组中的开始…...
从0到1构建uniapp应用-store状态管理
背景 在 UniApp的开发中,状态管理的目标是确保应用数据的一致性,提升用户体验,并简化开发者的工作流程。通过合理的状态管理,可以有效地处理用户交互、数据同步和界面更新等问题。 此文主要用store来管理用户的登陆信息。 重要…...
Uinx线程详解
目录 一.什么是线程? 并发(Concurrency) 并行(Parallelism) 1.1 线程的概念 1.2 线程的基本函数 1.3 线程的基本使用例子: 二.线程的属性 2.1线程属性使用例子 三.线程互斥 3.1互斥锁 3.2互斥锁常用函…...
线性代数笔记23--马尔可夫矩阵、傅里叶级数
1. 马尔可夫矩阵 例子 A [ . 1 . 001 . 3 . 2 . 099 . 3 . 7 0 . 4 ] A \begin{bmatrix} .1 & .001 & .3\\ .2 & .099 & .3\\ .7 & 0 & .4 \end{bmatrix} A .1.2.7.001.0990.3.3.4 马尔可夫矩阵满足条件 λ 1 为特征值 \lambda1为特征…...
Elasticsearch 压测实践总结
背景 搜索、ES运维场景离不开压力测试。 1.宿主机层面变更:参数调优 & 配置调整 & 硬件升级2.集群层面变更:参数调优3.索引层面变更:mapping调整 当然还有使用层面变更,使用API调优(不属于该文章的讨论范围…...
Spirngboot JWT快速配置和使用
2、JWT 2.1、JWT介绍 JWT是JSON Web Token的缩写,即JSON Web令牌,是一种自包含令牌。 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。 JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从…...
【Java SE】继承
🥰🥰🥰来都来了,不妨点个关注叭! 👉博客主页:欢迎各位大佬!👈 文章目录 1. 继承1.1 继承是什么1.2 继承的意义1.3 继承的语法1.4 继承的方式1.5 子类中访问父类成员1.5.1 子类中访问…...
设计模式(19):策略模式
策略模式 策略模式对应与解决某一个问题的一个算法族,允许用户从该算法族中任选一个算法解决某一问题,同时可以方便的更换算法或者增加新的算法。并且由客户端决定调用哪个算法。 本质 分离算法,选择实现; 策略模式角色 上下…...
Linux 命令 top 详解
1 top命令介绍 Linux系统中,Top命令主要用于实时运行系统的监控,包括Linux内核管理的进程或者线程的资源占用情况。这个命令对所有正在运行的进程和系统负荷提供不断更新的概览信息,包括系统负载、CPU利用分布情况、内存使用、每个进程的内容…...
Android安卓开发 - 简单介绍(一)
最近呢需要重构还有维护安卓项目,所以最近会从零开始梳理开发的一些知识点以及开发的内容 前面已经写了安装的教程,idea怎么安装,还有官方的开发工具Android Studio怎么安装 2024最新版Android studio安装入门教程(非常详细&…...
AJAX —— 学习(二)
目录 一、利用 JSON 字符串 返回数据 (一)基础代码 (二)原理及实现 二、nodmon 工具 自动重启服务 (一)用途 (二)下载 (三)使用 三、IE 缓存问题 &a…...
CSC博士联培申请时间线
暂时只记得这么多了,有问题会及时修改。 #mermaid-svg-ZMjY9etaS7StCVuw {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZMjY9etaS7StCVuw .error-icon{fill:#552222;}#mermaid-svg-ZMjY9etaS7StCVuw .e…...
大数据实验三-HBase编程实践
目录 一.实验内容 二.实验目的 三.实验过程截图及说明 1、安装HBase 2、配置伪分布式模式: 3、使用hbase的shell命令来操作表: 4、使用hbase提供的javaAPI来编程实现类似操作: 5、实验总结及心得体会…...
【Python】Pillow支持的图像文件格式
完全支持格式只读格式只写格式仅标识格式BLPCURPALMBUFRBMPDCXPDFGRIBDDSFITSXV ThumbnailsHDF5DIBFLCMPEGEPSFPXGIFFTEXICNSGBRICOGDIMIMTJPEGIPTC/NAAJPEG 2000MCIDASMSPMICPCXMPOPNGPCDPPMPIXARSGIPSDSPIDERQOITGASUNTIFFWALwebpWMF、EMFXBMXPM 参考文献 图像文件格式 - P…...
算法——最小生成树
Prim算法: 算法步骤: 1.选择一个起始节点作为最小生成树的起点。 2.将该起始节点加入最小生成树集合,并将其标记为已访问。 3.在所有与最小生成树集合相邻的边中,选择权重最小的边和它连接的未访问节点。 4.将该边和节点加入最小…...
OpenHarmony相机和媒体库-如何在ArkTS中调用相机拍照和录像。
介绍 此Demo展示如何在ArkTS中调用相机拍照和录像,以及如何使用媒体库接口进行媒体文件的增、删、改、查操作。 本示例用到了权限管理能力ohos.abilityAccessCtrl 相机模块能力接口ohos.multimedia.camera 图片处理接口ohos.multimedia.image 音视频相关媒体业…...
【EasyExcel】多sheet、追加列
业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务,需求就是多sheet,每个sheet导出不同结构,第一个sheet里面能够根据最后一列动态的追加列,追加多少得看运营人员传了多少需求列。原本使用的 pig4cloud 架子&…...
韩顺平 | 零基础快速学Python
环境准备 开发工具:IDLE、Pycharm、Sublime Text、Eric 、文本编辑器(记事本/editplus/notepad) Python特点:既支持面向过程OOP、也支持面向对象编程;具有解释性,不需要编程二进制代码,可以直…...
docker部署DOS游戏
下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…...
基于单片机的无线红外报警系统
**单片机设计介绍,基于单片机的无线红外报警系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的无线红外报警系统是一种结合了单片机控制技术和无线红外传感技术的安防系统。该系统通过无线红外传感器实…...
奇艺广州网站建设熊掌号/西安seo外包平台
是不是所有的项目都这么赶?我原先在福州的公司上班时每天加到12点多,有时候到3点半都有。现在在厦门的公司也是要天天加班,双休日几乎都没的休息了。听说后天如果不能全部走通就要通宵啦! 为什么项目都要这么赶呢?是…...
做电子芯片的有那些交易网站/优化大师免费下载安装
本文主要向大家介绍了VC编程之VS error C1083: 无法打开包括文件:“gl\glew.h”: No such file or directory\,通过具体的内容向大家展示,希望对大家学习VC编程有所帮助。大家在使用#include 时经常会出现下面的错误:error C1083: 无法打开包…...
比较大的做网站的公司/郑州seo优化顾问热狗
玩转大数据可视化,推荐几个必学的工具! 数据分析不是个事儿 百家号18-02-0915:14 如今,企业越来越重视数据分析给业务决策带来的有效应用,而可视化是数据分析结果呈现的重要步骤。而可视化技术/工具在国内国外也发展的相当成熟&…...
学习html 欣赏好的网站/软文广告怎么写
在微信后台设置自动回复时,你知道如何把网址变为超链接吗?如下图:图中,点击蓝色文字,将自动跳转到另一页面,说明自动回复中添加超链接成功。小编今日来解答这个看似高科技的问题!首先࿰…...
上海做兼职网站有吗/公众号seo排名软件
本工具用于快速求出通信中CRC16校验值,包括:1)CRC-16/DECT-R(别名:R-CRC-16)、2)CRC-16/DECT-X(别名:X-CRC-16)、3)CRC-16/GENIBUS(别名:CRC-16/EPC, CRC-16/I-CODE, CRC-16/DARC)、4)CRC-16/TMS37157、5)CRC-16/RIELL…...
wordpress分页出现404/友情链接建立遵循的原则包括
可以用抽象工厂模式来造车。 车的品牌有很多,而且车的属性也不少,比如车的类型、排量、门的数量,等等。可以提炼出有关车的一个抽象类: public abstract class Car{public string Model { get; set; }public string Engine { get;…...