More Related Content
Viewers also liked (20)
Similar to Front-end разработка. Compass (20)
More from DrupalSib (20)
Front-end разработка. Compass
- 4. SASS и SCSS SASS SCSS .border .border { padding: 20px padding: 20px; margin: 10px margin: 10px; CSS .border { padding: 20px; margin: 10px; } }
- 5. Вложения и переменные Вложения Переменные .border { $blue: #3bbfce; padding: 20px; margin: 10px; .border { h1 { border-color: $blue; margin: 5px; } } background: $blue; }
- 6. Mixins (Примеси) @mixin rounded_corners ($radius) { #footer { -moz-border-radius: $radius; -moz-border-radius: 10px; -webkit-border-radius: $radius; -webkit-border-radius: 10px; border-radius: $radius; border-radius: 10px; } } #footer { @include rounded_corners(10px); .block { } -moz-border-radius: 5px; .block { -webkit-border-radius: 5px; @include rounded_corners(5px); } border-radius: 5px; }
- 7. Арифметика и циклы #header { $the-border: 1px; border-left: 1px; border-right: 2px; #header { } border-left: $the-border; border-right: $the-border * 2; } @for $i from 0 through 200 { .item-#{$i} { height: 10px * $i; } }
- 8. Создание спрайтов $arrows: sprite-map('images/*.png'); .my-icons-new, .my-icons-save { background: url(/slideshow/ss-32023954/32023954/&) no-repeat; } .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; }