SASS详解之混合(mixins)可以出现在SASS的任何地方。有很多类名具有相同或者相似的样式,就可以用SASS中的混合(mixins)来进行编写,然后针对不同类名的不同样式逐一编写。

  定义一个混合(mixins)

  一个混合(mixins)中有专属于自己的名字,有专属于自己的属性和样式。如下

  SASS代码

  1. @mixin firstMixin {
  2. width:10px;
  3. height:20px;
  4. }

  上面仅仅是一个很简单的混合(mixins),仅仅包括了一些属性和属性值。混合(mixins)还可以有选择器,也可以后父级引用。如下

  SASS代码

  1. @mixin firstMixin {
  2. .m_clear {
  3. zoom:1;
  4. &:after {
  5. content:"";
  6. display:block;
  7. clear:both;
  8. }
  9. }
  10. }

  使用一个混合(include)

  现在大家已经会定义一个混合(mixins),一定想知道怎么调用它吧。那么就看个小例子吧。

  SASS代码

  1. @mixin firstMixin {
  2. .m_clear {
  3. zoom:1;
  4. &:after {
  5. content:"";
  6. display:block;
  7. clear:both;
  8. }
  9. }
  10. }
  11. div {
  12. @include firstMixin;
  13. }

  编译后的CSS代码

  1. div .m_clear {
  2. zoom: 1;
  3. }
  4. div .m_clear:after {
  5. content: "";
  6. display: block;
  7. clear: both;
  8. }

  上面的小例子是针对混合(mixins)中带有选择器的。不难看出,这个编译后的CSS中div中的类名clear具有混合(mixin)中的样式。而下面的例子,就是混合(mixin)中只有样式没有选择器的小例子。

  SASS代码

  1. @mixin twoMixin {
  2. width:200px;
  3. height:200px;
  4. }
  5. div {
  6. @include twoMixin;
  7. }

  编译后的CSS代码

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. }

  混合(mixin)中定义的样式,哪个选择器引用了,就为其增加了混合(mixin)中的样式。若混合(mixin)中有选择器,那么就在其引用的选择器子集中添加相应的属性。再看个混合中引用混合的例子。

  SASS代码

  1. @mixin twoMixin {
  2. width:200px;
  3. height:200px;
  4. }
  5. @mixin threeMixin {
  6. <pre name="code" class="plain"> @include twoMixin;
  7. </pre>  border:1px solid red;}div {@include threeMixin;}

  编译后的CSS代码

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. border: 1px solid red;
  5. }

  混合(mixin)中的参数

  混合(mixin)中也可以设置参数,这可以让我们实现相似样式的共同编写。只需要在混合的名字后面添加变量名即可实现。如下

  SASS代码

  1. @mixin fourMixin ($width) {
  2. width : $width;
  3. }
  4. div {
  5. @include fourMixin(20px);
  6. }

  编译后的CSS代码

  1. div {
  2. width: 20px;
  3. }

  很简单的用法,很实用的功能。那么这么实用的功能,有没有默认参数值呢?想知道的话就看看下面的小例子吧。

  SASS代码

  1. @mixin fourMixin ($width : 3000px) {
  2. width : $width;
  3. }
  4. div {
  5. @include fourMixin(20px);
  6. }
  7. span {
  8. @include fourMixin();
  9. }

  编译后的CSS代码

  1. div {
  2. width: 20px;
  3. }
  4. span {
  5. width: 3000px;
  6. }

  混合(mixin)中的关键词参数

  

  所为关键词参数,就是在调用混合(mixin)的时候,写上参数的名称,编译出来的是一样的,这样写的好处就是方便开发者阅读。例子如下。

  SASS代码

  1. @mixin fourMixin ($width : 3000px) {
  2. width : $width;
  3. }
  4. div {
  5. @include fourMixin($width :20px);
  6. }

  编译后的CSS代码

  1. div {
  2. width: 20px;
  3. }

  混合(mixin)中的可变关键词

  有时候在编写混合(mixin)的时候,遇到的参数是不详的,不知道有多少,不知道应该设多少才好。具体使用的例子如下。

  SASS代码

  1. @mixin boxShadow($shadows...) {
  2. -moz-box-shadow: $shadows;
  3. -webkit-box-shadow: $shadows;
  4. box-shadow: $shadows;
  5. }
  6. div {
  7. @include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
  8. }

  编译后的CSS代码

  1. div {
  2. -moz-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
  3. -webkit-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
  4. box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
  5. }

  这么人性化的可变参数不仅可以用在定义混合(mixin)中,也可以运用在使用过程中。实例如下。

  SASS代码

  1. $myArguments : red, 14px, 400px, 1000px;
  2. @mixin fiveMixin ($color , $size, $width, $height) {
  3. color:$color;
  4. font-size:$size;
  5. width:$width;
  6. height:$height;
  7. }
  8. div {
  9. @include fiveMixin($myArguments...);
  10. }

  编译后的CSS代码

  1. div {
  2. color: red;
  3. font-size: 14px;
  4. width: 400px;
  5. height: 1000px;
  6. }

  可以使用可变参数进行内外包装,然后最后在统一引入一个混合(mixin),例子如下。

  SASS代码

  1. $myArguments : red, 14px, 400px, 1000px;
  2. @mixin fiveMixin ($color , $size, $width, $height) {
  3. color:$color;
  4. font-size:$size;
  5. width:$width;
  6. height:$height;
  7. }
  8. @mixin sixMixin ($myArguments) {
  9. background:red;
  10. @include fiveMixin($myArguments...);
  11. }
  12. div {
  13. @include sixMixin($myArguments)
  14. }

  编译后的CSS代码

  1. div {
  2. background: red;
  3. color: red;
  4. font-size: 14px;
  5. width: 400px;
  6. height: 1000px;
  7. }

  混合(mixin)中的内容块(content)

  既然混合(mixin)可以传入很多东西,那么可不可以传入一定的内容呢?答案是可以的。有了内容块(content),我们几乎无所不能了,我们可以在已经定义好的混合(mixin)中传入很多我们想要的样式,或者想要引入的选择器包含的选择器中的样式都可以传进去。如下

  SASS代码

  1. @mixin apply-to-ie6-only {
  2. div {
  3. width:300px;
  4. @content;
  5. }
  6. }
  7. @include apply-to-ie6-only {
  8. .meng {
  9. color:red;
  10. }
  11. }
  12. @include apply-to-ie6-only {
  13. height:500px;
  14. }

  编译后的CSS代码

  1. div {
  2. width: 300px;
  3. }
  4. div .meng {
  5. color: red;
  6. }
  7. div {
  8. width: 300px;
  9. height: 500px;
  10. }

  变量和内容块(content)

  混合(mixin)可以通过内容块传进去全局变量,也可以引入局部变量。如下

  SASS代码

  1. @mixin contentMixin {
  2. div {
  3. height:300px;
  4. @content;
  5. }
  6. }
  7. $color :red;
  8. @include contentMixin {
  9. color:$color;
  10. }
  11. #sidebar {
  12. $sidebar-width: 300px;
  13. width: $sidebar-width;
  14. @include contentMixin {
  15. width: $sidebar-width / 3;
  16. }
  17. }

  编译后的CSS代码

  1. div {
  2. height: 300px;
  3. color: red;
  4. }
  5. #sidebar {
  6. width: 300px;
  7. }
  8. #sidebar div {
  9. height: 300px;
  10. width: 100px;
  11. }

  SASS详解之混合(mixins)就为大家介绍到这里了,更多有关SASS的小介绍敬请关注梦龙小站有关SASS的更新。

