写过SCSS的,都知道它的变量、嵌套、混合、继承等特性,带给前端人员的快速编写和方便维护,让人一旦恋上,就舍不得放手。
$orange: #ee5313!default; //主题色:橙色
$darkOrange:#d43a11; //深橙色
$color:#333;
$gray: #999; //灰色
$lightGray:#bbb; //浅灰
$grayBg:#f3f3f3!important; //body灰色背景
$white:#fff; //白色
$blue:#1aacdc; //蓝色
$red:#e5171a; //红色
$distance:0.75rem; //边距
$distance_s:0.6rem;
$line:#e0e0e0; //线条颜色
$lightLine:#eee; //浅线条颜色
$baseTextColor:#303030;
$secondTextColor:#646464;
$coverLayer:98;
$modal-zIndex:$coverLayer+1;
/*像素转换相对单位rem*/
@function px2rem($px) {
@return $px / $baseFontSize * 1rem;
}
/*表单行*/
@mixin form_li{
position:relative;
width:100%;
border-bottom:#e0e0e0 px2rem(1px) solid;
}
/*表单输入框*/
@mixin form_input{
height:3.6rem;
outline:0;
&::-webkit-input-placeholder {
color:#8f8f8f;
}
}
/*多行省略*/
@mixin multi-line-ellipsis($lineLimit, $lineHeight: 1.2, $fixedHeight: false) {
line-height: $lineHeight;
@if ($fixedHeight) {
height: $lineLimit * $lineHeight * 1em;
} @else {
max-height: $lineLimit * $lineHeight * 1em;
}
display: -webkit-box;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-line-clamp: $lineLimit;
-webkit-box-orient: vertical;
}
/*单行省略*/
@mixin single-line-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.2;
}
@mixin flex-box {
display: flex;
> * {
display: block; //这玩意是因为早期的flexbox实现要求容器内的项目必须是display:block,android 4.3就是这样。
}
}
/*图片水平垂直居中*/
@mixin image-container {
@include flex-box;
flex-direction: column;
justify-content: center;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
}
}
/*块元素百分比下居中*/
@mixin position-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*子元素水平平均地分布,垂直居中*/
@mixin container-center {
@include flex-box;
justify-content: space-around;
align-items: center;
}
/*主体距离头部和尾*/
@mixin body-up-bom{
width:100%;
height:auto;
padding: 4.16rem 0 5rem;
}
/*外层盒子距头尾*/
.bodyWrap{
@include body-up-bom;
}
/*外层盒子*/
@mixin containers{
width:100%;
background: $white;
}