【SASS/SCSS(三)】样式的复用与动态计算(@mixin和@function)

目录

一、@mixin

1、定义复用的样式代码,接受传参,搭配@include使用。

 位置传参

关键词传参

...语法糖接受传入的任意参数

2、在@mixin中使用@content,获取外部对mixin的追加内容

二、@function

三、字符串——值得注意的点

很多时候,我们在写样式的时候,会发现在同一套样式主题下,许多样式代码会被重复使用。在原生的css中,我们只能通过class和选择器的组合来尽量使得样式代码简洁。

在sass中,除了选择器的嵌套语法外,其提供的@mixin和@function可以实现高能的代码复用

接下来我们详细学习两者的使用。

一、@mixin

1、定义复用的样式代码,接受传参,搭配@include使用。

在下面的例子中,mixin中使用了 & 代替父选择器。而这个 & 指向的是@include样式引入所在位置的父选择器

但mixin中的参数声明时,使用了默认赋值,则其会变成可选参数,外面使用该mixin时设置了默认值的参数可不必要传入新的值

@mixin testStyle ($property,$value:2px , $color:#000) {
   //....
}


.outer {

  @include testStyle(font,3px)
}

mixin传参可接受的方式有 位置传参、关键词传参 以及 用...语法糖接受传入的任意参数组成列表

  •  位置传参

位置传参即如上所示,按照位置顺序一一传入相应的参数

  • 关键词传参

关键词传参,是在传入参数前,指定此时传入的参数对应的是哪个

@mixin testStyle ($property,$value:2px , $color:#000) {
   //....
}


.outer {

  @include testStyle(font,$color: #fff)
}

这种传参更加安全,尤其是在定义了默认可选参数时,传参可以不必拘泥于位置,而是直接通过关键词锁定。 

  • ...语法糖接受传入的任意参数

语法糖传入后,mixin中的args变成一个参数列表。注意,...跟在后面

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");


如果想将参数列表以 map 的形式访问,可以同时获取参数列表中的 key和value,可以用 meta.keywords()对参数列表进行转换。 示例如下:

//导入内置的meta
@use "sass:meta";

@mixin colors-customize($args...) {
    //用@debug控制台输出其返回值
    @debug meta.keywords($args);   
    //输出: (string: #080, comment: #800, variable: #60b)
    
    //用each遍历map的key和value
    @each $name,$color in meta.keywords($args) {
        div span.color-#{$name}{
            color: $color;
        }
    }
}



//引入mixin中定义的样式
@include colors-customize (
      $string: #080,
      $comment: #800,
      $variable: #60b,
)

2、在@mixin中使用@content,获取外部对mixin的追加内容

使用方法如下代码:

//写一段媒体查询的样式
@mixin media-query($types...) {
    @each $type in $types {
        //css语法中的@media媒体查询方法
        @media #{$type} {
            //外部内容块中使用了该作用域内定义的变量
            @content($type);
        }
    }
}


//用using引入变量
@include media-query(screen,print) using ($type) {
    h1{
        font-size: 40px;
        @if $type == print {
            font-family: Calluna;
        }
    }

}

二、@function

@function与@mixin不同的点在于:

  • @function不会直接被引用函数体内的内容,而是经过函数内部的计算,用@return返回需要使用的变量值
  • @function不需要借助@include,可以在声明后直接调用

@function也可以位置传参、关键词传参、默认值可选参数、接收参数列表等。因此这里仅仅对其使用举个示例:

除了自定义的函数外,sass提供一些内置函数,可被直接调用例如:var()、rgb()、radial-gradient(#f2ece4,#e1d7d2)等等 。

所有的内置模块以及内置全局函数,可查见于:Sass: Built-In Modules

三、字符串——值得注意的点

一般情况下,sass中符合scss语法的值,即使是字符串都不含有引号,作为关键字/标识直接使用。

但其实scss既支持有引号的字符串解析,又支持无引号的字符串,只是应用场景不同

两者的互换可以用内置模块string提供的unquote和quote函数来实现。

@use "sass:string";

@debug string.unquote(".widget:hover"); // .widget:hover
@debug string.quote(bold); // "bold"

另外,在#{ }传入变量时,变量中的字符串引号会被自动去掉。但不建议使用该方法去除字符串引号!

如果要保留引号,则直接传递即可: 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Doris]阿里云搭建Doris,测试环境1FE 1BE

首先:阿里云的国内服务器千万不要用容器搭建,或者自己Dockfile构建镜像。两种方式都不得行,压根拉不到github的镜像,开了镜像加速器也拉不到,不要折腾了,极其愚蠢。 背景:现在测试环境&#xff…

算法力扣刷题记录 五十六【501.二叉搜索树中的众数】

前言 二叉搜索树操作,继续。 记录 五十六【501.二叉搜索树中的众数】 一、题目阅读 给你一个含重复值的二叉搜索树(BST)的根节点 root ,找出并返回 BST 中的所有 众数(即,出现频率最高的元素)…

【BUG】已解决:zipfile.BadZipFile: File is not a zip file

已解决:zipfile.BadZipFile: File is not a zip file 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰,211科班出身,就职于医疗科技公司,热衷分享知识,武汉城市开发…

IAR环境下STM32+IAP方案的实现

--基于STM32F103ZET6的UART通讯实现 一、什么是IAP,为什么要IAP IAP即为In Application Programming(在应用中编程),一般情况下,以STM32F10x系列芯片为主控制器的设备在出厂时就已经使用J-Link仿真器将应用代码烧录了,如果在设备使…

Day16_集合与迭代器

