在Scss大火的今天无论时React 还是Vue 都会使用Scss来作为提高开发效率的一种手段
1.左右布局快速开发
在布局中左右布局是非常常见的一种模式,要使用一下方式快速布局首先要满足于两个条件,在满足以上条件后可以在子级使用 Padding 来任意调整位置
1. 父级盒子的宽度必须要确定
2. 子级宽度需要传入Px值或者百分比
@mixin LAndRLayout($width, $height:auto){
display:inline-block;
width:$width;
height: $height;
box-sizing:border-box;
vertical-align: middle;
}
2.块级文字居中前提是必须是块级
@mixin AutoCenter($width:auto, $height:auto){
width: $width;
height:$height;
line-height:$height;
}
3.文字超过n行进行省略
@mixin overFlowNUm($num:2){
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-break: break-all;
-webkit-line-clamp:$num;
-webkit-box-orient:vertical;
}
4.文字超出进行省略
@mixin overFlow{
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
}
5.禁止选择中文本的同时鼠标出现小手
@mixin Mouse{
user-select:none;
cursor:pointer;
}
6.滚动条样式
@mixin ScrollBar{
::-webkit-scrollbar {
width:5px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
width: 5px;
height: 10px;
background: rgba(175,189,223,0.2);
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
height: 10px;
background: rgba(142, 143, 145, 0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(169, 169, 169, 0.4);
}
}
7.使用rem自适应
$vw_fontsize: 192;
@function rem($px) {
@return ($px / $vw_fontsize) * 1rem;
}
//一种计算方式
// 根元素大小使用 vw 单位
$vw_design: 1920;
html {
font-size: ($vw_fontsize / $vw_design) * 100vw;//10vw
// 同时,通过Media Queries 限制根元素最大最小值
@media screen and (max-width: 980px) {
font-size: 98px;
}
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
$min_width: 1024px;
body {
// max-width: 1920px;
min-width: $min_width;
}
@mixin inlineBlock($width,$height,$loc:center,$lneHgt:auto){
width:$width;
height:$height;
display: inline-block;
text-align: $loc;
line-height: $height;
}
//块级盒子居中不会影响父元素,不兼容IE7及以下
@mixin boxCenter{
display: table;
margin: 0 auto;
}
//块级盒子可以做到水平垂直多行文字居中,
把当前属性设置给父元素在设置子元素设置 display: inline-block.
@mixin boxHorAndVerCenter{
display:table-cell;
vertical-align:middle;
text-align:center;
}