css中的@mixin的用法
@mixin
@mixin指令允许您定义可以在整个样式表中重复使用的样式,而避免了使用无语意的类(class),混入(@mixin)还可以包含所有的 CSS 规则,以及任何其他在 Sass 文档中被允许使用的东西,甚至可以携带 arguments,引入变量等,这就意味着只需少量的混入(@mixin)代码就能输出多样化且不重复的样式。
@mixin的使用及用法
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入(mixin)引入到文档中。
定义一个混入
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; … }
以下实例创建一个名为 “important-text” 的混入:
Sass 代码
@mixin important-text {color: red;font-size: 25px;font-weight: bold;border: 1px solid blue;
}
注意:Sass 的连接符号 - 与下划线符号 _ 是相同的,也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
使用混入
@include 指令可用于包含一混入:
Sass @include 混入语法:
selector {@include @include @mixin名字(important-text);
}
使用方法如下
.danger {@include important-text;background-color: green;
}
将上面的代码转换成css就是
.danger {color: red;font-size: 25px;font-weight: bold;border: 1px solid blue;background-color: green;
}
而且混入代码中也可以包含混入代码
.danger {color: red;font-size: 25px;font-weight: bold;border: 1px solid blue;background-color: green;
}
再往下学会发现@mixin会想函数一样接收变量,如下
/* 混入接收两个参数 */
@mixin bordered($color, $width) {border: $width solid $color;//注意solid是实线是固定值不是变量$color, $width这两个才是变量
}.myArticle {@include bordered(blue, 1px); // 调用混入,并传递两个参数
}.myNotes {@include bordered(red, 2px); // 调用混入,并传递两个参数
}
上面代码转换后就是
.myArticle {border: 1px solid blue;
}.myNotes {border: 2px solid red;
}
那么既然@mixin可以想函数一样接收变量那么是不是一样可以设置默认值呢?
@mixin bordered($color: blue, $width: 1px) {border: $width solid $color;
}
在包含混入时,你只需要传递需要的变量名及其值:
@mixin sexy-border($color, $width: 1in) {border: {color: $color;width: $width;style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
将代码转换后得到
p {border-color: blue;border-width: 1in;border-style: dashed; }h1 {border-color: blue;border-width: 2in;border-style: dashed;
}
g更神奇的是有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用 … 来设置可变参数。
例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
老规矩转换
.shadows {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
浏览器前缀使用混入
浏览器前缀使用混入也是非常方便的,如下实例:
@mixin transform($property) {-webkit-transform: $property;-ms-transform: $property;transform: $property;
}.myBox {@include transform(rotate(20deg));
}
转
在这里插入代码片
.myBox {-webkit-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}
css中的@mixin的用法相关推荐
- html border 边距,css中border-sizing属性的用法
这篇文章给大家介绍的文章内容是关于css中border-sizing属性的用法,有很好的参考价值,希望可以帮助到有需要的朋友. box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子 ...
- css中的text-shadow的用法
css中的text-shadow的用法 作用:用来设置或者检索对象中文本的文字是否有阴影及模糊效果: 具体的效果: 用法: text-shadow:{length,length,length,colo ...
- CSS中的!important属性用法
由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型 ...
- HTML中z index属性是用来,css中z-index 属性与用法详解
Z-index属性决定了一个HTML元素的层叠级别.元素层叠级别是相对于元素在Z轴上(与X轴Y轴相对照)的位置而言.一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部.这个层叠顺序沿着垂 ...
- css中vh和wh用法
vh是viewpoint的缩写,是根据视口的大小而改变的相对单位 1vh是占视口高度的百分之一 1wh是占视口宽度的百分之一 50wh就是盒子宽度占视口宽度的百分之五十
- css中background: lighten的用法
话不多说看例子: <template><div class="btn" @click="btn">点击弹出消息提示框</div&g ...
- html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
- 什么是Mixin?带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
- html页边距为负值,css中的padding属性可以为负值吗?css中padding属性的详解
关于css盒模型中的内边距padding属性的详细介绍,还有新手常犯的一个错误,内边距padding属性真的能写入负值.这个答案在文章的最后,现在就让我们一起来看这篇文章吧 首先我们介绍的是第一个问题 ...
最新文章
- 我写的代码,又被CTO骂了......
- backgroundworker控件的使用(线程传值)
- 一年三篇IF大于7的牛人告诉你怎么写SCI
- SAP UI5 oList.bindAggregation(item) will trigger odata request
- creo组装后怎样移动元件_BGA元件SMT装配工艺要点简介
- numpy.argmax/argmin/max/min
- java设计文件查重,【java】查重类的实现
- escharts 柱状图 百分比_Echarts柱状图百分比显示
- 自己合成制作支付宝、微信、QQ三合一万能收款码
- Elasticsearch系列—倒排索引原理
- 秀米怎么添加附件链接,如Word、Excel、Pdf等
- 基于android平台的语音机器人服务娱乐系统
- 如何自己开发一个Android APP(3)——XML和Android
- 高通Camera 软件工程师的成长之路
- 【codevs 1450】小天昊的旅行2333333
- IE 阻止过期的 ActiveX 控件
- iOS短视频源码音频采集过程中的音效实现
- [书籍].Pong P. Chu - FPGA Prototyping By Verilog Examples
- ERP软件厂商排名?ERP管理软件厂商怎么选?
- Java related——Tomcat安装教程(赶快拥有一只自己的汤姆猫吧)