20/09/2019, 18:56
Scss Cheatsheet
Mở đầu Một cheatsheet rất hữu ích cho những ai mới bắt đầu sử dụng SCSS. Cheatsheet Variables $ red : #833 ; body { color : $red ; } Extend .button { ··· } .push-button { @extend .button ; } Nesting .markdown-body { p { ...
Mở đầu
Một cheatsheet rất hữu ích cho những ai mới bắt đầu sử dụng SCSS.
Cheatsheet
Variables
$red: #833; body { color: $red; }
Extend
.button { ··· } .push-button { @extend .button; }
Nesting
.markdown-body { p { color: blue; } &:hover { color: red; } }
Composing
@import './other_sass_file`;
The .scss or .sass extension is optional.
Comments
/* Block comments */
// Line comments
Mixins
@mixin heading-font { font-family: sans-serif; font-weight: bold; } h1 { @include heading-font; } with parameters @mixin font-size($n) { font-size: $n * 1.2em; } body { @include font-size(2); } with default values @mixin pad($n: 10px) { padding: $n; } body { @include pad(15px); } with a default variable // Set a default value $default-padding: 10px; @mixin pad($n: $default-padding) { padding: $n; } body { @include pad(15px); }
For loops
@for $i from 1 through 4 { .item-#{$i} { left: 20px * $i; } }
Each loops (simple)
$menu-items: home about services contact; @each $item in $menu-items { .photo-#{$item} { background: url('images/#{$item}.jpg'); } }
Each loops (nested)
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg'); @each $id, $image in $backgrounds { .photo-#{$id} { background: url($image); } }
While loops
$i: 6; @while $i > 0 { .item-#{$i} { awidth: 2em * $i; } $i: $i - 2; }
Conditionals
@if $position == 'left' { position: absolute; left: 0; } @else { position: static; }
Maps
$map: (key1: value1, key2: value2, key3: value3); map-get($map, key1)
Kết luận
Cảm ơn vì đã đọc bài !
Tham khảo thêm tại đây