拾掇个人工作中的使用sass的一些心得
整理个人工作中的使用sass的一些心得
关于Sass的基本用法 百度搜索一大推 本人是从阮一峰大神的笔记开始接触这个玩意 传送门 http://www.ruanyifeng.com/blog/2012/06/sass.html
来了携程之后从代替之前做样式的女孩子从写css开始干起 明天女孩度产假归来 可以拥入js的怀抱 一片新的天地
工作中的Sass是按照每个页面单独命名 之后通过gulp统一合并在一块再发布 感觉还蛮好用 不过最近新增一个项目的时候发现一个坑 在通过@import引用这个新项目的样式时 再进行编译发现体积增大到了425k，不科学呀，后来没有引用新项目css，新项目css进行单独编译出来体积在25k，神奇的事情发生了，原来的样式体积下降到245k，体积陡然下降了超过150k，这是神马情况呀~~ 求大神们告知
好了 不和看客老爷们瞎扯淡了 下面进入正题
1、@mixin这个scss文件下定义了经常会重复调用的随时变化的样式
1 //动画 2 @mixin keyframes($name) { 3 @-webkit-keyframes #{$name} { 4 @content; 5 } 6 @-moz-keyframes #{$name} { 7 @content; 8 } 9 @-ms-keyframes #{$name} { 10 @content; 11 } 12 @-o-keyframes #{$name} { 13 @content; 14 } 15 @keyframes #{$name} { 16 @content; 17 } 18 } 19 20 @mixin animation($str) { 21 -webkit-animation: #{$str}; 22 -moz-animation: #{$str}; 23 -ms-animation: #{$str}; 24 -o-animation: #{$str}; 25 animation: #{$str}; 26 }
调用方式
1 @include keyframes('fadeIn'){ 2 0% { 3 opacity: 0; 4 } 5 100% { 6 opacity: 1; 7 } 8 } 9 .fadeIn{ 10 @include animation('fadeIn 0.5s ease 1'); 11 }
是不是感觉很简单 妈妈再也不用担心我写动画的时候写兼容样式的苦恼了^_^
2、移动端的弹性布局
本来楼主是不写兼容代码的 结果有一天逛自己的网页的时候发现在国产知名浏览器UC上以及谷歌原生浏览器下惨不忍睹啊 本着为了用户老爷们的美好体验做了大量兼容处理 代码如下 拿去不谢
1 // 弹性布局样式 2 @mixin df{ 3 display: box; 4 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 5 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 6 display: -ms-flexbox; /* TWEENER - IE 10 */ 7 display: -webkit-flex; /* NEW - Chrome */ 8 display: flex; 9 } 10 @mixin column{ 11 flex-direction: column; 12 -webkit-flex-direction: column; 13 -moz-flex-direction: column; 14 -ms-flex-direction: column; 15 -o-flex-direction: column; 16 } 17 @mixin j-c-c{ 18 -webkit-justify-content:center; 19 justify-content:center; 20 -moz-box-pack:center; 21 box-pack:center; 22 } 23 @mixin j-c-s-b{ 24 -webkit-box-pack: justify; 25 -webkit-justify-content: space-between; 26 -ms-flex-pack: justify; 27 justify-content: space-between; 28 } 29 @mixin j-c-s-a{ 30 -webkit-justify-content:space-around; 31 justify-content:space-around; 32 -moz-box-pack:space-around; 33 box-pack:space-around; 34 } 35 @mixin wrap{ 36 -webkit-box-lines: multiple; 37 -webkit-flex-wrap: wrap; 38 -moz-flex-wrap: wrap; 39 -ms-flex-wrap: wrap; 40 -o-flex-wrap: wrap; 41 flex-wrap: wrap; 42 } 43 @mixin a-i-c{ 44 -webkit-box-align: center; 45 -webkit-align-items: center; 46 -ms-flex-align: center; 47 -ms-grid-row-align: center; 48 align-items: center; 49 } 50 51 @mixin fx1{ 52 -webkit-box-flex: 1; 53 -moz-box-flex: 1; 54 -webkit-flex: 1; 55 -ms-flex: 1; 56 flex: 1; 57 } 58 59 @mixin fx2{ 60 -webkit-box-flex: 2; 61 -moz-box-flex: 2; 62 -webkit-flex: 2; 63 -ms-flex: 2; 64 flex: 2; 65 } 66 @mixin fx3{ 67 -webkit-box-flex: 3; 68 -moz-box-flex: 3; 69 -webkit-flex: 3; 70 -ms-flex: 3; 71 flex: 3; 72 }
3、常见的一些样式
1 // 伪类三角形 2 @mixin arrows($l-r:5px,$t:7px,$color:#333){ 3 content: ""; 4 display: inline-block; 5 width: 0; 6 height: 0; 7 border-left: $l-r solid transparent; 8 border-right: $l-r solid transparent; 9 border-top: $t solid $color; 10 } 11 //btn 12 @mixin btn($w:90%,$h:1.9rem){ 13 width: $w; 14 height: $h; 15 line-height: $h; 16 color: #fff; 17 font-size: 0.65rem; 18 text-align: center; 19 background: #ff9a14; 20 border-radius: 5px; 21 &:active{ 22 background:#FF7814; 23 } 24 } 25 //mticon2 26 @mixin mticon2($w:0,$h:0,$z:0 0){ 27 width: $w; 28 height: $h; 29 background: url(../img/mticon2.png) no-repeat; 30 background-position: $z; 31 background-size: 100px 100px; 32 display: inline-block; 33 vertical-align: middle; 34 overflow: hidden; 35 }
最近发现可以多个@mixin可以在一个mixin中调用 整理了一个箭头样式组件
1 // 完整箭头组件包括动画 2 @mixin arrow_down($deg:135deg,$color: #ddd,$w:8px){ 3 content: ''; 4 width: $w; 5 height: $w; 6 display: inline-block; 7 border-top: 2px solid $color; 8 border-right: 2px solid $color; 9 -webkit-transform: rotate($deg); 10 transform: rotate($deg); 11 margin-left:5px; 12 vertical-align: 2px; 13 } 14 @mixin arrow_ui($color:#fff){ 15 &:after{ 16 @include arrow_down(135deg,$color); 17 -webkit-box-sizing: border-box; 18 box-sizing: border-box; 19 } 20 &.active{ 21 &:after{ 22 @include animation('arrow 0.5s ease forwards'); 23 } 24 } 25 }
后续整理一些遇到的样式问题
总结UC遇到的一些坑
1、弹性布局下 元素若是行内元素 不转换成块元素会不起作用；
2、弹性布局下的flex-direction:row-reverse;会失效;
3、不支持flex:1更小的值;
4、只支持老的弹性布局写法 display:box;