sass学习笔记--混合宏

Wildcard 发布于2019-08-29 12:45 / 501人阅读

摘要：申明混合宏不带参数混合宏在中，使用来声明一个混合宏。如其中是用来声明混合宏的关键词，有点类似中的一样。是混合宏的名称。

什么时候使用混合宏

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

申明混合宏 不带参数混合宏：

在 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 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

调用混合宏

在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

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

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：

button {
    @include border-radius;
}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

GPU云服务器云服务器 sass 混合云部署学习笔记学习笔记一基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112121.html

sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

摘要：输出的是这样的可以看到，当用继承的样式时，和也完全套用了的样式，而且你会发现，规则并没有被重复输出，而且这样的方式更符合我们对于这几个选择器的认知如果你之前用过面向对象编程的话。 Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，知道sass用来干什么，有什么作用，我们才能相信用sass的好处，并且时时刻刻想着sass的设...

xiaolinbang 2019-08-30 13:10 评论0 收藏0
CSS外挂：Sass 之混合宏(@mixin)、继承(@extend)、占位符(%placehold

摘要：普遍情况下这仨在实际项目中用得还是比较多的，玩起来吧混合宏如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。不足如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。学习Sass无非就是想高效的、面向对象编写CSS，Sass中的@-Rules也是重要的一部分。普遍情况下这仨在实际项目中用得还是比较多的，玩起来吧！ 1. 混合宏@mixin 如果你的...

or0fun 2019-08-30 12:54 评论0 收藏0
css预编译--sass基础篇

摘要：变量声明和调用这是的编程元素基础之一。如下在最外层声明的是全局变量，全局范围内可以调用，在中声明的是的局部变量，只在内部内进行调用。生成的如下上面的内容就是的基础篇，进阶篇的话会整理一下函数和方法规则相关的东西。 sass起源和简介 css 其实不是一门编程语言， css 全称 Cascading Style Sheets (层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应...

keithyau 2019-08-29 15:23 评论0 收藏0
vue入门文章

摘要：本来想自己写一篇关于入门的文章。后面可能在这篇文章基础上，有所内容的增加。预处理器定义了一种新的专门的编程语言，编译后成正常的文件。本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏...

seanHai 2019-08-29 17:06 评论0 收藏0
从sass到PostCSS

摘要：下面是头部的样式示例这是一个用例我在之前了解过自定义属性的用法。这里有一个正在进行中的规则的规范与之相关。允许储存一系列的属性并且在选择器引用。原文链接：https://tylergaw.com/articles...译者：Icarus邮箱：xdlrt0111@163.com 多年来我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件来尝试处理样式.我爱死了现...

Backache 2019-08-30 15:52 评论0 收藏0