SASS混入

发布时间:2022-05-06 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了SASS混入 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

SASS混入

@mixin

@mixin 定义一个可以在整个样式表中重复使用的样式

@include

@include 将混入(mixin)引入到文档中



一、定义混入

1.1语法

@mixin 混入名 {

  样式

}

1.2示例

//定义公共样式

@mixinimportant-text{

color:#fff;

font-size:24px;

font-weight:1000;

border:2pxsolid#f00;

}

二、引用混入

2.1语法

.box {

  @include 混入名;

}

2.2示例

.box{

//引入公共样式

@includeimportant-text;

background-color:#f00;

}

三、混入引用混入

3.1语法

@mixin 混入名{

  @include 混入名1;

  @include 混入名2;

}

3.2实例

//定义整体样式1

@mixinimportant-text{

font-size:24px;

color:#f00;

};

//定义整体样式2

@mixinspecial-border{

border:2pxsolid#ff0;

};

//混入引入混入

@mixinspecial-text{

@includeimportant-text;

@includespecial-border;

}

//box引入

.box{

@includespecial-text;

}

四、混入传入变量

//定义混入

@mixinnormal-border($width,$color) {

border:$widthsolid$color;

};

//引入混入

.box1{

@includenormal-border(2px,#f00);

};

.box2{

@includenormal-border(10px,#00f);

};

总结


以上是前端之家为你收集整理的SASS混入 全部内容,希望文章能够帮你解决SASS混入 所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。