關於Sass的基本用法 百度搜索一大推 本人是從阮一峰大神的筆記開始接觸這個玩意 傳送門 http://www.ruanyifeng.com/blog/2012/06/sass.html 來了攜程之後從代替之前做樣式的女孩子從寫css開始乾起 明天女孩度產假歸來 可以擁入js的懷抱 一片新的天地 工 ...
關於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 }
後續整理一些遇到的樣式問題