SASS详解之混合(mixins)
SASS详解之混合(mixins)可以出现在SASS的任何地方。有很多类名具有相同或者相似的样式,就可以用SASS中的混合(mixins)来进行编写,然后针对不同类名的不同样式逐一编写。
定义一个混合(mixins)
一个混合(mixins)中有专属于自己的名字,有专属于自己的属性和样式。如下
SASS代码
- @mixin firstMixin {
- width:10px;
- height:20px;
- }
上面仅仅是一个很简单的混合(mixins),仅仅包括了一些属性和属性值。混合(mixins)还可以有选择器,也可以后父级引用。如下
SASS代码
- @mixin firstMixin {
- .m_clear {
- zoom:1;
- &:after {
- content:"";
- display:block;
- clear:both;
- }
- }
- }
使用一个混合(include)
现在大家已经会定义一个混合(mixins),一定想知道怎么调用它吧。那么就看个小例子吧。
SASS代码
- @mixin firstMixin {
- .m_clear {
- zoom:1;
- &:after {
- content:"";
- display:block;
- clear:both;
- }
- }
- }
- div {
- @include firstMixin;
- }
编译后的CSS代码
- div .m_clear {
- zoom: 1;
- }
- div .m_clear:after {
- content: "";
- display: block;
- clear: both;
- }
上面的小例子是针对混合(mixins)中带有选择器的。不难看出,这个编译后的CSS中div中的类名clear具有混合(mixin)中的样式。而下面的例子,就是混合(mixin)中只有样式没有选择器的小例子。
SASS代码
- @mixin twoMixin {
- width:200px;
- height:200px;
- }
- div {
- @include twoMixin;
- }
编译后的CSS代码
- div {
- width: 200px;
- height: 200px;
- }
混合(mixin)中定义的样式,哪个选择器引用了,就为其增加了混合(mixin)中的样式。若混合(mixin)中有选择器,那么就在其引用的选择器子集中添加相应的属性。再看个混合中引用混合的例子。
SASS代码
- @mixin twoMixin {
- width:200px;
- height:200px;
- }
- @mixin threeMixin {
- <pre name="code" class="plain"> @include twoMixin;
- </pre> border:1px solid red;}div {@include threeMixin;}
编译后的CSS代码
- div {
- width: 200px;
- height: 200px;
- border: 1px solid red;
- }
混合(mixin)中的参数
混合(mixin)中也可以设置参数,这可以让我们实现相似样式的共同编写。只需要在混合的名字后面添加变量名即可实现。如下
SASS代码
- @mixin fourMixin ($width) {
- width : $width;
- }
- div {
- @include fourMixin(20px);
- }
编译后的CSS代码
- div {
- width: 20px;
- }
很简单的用法,很实用的功能。那么这么实用的功能,有没有默认参数值呢?想知道的话就看看下面的小例子吧。
SASS代码
- @mixin fourMixin ($width : 3000px) {
- width : $width;
- }
- div {
- @include fourMixin(20px);
- }
- span {
- @include fourMixin();
- }
编译后的CSS代码
- div {
- width: 20px;
- }
- span {
- width: 3000px;
- }
混合(mixin)中的关键词参数
所为关键词参数,就是在调用混合(mixin)的时候,写上参数的名称,编译出来的是一样的,这样写的好处就是方便开发者阅读。例子如下。
SASS代码
- @mixin fourMixin ($width : 3000px) {
- width : $width;
- }
- div {
- @include fourMixin($width :20px);
- }
编译后的CSS代码
- div {
- width: 20px;
- }
混合(mixin)中的可变关键词
有时候在编写混合(mixin)的时候,遇到的参数是不详的,不知道有多少,不知道应该设多少才好。具体使用的例子如下。
SASS代码
- @mixin boxShadow($shadows...) {
- -moz-box-shadow: $shadows;
- -webkit-box-shadow: $shadows;
- box-shadow: $shadows;
- }
- div {
- @include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
- }
编译后的CSS代码
- div {
- -moz-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
- -webkit-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
- box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
- }
这么人性化的可变参数不仅可以用在定义混合(mixin)中,也可以运用在使用过程中。实例如下。
SASS代码
- $myArguments : red, 14px, 400px, 1000px;
- @mixin fiveMixin ($color , $size, $width, $height) {
- color:$color;
- font-size:$size;
- width:$width;
- height:$height;
- }
- div {
- @include fiveMixin($myArguments...);
- }
编译后的CSS代码
- div {
- color: red;
- font-size: 14px;
- width: 400px;
- height: 1000px;
- }
可以使用可变参数进行内外包装,然后最后在统一引入一个混合(mixin),例子如下。
SASS代码
- $myArguments : red, 14px, 400px, 1000px;
- @mixin fiveMixin ($color , $size, $width, $height) {
- color:$color;
- font-size:$size;
- width:$width;
- height:$height;
- }
- @mixin sixMixin ($myArguments) {
- background:red;
- @include fiveMixin($myArguments...);
- }
- div {
- @include sixMixin($myArguments)
- }
编译后的CSS代码
- div {
- background: red;
- color: red;
- font-size: 14px;
- width: 400px;
- height: 1000px;
- }
混合(mixin)中的内容块(content)
既然混合(mixin)可以传入很多东西,那么可不可以传入一定的内容呢?答案是可以的。有了内容块(content),我们几乎无所不能了,我们可以在已经定义好的混合(mixin)中传入很多我们想要的样式,或者想要引入的选择器包含的选择器中的样式都可以传进去。如下
SASS代码
- @mixin apply-to-ie6-only {
- div {
- width:300px;
- @content;
- }
- }
- @include apply-to-ie6-only {
- .meng {
- color:red;
- }
- }
- @include apply-to-ie6-only {
- height:500px;
- }
编译后的CSS代码
- div {
- width: 300px;
- }
- div .meng {
- color: red;
- }
- div {
- width: 300px;
- height: 500px;
- }
变量和内容块(content)
混合(mixin)可以通过内容块传进去全局变量,也可以引入局部变量。如下
SASS代码
- @mixin contentMixin {
- div {
- height:300px;
- @content;
- }
- }
- $color :red;
- @include contentMixin {
- color:$color;
- }
- #sidebar {
- $sidebar-width: 300px;
- width: $sidebar-width;
- @include contentMixin {
- width: $sidebar-width / 3;
- }
- }
编译后的CSS代码
- div {
- height: 300px;
- color: red;
- }
- #sidebar {
- width: 300px;
- }
- #sidebar div {
- height: 300px;
- width: 100px;
- }
SASS详解之混合(mixins)就为大家介绍到这里了,更多有关SASS的小介绍敬请关注梦龙小站有关SASS的更新。
------------------
------------------