Day16-集合 Day16 集合与迭代器1.1 集合的概念 集合继承图1.2 Collection接口1、添加元素2、删除元素3、查询与获取元素不过当我们实际使用都是使用的他的子类Arraylist!!! 1.3 API演示1、演示添加2、演示删除3、演示查询与获取元素 2 Iterat…

ros笔记03--从零体验ros2话题通信方式

ros笔记03--从零体验ros2话题通信方式 介绍创建步骤体验官方 talker listener 案例基于python开发发布订阅案例 注意事项说明 介绍 主题是 ros2 提供的三种主要接口方式之一,它通常被用于连续的数据流,如传感器数据、机器人状态等。 ros2 是一个强类型的…

Artix7系列FPGA实现SDI视频编解码+UDP以太网传输,基于GTP高速接口,提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本博已有的以太网方案本博已有的FPGA图像缩放方案本方案的缩放应用本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用 3、详细设计方案设计原理框图SDI 输入设备Gv8601a 均衡…

SAP Fiori 实战课程(二):新建页面

课程回顾 上一课中,利用Visual studio Code 新建、并运行了一个Demo工程。可以实现对项目的启动,启动后进入一个List清单。 那么本次课程的目前就是在上一节Demo的基础上,从零开始新建一个完整的页面。实现从首页清单,选择行后,鼠标点击,进入下一个页面。 准备工作 在开…

【20】读感 - 架构整洁之道(二)

概述 继上一篇文章讲了前两章的读感,已经归纳总结的重点,这章会继续跟进的看一下,深挖架构整洁之道。 编程范式 编程范式从早期到至今,提过哪些编程范式,结构化编程,面向对象编程,函数式编程…

想要获客如有神助攻,宝藏工具必不可少!

现如今,客户资源的收集和管理成为了一个让很多人都为之烦恼的问题。 然而,随着科技的进步,市场上出现了许多高效的宝藏工具,可以帮助你轻松解决这些问题,让获客如有神助攻! 1、丰富的客户来源 无论是附近…

TypeScript体操(二):Utility Type手写实现

目录 前言常用 Utility Types 及其实现Partial<T>Required<T>Readonly<T>Pick<T, K>Omit<T, K>Record<K, T>Exclude<T, U>Extract<T, U>NonNullable<T>ReturnType<T>InstanceType<T>Parameters<T>Con…

synergy配置

今天介绍一个电脑同步软件synergy。 我们开发时一般会用两套设备&#xff0c;如果使用两套键盘操作起来会很麻烦&#xff0c;这个软件就是解决这个问题&#xff0c;可以使用一套键盘同时操作两台电脑&#xff0c;另一台作为客户端被控制。 安装 在两台电脑上各自下载安装syne…

沃文特过会两年仍在注册:营收净利润下滑,三次抽查不合格

《港湾商业观察》施子夫 王璐 在当前IPO严查之际&#xff0c;部分企业的上市进程可谓相当漫长&#xff0c;四川沃文特生物工程股份有限公司&#xff08;以下简称&#xff0c;沃文特&#xff09;就是其中之一。 不过&#xff0c;最近的好消息是&#xff0c;沃文特又更新了招股…

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…

【BUG】已解决:TypeError: Descriptors cannot not be created directly.

已解决&#xff1a;TypeError: Descriptors cannot not be created directly. 目录 已解决&#xff1a;TypeError: Descriptors cannot not be created directly. 【常见模块错误】 【错误原因】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来…

谷粒商城实战笔记-46-商品服务-API-三级分类-配置网关路由与路径重写

文章目录 一&#xff0c;准备工作1&#xff0c;新增一级菜单2&#xff0c;新增二级菜单 二&#xff0c;前端树形界面开发1&#xff0c;开发分类展示组件 本节的主要内容&#xff1a; 前端调用三级分类接口&#xff0c;并树形展示 一&#xff0c;准备工作 启动product服务启动…

【开源库学习】libodb库学习(三)

4 查询数据库 如果我们不知道我们正在寻找的对象的标识符&#xff0c;我们可以使用查询在数据库中搜索符合特定条件的对象。ODB查询功能是可选的&#xff0c;我们需要使用--generate-query ODB编译器选项显式请求生成必要的数据库支持代码。 ODB提供了一个灵活的查询API&#x…

RPM、YUM 安装 xtrabackup 8 (mysql 热备系列一)包含rpm安装 mysql 8 配置主从

RPM安装 percona-xtrabackup-80-8.0.35-30.1.el7.x86_64.rpm 官网&#xff1a; https://www.percona.com/ 下载地址&#xff1a; https://www.percona.com/downloads wget https://downloads.percona.com/downloads/percona-distribution-mysql-ps/percona-distribution-mysq…

接口测试JMeter-1.接口测试初识

第一章 接口测试初识 1. 接口测试理论基础 “接口测试”一个让人觉得非常高大上的名词&#xff0c;特别是对于刚入门的测试同学而言。随着测试技术不断的深化&#xff0c;“接口测试”出现在我们视野中的频次越来越高。那么接口测试到底是如何做的&#xff1f;接口测试的优势又…

《简历宝典》17 - 简历中“技术能力”,如何丰满且有层次,前端篇

这一节开始对技术能力模块做讲解&#xff0c;我们身边的这些互联网IT从业者们&#xff0c;前端开发、Java开发、软件测试又或者是其他职位的开发者们&#xff0c;技术能力这个模块是绕不过去的&#xff0c;从简历上看&#xff0c;这个模块体现了我们之前软件工作生涯中的技术功…