如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 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. Java 输入输出图片文件的简单方式

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStrea ...

  2. Django2 + ORM 做一个简单的登陆

    . ├── db.sqlite3 ├── manage.py ├── myormLogin │   ├── __init__.py │   ├── __pycache__ │   │   ├── __ ...

  3. Linux内核设计与实现 总结笔记(第四章)进程调度

    进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间. 调度程序没有太复杂的原理,最大限度地利用处理器时间的原则是,只要有可以执行的进程,那么就总会有进程正在执行. 一.多任务 多任 ...

  4. LR分析Analysis火车票

    一.分析结果 1 研究 Vuser 的行为(F:\JMeter\0Tutorial-SCR\机票预订\机票_analysis-session) 筛选该图,仅查看所有 Vuser 同时运行的时间段 右键 ...

  5. MyBatis3学习笔记(曹锋老师版)

    第2讲 这一讲主要讲解了 Mybatis 的主配置文件. 下面是一个示例的配置文件: <?xml version="1.0" encoding="UTF-8&quo ...

  6. app中使用

    KeepLive.startWork(this, KeepLive.RunMode.ROGUE, ForegroundNotification("Title", "mes ...

  7. Linux shell 归纳之 last

    使用方法: 格式1:last -n n指定账号数量,最新前n个登陆信息(用户,终端,IP, 日期,时间和持续时间) 格式2:last -n <number of the latest accou ...

  8. mui初级入门教程(一)— 小白入手mui的学习路线

    文章来源:小青年原创发布时间:2016-05-15关键词:mui,html5+转载需标注本文原始地址:http://zhaomenghuan.github.io/#!/blog/20160515 写在 ...

  9. selenium设定请求头

    如果只是需要设定User-Agent可以用如下所示方式 dcap = dict(DesiredCapabilities.PHANTOMJS)dcap["phantomjs.page.sett ...

  10. Jenkins使用二:新建任务

    准备一个用于测试脚本,就打印hello world 新建job 配置: 添加步骤 立即构建