Home » CSS
Mixin Để Chuyển Từ Đơn Vị px Qua em Trong Less
Mixin để chuyển từ đơn vị px qua em trong Less, ta viết như sau
1 2 3 | .px2em(@selector, @target, @context = 16px) { @{selector}: (@target / @context) + 0em; } |
Ứng với: @selector: là thuộc tính cần áp dụng, ví dụ (font-size, margin-top…) @target: là giá trị px cần chuyển đổi sang…
Read More »Flexbox Boilerplate Phiên Bản Less
Chia sẻ Flexbox Boilerplate phiên bản Less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | // -------------------------------------------------- // Flexbox LESS mixins // The spec: http://www.w3.org/TR/css3-flexbox // -------------------------------------------------- // Flexbox display // flex or inline-flex .flex-display(@display: flex) { display: ~"-webkit-@{display}"; display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox display: ~"-ms-@{display}"; // IE11 display: @display; } // The 'flex' shorthand // - applies to: flex items // <positive-number>, initial, auto, or none .flex(@columns: initial) { -webkit-flex: @columns; -ms-flex: @columns; flex: @columns; } // Flex Flow Direction // - applies to: flex containers // row | row-reverse | column | column-reverse .flex-direction(@direction: row) { -webkit-flex-direction: @direction; -ms-flex-direction: @direction; flex-direction: @direction; } // Flex Line Wrapping // - applies to: flex containers // nowrap | wrap | wrap-reverse .flex-wrap(@wrap: nowrap) { -webkit-flex-wrap: @wrap; -ms-flex-wrap: @wrap; flex-wrap: @wrap; } // Flex Direction and Wrap // - applies to: flex containers // <flex-direction> || <flex-wrap> .flex-flow(@flow) { -webkit-flex-flow: @flow; -ms-flex-flow: @flow; flex-flow: @flow; } // Display Order // - applies to: flex items // <integer> .flex-order(@order: 0) { -webkit-order: @order; -ms-order: @order; order: @order; } // Flex grow factor // - applies to: flex items // <number> .flex-grow(@grow: 0) { -webkit-flex-grow: @grow; -ms-flex-grow: @grow; flex-grow: @grow; } // Flex shrink // - applies to: flex item shrink factor // <number> .flex-shrink(@shrink: 1) { -webkit-flex-shrink: @shrink; -ms-flex-shrink: @shrink; flex-shrink: @shrink; } // Flex basis // - the initial main size of the flex item // - applies to: flex items // <width> .flex-basis(@width: auto) { -webkit-flex-basis: @width; -ms-flex-basis: @width; flex-basis: @width; } // Axis Alignment // - applies to: flex containers // flex-start | flex-end | center | space-between | space-around .justify-content(@justify: flex-start) { -webkit-justify-content: @justify; -ms-justify-content: @justify; justify-content: @justify; } // Packing Flex Lines // - applies to: multi-line flex containers // flex-start | flex-end | center | space-between | space-around | stretch .align-content(@align: stretch) { -webkit-align-content: @align; -ms-align-content: @align; align-content: @align; } // Cross-axis Alignment // - applies to: flex containers // flex-start | flex-end | center | baseline | stretch .align-items(@align: stretch) { -webkit-align-items: @align; -ms-align-items: @align; align-items: @align; } // Cross-axis Alignment // - applies to: flex items // auto | flex-start | flex-end | center | baseline | stretch .align-self(@align: auto) { -webkit-align-self: @align; -ms-align-self: @align; align-self: @align; } |
Cách Tính Chiều Rộng Của Flex Item
Giả sử có 1 ví dụ sau: 1 flex container có chiều rộng 900px, và các thông số flex-item như hình dưới Để tính chiều rộng của các flex-item, gồm các bước sau đây: Tìm khoảng trống còn…
Read More »Điểm Khác Biệt Giữa Mixins, Extends Và Placeholders Trong SASS
Điểm khác biệt giữa Mixins, Extends và Placeholders, chỉ gói gọn trong cách hiện thị mã css lúc được render ra. Bạn xem các ví dụ ở bên dưới Mixins: (@minxin) – Khai báo: @mixin mixin_name – Sử…
Read More »