mysql实现sass_整理个人工作中的使用sass的一些心得

来了携程之后从代替之前做样式的女孩子从写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 //btn12 @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 //mticon226 @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;