Sort out some sass usage experiences in my work, and sort out my sass experiences.

Sort out some sass usage experiences in my work, and sort out my sass experiences.

About the basic usage of Sass Baidu search a big push I am From Ruan Yifeng great god notes began to contact this thing transport door http://www.ruanyifeng.com/blog/2012/06/sass.html

When I came to Ctrip, I started from writing css to replace the girl who made the style before. Tomorrow, the girl will return from maternity leave and will be able to embrace a new world in js.

In the work, Sass is named separately for each page and then merged and re-released through gulp. However, it is quite good to use it. Recently, when a new project was added, it was found that a pitfall was referencing this new project through @ import. after compiling the style, it is found that the volume has increased to 425 kb, not scientific. Later, I did not reference the css of the new project. The size of the css of the new project was 25 KB. The magic thing happened. The size of the original style dropped to 245 KB, the volume suddenly drops by more than 150 k. This is the case of Shenma ~~ Please let us know

Okay, I'm not talking to the readers.

1. @ mixin: The scss file defines the styles that are frequently called and changed at any time.

1 // Animation 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}

Call Method

 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 }

Is it easy? Mom no longer needs to worry about writing compatible styles when I write animations. ^_^

2. Elastic deployment of mobile terminals

Originally, the author did not write compatible code. One day, when I browsed my webpage, I found that on the domestic well-known browser UC and Google's native browser, I did a lot of work to improve the user experience. the compatible processing code is as follows. Thank you!

1 // elastic layout style 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 {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-; 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. Common styles

1 // pseudo-class triangle 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}

Recently, it was found that multiple @ mixins can be called in one mixin to organize an arrow style component.

1 // complete arrow components include Animation 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.5 s release forwards '); 23} 24} 25}

Sort out some style problems in the future

Summary of some pitfalls of UC

1. It does not work if the element in the row is not converted into a block element in the elastic layout;