:root{--color:#000;--default-color:green;--new-color:#0f0;}body{background:#121212}#loader{width:500px;position:absolute;text-align:center;left:calc(50%-250px);top:calc(50%-10px)}#loader.square{display:inline-block;height:7px;width:7px;margin:6px;position:relative;box-shadow:0020pxrgba(0,0,0,.3);ani

软件安装下载rubyhttps://rubyinstaller.org/downloads/安装必要的包，先设置国内安装源，再安装sass和compassgemsources--removehttps://rubygems.org/gemsources--addhttps://gems.ruby-china.com/--removehttps://rubygems.org/geminstallsassgeminstallcompass安装ClosureCompilernpminstall--ggoogle-closure-compilerScss配置参数：输出压缩文件，且不生成缓存目录$Fil

标题.zoom{animation:zoom.5scubic-bezier(.075,.82,.165,1);}@keyframeszoom{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}

遍历scss的map结构$themelist:(theme1:(bg_color:#ccc),theme2:(bg_color:#ccc));@each$key,$itemin$themelist{.#{$key}p{color:map-get($item,'bg_color');}}

chrome内核兼容性从我手边已有的版本测试结果兼容Chrome/39.0.2171.95-Chrome/74.0.3729.131上下自适应布局上一篇flex实现水平自适应布局这里顺便记录下上下自适应布局如下flex布局测试html,body{height:100%;width:100%;margin:0px;padding:0px;}.main{height:100%;width:50%;margin:0pxauto;display:flex;flex-direction:column;}.topdiv,.downdiv{width:100%;}.topdiv{height:50px;ba

chrome内核兼容性从我手边已有的版本测试结果兼容Chrome/39.0.2171.95-Chrome/74.0.3729.131水平布局实现重要的概念先说一下flex-grow该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间flex布局让前端布局又多啦一个方案,下面想实现这个后台常用的布局,左边一栏菜单300px这样父元素还剩多少空间都让右边占用从来实现自动宽度,样式如下,是我们想要的效果flex布局测试html,body{height:100%;width:100%;margin:0px;padding:0px;}.main{