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. ubuntu如何杀死进程

    一.得到所有进程 先用命令查询出所有进程 ps -ef 二.杀死进程 我们使用ps -ef命令之后,就会得到一些列进程信息,有进程pid什么的,如果你要杀死莫个进程的话,直接使用命令   kill   ...

  2. LINUX下时间类API

    (1)常用的时间相关的API和C库函数有9个:time/ctime/localtime/gmtime/mktime/asctime/strftime/gettimeofday/settimeofday ...

  3. LightOJ 1239 - Convex Fence 凸包周长

    LINK 题意:类似POJ的宫殿围墙那道,只不过这道题数据稍微强了一点,有共线的情况 思路:求凸包周长加一个圆周长 /** @Date : 2017-07-20 15:46:44 * @FileNam ...

  4. 实用的 Node.js 教程,工具和资源

    这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件 ...

  5. 【CodeForces】960 F. Pathwalks 主席树+动态规划

    [题目]F. Pathwalks [题意]给定n个点m条边的有向图,可能不连通有重边有自环.每条边有编号 i 和边权 wi ,求最长的路径(可以经过重复节点)满足编号和边权都严格递增.n,m,wi&l ...

  6. POJ - 1330 Nearest Common Ancestors 最近公共祖先+链式前向星 模板题

    A rooted tree is a well-known data structure in computer science and engineering. An example is show ...

  7. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  8. 向量与矩阵的范数及其在matlab中的用法(norm)

    一.常数向量范数 \(L_0\) 范数 \(\Vert x \Vert _0\overset{def}=\)向量中非零元素的个数 其在matlab中的用法: sum( x(:) ~= 0 ) \(L_ ...

  9. docker 加速

    Docker配置阿里云加速地址 打开阿里云网站https://cr.console.aliyun.com,登陆自己的阿里云账号. 然后只需要在服务器配置docker配置文件,只需要修改"Ex ...

  10. webgote的例子(6)SQL注入(盲注)

    SQL Injection - Blind (WS/SOAP) 本期演示的是盲注的手法.有些网站在与数据库交互的地方进行了很好的修饰,将报错的语句进行修改,即使你找到了注入点也无法下手拿数据,这个时候 ...