Preprocessors CSS

Transcript

1. Ашапатов Илья программист-верстальщик
2. 1. Что такое пропероцессор CSS? 2. Основные возможности 3. Сходства и различия Содержание 2
3. Разработчик Код CSS Страница Препроцессор 3 Что такое препроцессор?
4. 11 Основные препроцессоры
5. ➔ Переменные ➔ Вложенные правила ➔ Примеси ➔ Импорт файлов ➔ Операции 5 Основные возможности
6. // Sass $color: #009f0A; … h1 { color: $color; } // CSS h1 { color: #009f0A; } 6 Переменные
7. // Stylus #header h1 font-size: 24px; font-weight: bold; p font-size: 12px; a text-decoration: none; &:hover border-width: 1px; // CSS #header h1 { font-size: 24px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } 7 Вложенные правила
8. // Less .bordered(@color: #DDD) { border: 1px solid @color; } .header { .bordered(); } .content { .bordered(#000) } // CSS .header { border: 1px solid #DDD; } .content { border: 1px solid #000; } 8 Примеси
9. // Less @import: “reset.less” @import: “alert.less” @import: “header.less” @import: “footer.less” 1 CSS файл Импорт файлов 9
10. // Stylus $border = 1px; $baseColor = #111; $red = #842210; #header { color: $baseColor; border-left: $border; border-right: $border * 2; } #footer { color: $baseColor + #003300; border-color: desaturate($red, 10%); } // CSS #header { color: #111; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; } Операции 10
11. 11 Сходства и различия
12. /* style.scss or style.less */ h1 { color: #0982C1; } /* style.styl */ h1 { color: #0982C1; } /* omit brackets */ h1 color: #0982C1; /* omit colons and semi-colons */ h1 color #0982C1 Saas и Less Stylus Синтаксис 12
13. $color: #0982c1; $siteWidth: 1024px; $style: dotted; body { color: $color; border: 1px $style $color; max-width: $siteWidth; } @color: #0982c1; @siteWidth: 1024px; @style: dotted; body { color: @color; border: 1px @style @color; max-width: @siteWidth; } Sass less $color = #0982c1; siteWidth = 1024px; $style = dotted; body color $color border 1px $style $color max-width siteWidth Stylus Переменные 13
14. section { margin: 10px; nav { height: 25px; a { color: #0982C1; &:hover { text-decoration: underline; } } } } Saas и Less и Stylus Вложенные правила 14
15. @mixin error($width: 2px) { border: $width solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; @include error(); } .login-error { left: 12px; position: absolute; top: 20px; @include error(5px); } .error(@width: 2px) { border: @width solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; .error(); } .login-error { left: 12px; position: absolute; top: 20px; .error(5px); } Sass less error(width = 2px) { border: width solid #F00; color: #F00; } .generic-error { padding: 20px; margin: 4px; error(); } .login-error { left: 12px; position: absolute; top: 20px; error(5px); } Stylus Примеси 15
16. .block { margin: 10px 5px; padding: 2px; } p { @extend .block; border: 1px solid #EEE; } ul, ol { @extend .block; color: #333; text-transform: uppercase; } .block { margin: 10px 5px; padding: 2px; } p { .block; border: 1px solid #EEE; } ul, ol { .block; color: #333; text-transform: uppercase; } Saas и Stylus Less Наследование 16
17. /* file.{type} */ body { background: #EEE; } ------------------- /* common.{type} */ @import "reset.css"; @import "file.{type}"; p { background: #0982C1; } /* common.css */ /* reset.css code */ body { background: #EEE; } p { background: #0982C1; } Saas и Less и Stylus Сss Импорт файлов 17
18. lighten($color, 10%); darken ($color, 10%); saturate($color, 10%); desaturate($color, 10%); grayscale($color); complement($color); invert($color); mix($color1, $color2, 50%); ... lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); spin(@color, 10); spin(@color, -10); mix(@color1, @color2); ... Sass less lighten(color, 10%); darken(color, 10%); saturate(color, 10%); desaturate(color, 10%); ... Stylus Операции с цветом 18
19. body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10; } Saas и Less и Stylus Операции (Функции) 19
20. Спасибо!