-
在scss文件夹中新建一个mixin.scss,在需要使用此类样式的页面中引入
-
未使用 mixin.scss
<style lang="scss">
@import '../assets/scss/base.scss';
.header {
.nav-topbar {
height: 39px;
line-height: 39px;
background-color: #333333;
color: #b0b0b0;
.container {
display: flex;
justify-content: space-between;
align-items: center;
a {
display: inline-block;
color: #b0b0b0;
margin-right: 17px;
}
.my-cart {
width: 110px;
background-color: #ff6600;
color: #ffffff;
text-align: center;
margin-right: 0;
.icon-cart {
display: inline-block;
width: 16px;
height: 12px;
background: url("/imgs/icon-cart-checked.png") no-repeat center;
background-size: contain;
margin-right: 4px;
}
}
}
}
.nav-header {
.container {
height: 112px;
display: flex;
justify-content: space-between;
align-items: center;
.header-logo {
display: inline-block;
width: 55px;
height: 55px;
background-color: #ff6600;
a {
display: inline-block;
width: 110px;
height: 55px;
&::before {
content: " ";
display: inline-block;
width: 55px;
height: 55px;
background: url("/imgs/mi-logo.png") no-repeat center;
background-size: contain;
transition: margin 0.2s;
}
&::after {
content: " ";
display: inline-block;
width: 55px;
height: 55px;
background: url("/imgs/mi-home.png") no-repeat center;
background-size: contain;
}
&:hover::before {
margin-left: -55px;
transition: margin 0.2s;
}
}
}
.header-menu{
display: inline-block;
padding-left: 264px;
width: 588px;
.item-menu{
display: inline-block;
font-size: 16px;
color: #333333;
font-weight: bold;
margin-right: 20px;
line-height: 112px;
span{
cursor: pointer;
}
}
}
.header-search{
width: 319px;
.wrapper{
height: 50px;
border: 1px solid #E0E0E0;
display: flex;
align-items: center;
input{
border: none;
width: 264px;
height: 50px;
border-right: 1px solid #E0E0E0;
padding-left: 14px;
box-sizing: border-box;
}
a{
display: inline-block;
width: 18px;
height: 18px;
background: url('/imgs/icon-search.png') no-repeat center;
background-size: contain;
margin-left: 17.5px;
}
}
}
}
}
}
</style>
- mixin.scss
// flex布局复用
@mixin flex($hov:space-between,$col:center){
display: flex;
justify-content: $hov;
align-items: $col;
}
@mixin bgImg($w:0,$h:0,$img:'',$size:contain){
display: inline-block;
width: $w;
height: $h;
background: url($img) no-repeat center;
background-size: $size;
margin-right: 4px;
}
- 使用 mixin.scss
<style lang="scss">
@import '../assets/scss/base.scss';
@import '../assets/scss/mixin.scss';
.header {
.nav-topbar {
height: 39px;
line-height: 39px;
background-color: #333333;
color: #b0b0b0;
.container {
@include flex();
a {
display: inline-block;
color: #b0b0b0;
margin-right: 17px;
}
.my-cart {
width: 110px;
background-color: #ff6600;
color: #ffffff;
text-align: center;
margin-right: 0;
.icon-cart {
@include bgImg(16px,12px,'/imgs/icon-cart-checked.png');
margin-right: 4px;
}
}
}
}
.nav-header {
.container {
height: 112px;
@include flex();
.header-logo {
display: inline-block;
width: 55px;
height: 55px;
background-color: #ff6600;
a {
display: inline-block;
width: 110px;
height: 55px;
&::before {
content: " ";
display: inline-block;
@include bgImg(55px,55px,'/imgs/mi-logo.png');
transition: margin 0.2s;
}
&::after {
content: " ";
display: inline-block;
@include bgImg(55px,55px,'/imgs/mi-home.png');
}
&:hover::before {
margin-left: -55px;
transition: margin 0.2s;
}
}
}
.header-menu{
display: inline-block;
padding-left: 264px;
width: 588px;
.item-menu{
display: inline-block;
font-size: 16px;
color: #333333;
font-weight: bold;
margin-right: 20px;
line-height: 112px;
span{
cursor: pointer;
}
}
}
.header-search{
width: 319px;
.wrapper{
height: 50px;
border: 1px solid #E0E0E0;
display: flex;
align-items: center;
input{
border: none;
width: 264px;
height: 50px;
border-right: 1px solid #E0E0E0;
padding-left: 14px;
box-sizing: border-box;
}
a{
@include bgImg(18px,18px,'/imgs/icon-search.png');
margin-left: 17.5px;
}
}
}
}
}
}
</style>