SASS详解之混合(mixins)的更多相关文章

  1. SASS详解之沿袭(extend)

    SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 < ...

  2. SASS详解之编译输出的样式

    SASS是一种CSS预处理语言,没有装环境的话是不能被解析的.但是有了koala编译工具之后,解析SASS不需要环境也毫无压力了.SASS的输出格式有四种:嵌套.扩大.紧凑和压缩.下面结合小例子为大家 ...

  3. Sass map详解

    作为一个CSS预处理器,Sass正受到越来越多的青睐,诸如Github.Codepen.CSS-Tricks.SitePoint.w3cplus等网站采用Sass组织.管理CSS文件,Sass正在逐渐 ...

  4. Flex 布局新旧混合写法详解(兼容微信)

    flex 是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 flex 的支持都 ...

  5. Flex布局新旧混合写法详解(兼容微信)

    原文链接:https://www.usblog.cc/blog/post/justzhl/Flex布局新旧混合写法详解(兼容微信) flex是个非常好用的属性,如果说有什么可以完全代替 float 和 ...

  6. javaCV开发详解之6:本地音频(话筒设备)和视频(摄像头)抓取、混合并推送(录制)到服务器(本地)

    javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...

  7. 【Qt】Qt Quick 之 QML 与 C++ 混合编程详解

    Qt Quick 之 QML 与 C++ 混合编程详解 - CSDN博客   专栏:Qt Quick简明教程 - CSDN博客   .

  8. Java 运算符-=,+=混合计算详解

    +=与-=运算符混合计算解析: int x = 3; x += x -= x -= x += x -= x; 详解:算数运算按运算符优先级运算,从右至左计算. 1. x=x-x; 实际为 3 - 3 ...

  9. VC 与Matlab混合编程之引擎操作详解

    Visual C++ 是当前主流的应用程序开发环境之一,开发环境强大,开发的程序执行速度快.但在科学计算方面函数库显得不够丰富.读取.显示数据图形不方便. Matlab 是一款将数值分析.矩阵计算.信 ...

