# CSS - SASS handle index Can use var control z-index
$elements: con, slider, masthead; .masthead { /* z-index: 3 */ z-index: index($elements, masthead); } .slider { /* z-index: 2 */ z-index: index($elements, slider); } .con { /* z-index: 1 */ z-index: index($elements, con); } Refer - 使用 sass 有效控管 z-index 圖層順序
...
Category: Sass
# Sass compile two spaces Use Sass compile to css css lndent is 2 spaces if want 4 spaces Must modify this sass source code
sass-3.2.10/lib/sass/tree/visitors/to_css.rb # before tab_str = ' ' * (@tabs + node.tabs) # after tab_str = ' ' * (@tabs + node.tabs) Refer - Change indentation in Sass
...
# Use CSS3 Animation In Compass Compass default dosen’t have mixin in CSS3 animation We can use this method in scss
/* define */ $animation-support: webkit, moz, o, ms, not khtml; /* use */ .animation { @include experimental('animation-name', move, $animation-support); @include experimental('animation-duration', 5s, $animation-support); @include experimental('animation-iteration-count', 1, $animation-support); } and add keyframes
/* define */ $animation-support: webkit, moz, o, ms, not khtml; @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* use */ .
...