如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 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. http各个状态码的含义

    http各个状态码的含义:由三位数字组成,第一位定义了状态码的类型 常见状态码及解决方法 404:找不到,地址错误 500:逻辑错误 400:一般是入参不匹配 504:超时 2开头:(请求成功)表示成 ...

  2. sts创建maven项目 引入spring,报错

    症状: Missing artifact org.springframework:spring-core:jar:5.0.0.RC3 原因: 在引入之前没有设置spring版本号 和spring ur ...

  3. Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》

    当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用户访问时是通过如http://www.XX.com的方式访问,在请求时,浏览器首先会查询DNS服务 ...

  4. python 使用xlsxwriter的方法属性

    http://xlsxwriter.readthedocs.io/format.html

  5. 阿里云不支持stmp 的25端口,必须

    第一种方法 到阿里云解封25端口 特别注意阿里云的<25端口使用服务协议>:    我/我公司承诺并保证TCP 25端口仅用来连接第三方的SMTP服务器,从第三方的SMTP服务器外发邮件. ...

  6. 《图解设计模式》读书笔记2-2 Factory Method模式

    目录 类图 代码 角色介绍 思想 类图 代码 //产品类,任意可"use"的产品都可继承该类 public abstract class Product { public abst ...

  7. Python笔记(十八)_私有属性、实例属性、类属性

    私有属性 如果要让内部属性不被外部访问,可以把属性的名称前加上两个下划线__,就变成了一个私有属性,只有内部可以访问,外部不能直接访问或修改. 这样就确保了外部代码不能随意修改对象内部的状态,这样通过 ...

  8. Git011--分支管理策略

    Git--分支管理策略 一.分支管理策略 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,G ...

  9. Spring Security 04

    转至:Elim的博客http://elim.iteye.com/blog/2161648 Filter Porxy DelegatingFilterProxy DelegationFilterProx ...

  10. Java中的容器(集合)之HashMap源码解析

    1.HashMap源码解析(JDK8) 基础原理: 对比上一篇<Java中的容器(集合)之ArrayList源码解析>而言,本篇只解析HashMap常用的核心方法的源码. HashMap是 ...