@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入(mixin)引入到文档中。
@mixin flex {
display: flex;
}
@mixin flex-center-v {
display: flex;
align-items: center;
}
@mixin flex-center-h {
display: flex;
justify-content: center;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-column {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
@mixin ellipsis($lines) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}
@mixin scroller {
&::-webkit-scrollbar {
background: transparent;
width: 8px;
}
&::-webkit-scrollbar-thumb {
background: #ddd;
}
}
$purple: #d08fff;
$green: #43ac8d;
$primary: #ef7f45;
$primary-dark: #eb6528;
$blue: #1b9ef0;
$red: #ff3b45;
@import "./variables.scss";
@import "./mixins.scss";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
a {
color: #42b983;
}
}
.column-center {
display: flex;
flex-flow: column wrap;
align-items: center;
}
.flex {
@include flex;
}
.flex-center {
@include flex-center;
}
.flex-center-v {
@include flex-center-v;
}
.flex-center-h {
@include flex-center-h;
}