随机推荐

  1. php网摘收藏

    1.thinkphp3.2.3开发手册: http://document.thinkphp.cn/manual_3_2.html 2.ThinkPHP3.2.3的函数汇总:http://www.thi ...

  2. 数学&模拟:随机化-矩阵随机化

    BZOJ2396 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立 随机生成一个N乘1的矩阵R 然后判断A*B*R是否等于C*R,而前者相当于A*(B*R) 与后者一样都可以在O(N2 ...

  3. Do the Untwist(模拟)

    ZOJ Problem Set - 1006 Do the Untwist Time Limit: 2 Seconds      Memory Limit: 65536 KB Cryptography ...

  4. .net core 中 Identity Server 4 Topic 之 Startup

    约定 简称 Id4. Id4在.net core 中的使用符合.net core 的约定架构,即Services来注册服务,middleware方式集成. 1. 配置服务 通过DI注入: public ...

  5. 【转】CentOS7 yum方式配置LAMP环境

    采用Yum方式搭建: Apache+Mysql+PHP环境 原文地址: http://www.cnblogs.com/zutbaz/p/4420791.html 1.安装Apache yum inst ...

  6. APP爬虫之Appium使用

    一.安装环境 Appium安装(windows版) 一.安装node.js 1.到官网下载node.js:https://nodejs.org/en/download/ 2.获取到安装文件后,直接双击 ...

  7. react 修改state某一属性值

    1.state // 筛选框相关数据 searchSelect: { term: { value: '学期', key: '', options: [] }, type_of_personnel: { ...

  8. koa源码阅读[3]-koa-send与它的衍生(static)

    koa源码阅读的第四篇,涉及到向接口请求方提供文件数据. 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose第三篇:koa源码阅读-2-koa-router 处理静态 ...

  9. Verilog笔记.5.同步、异步

    在数字电路中经常有同步synchronism.异步asynchronism的概念.异步指输入信号和时钟无关:同步指输入信号和时钟信号有关,实际上就是输入信号和时钟信号进行了与运算或者与非运算.实际开发 ...

  10. 商城项目(ssm+dubbo+nginx+mysql统合项目)总结(4)

    我不会在这里贴代码和详细步骤什么的,我觉得就算我把它贴出来,你们照着步骤做还是会出很多问题,我推荐你们去看一下黑马的这个视频,我个人感觉很不错,一步一步走下来可以学到很多东西.另外,视频和相关文档的话 ...