如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的。但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义下面介绍 Sass 的混合宏。

1、声明混合宏

不带参数混合宏:

在 Sass 中,使用“@mixin”来声明一个混合宏。如:

@mixin border-radius {
-webkit-border-radius: 5px;
border-radius: 5px;
}

其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

带参数混合宏:

除了声明一个不带参数的混合宏之外,还可以在定义混合宏时带有参数,如:

@mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius;
border-radius: $radius;
}

Sass--混合宏--声明宏的更多相关文章

  1. [Sass]混合宏

    [Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...

  2. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  3. Sass 混合宏、继承、占位符 详解

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  4. [Sass]混合宏的参数

    [Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...

  5. SASS - 混合(Mixin)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  6. 关于word2016中mathtype无法使用以及“由于宏安全设置,无法找到宏或宏已被禁用”的解决方案

    版本描述: 系统:win10 64位 word: 2016版 32位 Mathtype: 6.9d (6.9b也出现相同问题,应该可以通过相同的方法解决) 问题描述: 自从在一次win10更新之后,w ...

  7. C 预编译 宏 声明

  8. sass(混合mixin的调用、@content)

    sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值.声明的@mixin通过@include来调用 1.无参数mixin scss.styl ...

  9. visual studio 配置属性中增加自定义宏和宏值

    visual studio中有一些预先定义的宏,用于配置项目属性,如SolutionDir.我们也可以自定义类似的宏,从而在配置包含目录(include)或添加依赖项时简化配置项. 如何创建自己的宏呢 ...

随机推荐

  1. python 文件读写操作打开模式

    ‘r’:只读.该文件必须已存在. ‘r+’:可读可写.该文件必须已存在,写为追加在文件内容末尾. ‘rb’:表示以二进制方式读取文件.该文件必须已存在. ‘w’:只写.打开即默认创建一个新文件,如果文 ...

  2. Linux下安装Tomcat(2)

    Tomcat是一个免费的开源的Serlvet容器,它是Apache基金会的Jakarta项目中的一个核心项目,由Apache,Sun和 其它一些公司及个人共同开发而成.由于有了Sun的参与和支持,最新 ...

  3. [CSP-S模拟测试]:Park(树上DP)

    题目描述 公园里有$n$个雕像,有$n-1$条道路分别连接其中两个雕像,任意两个雕像可以直接或间接相连.现在每个景点$i$聚集着$P_i$只鸽子,旅行家手里有$v$数量的面包屑. 一旦旅行家在雕像$i ...

  4. 阿里云服务器 Ubuntu 安装 LNMP

    1.设定实例化服务器IP密码. 2.设定安全组件端口 80 和 3306 系统默认提供端口 22. //阿里云需要设定安全组件端口必须设定. 3.安装一键lnmp系统. 教程地址 https://ln ...

  5. web storm查看文件结构

    菜单栏Navigate -> File Structure https://www.jetbrains.com/help/webstorm/viewing-structure-of-a-sour ...

  6. linux中awk 详解

    一.awk简介 awk是一个非常好用的数据处理工具,相对于sed常常作用于一整个行的处理,awk则比较倾向于一行当中分成数个[字段]处理,因此,awk相当适合处理小型的数据数据处理.awk是一种报表生 ...

  7. 从DBA_DDL_LOCKS视图获得DDL锁定信息

    http://liwenshui322.iteye.com/blog/1166934 DDL锁有三种: 1.排他DDL锁(Exclusive DDL lock):这会防止其他会话得到它们自己的DDL锁 ...

  8. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  9. 432D Prefixes and Suffixes

    题目大意 给你一个串 对于一个子串如果它既是前缀又是后缀 输出它的长度以及它在原串中一共出现了多少次 分析 对于既是前缀又是后缀的判断和126B相同 然后我们只需要记录每个不同的z[i]出现了多少次 ...

  10. 网路编程之socket与 socketserver、黏包

    socket与socketerver才是我们学习python中网络编程的重中之重在介绍他们两个之前我先介绍一些相关知识 一.socket 概念 咱们现在ois模型中找到socket所承担的角色 soc ...