Downloaded 41 times
![CoffeeScript. Сахар Значение аргументов по умолчанию: fill = (liquid = "coffee") -> alert(liquid) Переменные в строках: "Liquid is #{liquid}" Диапазон: array[0..2] # => [1, 2, 3] "abcde"[0..2] # => "abc" Вызовет calc, если obj и getA не undefined: obj?.getA()?.calc()](https://image.slidesharecdn.com/frontend-110304013856-phpapp01/75/Ruby-HAML-SASS-Compass-CoffeeScript-Jammit-7-2048.jpg)
![CoffeeScript. Циклы numbers = [1, 2, 3] for i in numbers console.log(i) square = (i * 2 for i in numbers) #=> [1, 4, 9] scores = ivan: 1, kolya: 2, slava: 5 for name, score of scores console.log("#{name}: #{score}")](https://image.slidesharecdn.com/frontend-110304013856-phpapp01/75/Ruby-HAML-SASS-Compass-CoffeeScript-Jammit-8-2048.jpg)
Uploaded byAndrey Sitnik
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Документ описывает использование веб-технологий, таких как HAML, Sass, Compass и CoffeeScript для создания и оптимизации веб-приложений. Включает примеры кода и инструкции по настройке и использованию этих инструментов в проектах на Ruby on Rails. Также рассматриваются аспекты комбинаторики и сжатия файлов для повышения производительности.
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
- 1. Вёрстка в стилеRuby: HAML, SASS, Compass, CoffeeScript, Jammit Андрей Ситник ai@evilmartians.com evilmartians.com
- 2. Model View Controller HTML CSS JavaScript
- 3. HAML → HTML/XML !!!5 <!DOCTYPE html> %html <html> %body <body> #content <div id="content"> - @posts.each do |p| <% @posts.each do |p| %> %h1= p.title <h1><%= @p.title %></h1> %time{ datetime: p.t } <time datetime="<%= @p.t %>"> <% end %> </body> </html>
- 4. HAML YAML/JSON > XML→ HAML > HTML
- 5. CoffeeScript JS + Ruby+ Python = CoffeeScript
- 6. CoffeeScript. Основы (function() { i = 42 var i = 42; square = (x) -> function square(x) { x*x return x * x; } i = square(i) unless i < 10 if (!(x < 10)) { i = square(i); } if i > 100 if (i > 100) { alert(i) alert(i); } })();
- 7. CoffeeScript. Сахар Значение аргументовпо умолчанию: fill = (liquid = "coffee") -> alert(liquid) Переменные в строках: "Liquid is #{liquid}" Диапазон: array[0..2] # => [1, 2, 3] "abcde"[0..2] # => "abc" Вызовет calc, если obj и getA не undefined: obj?.getA()?.calc()
- 8. CoffeeScript. Циклы numbers =[1, 2, 3] for i in numbers console.log(i) square = (i * 2 for i in numbers) #=> [1, 4, 9] scores = ivan: 1, kolya: 2, slava: 5 for name, score of scores console.log("#{name}: #{score}")
- 9. CoffeeScript. Установка 1. Добавить gem 'barista', '~> 1.0' в Gemfile 2. Вызвать bundle install 3. Вызвать rails generate barista:install 4. Положить свои скрипты в app/coffeescripts
- 10. SASS → CSS $color:black $width: 100px @mixin default-font($size = 12px) font: $size serif #content #content { width: $width + 10px width: 110px; } h1 #content h1 { color: $color color: black; @include default-font(40px) font: 40px serif; } input #content input { @include default-font font: 12px seirf; }
- 11. SCSS → CSS #content{ width: $width + 10px; h1 { color: $color; @include default-font(40px); } input { @include default-font; }
- 12. Compass Ruby → Rubyon Rails = SASS → Compass
- 13. SASS. Цвета $color: #ff0000 a color: $color &:hover // a:hover color: darken($color, 10%) &:visited color: grayscale($color)
- 14. Compass. Изображения .icon width: image-width('icon.png') height: image-height('icon.png') background: image-url('icon.png') ↓ .icon { width: 50px; height: 50px; background: url(/images/icon.png?1299009570); }
- 15. Compass. CSS3 @import 'compass/css3' input @include border-radius(3px) @include box-shadow(black, 0, 0, 5px) ↓ input { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; box-shadow: black 0 0 5px; -webkit-box-shadow: black 0 0 5px; -moz-box-shadow: black 0 0 5px; -o-box-shadow: black 0 0 5px; }
- 16. Compass. Градиенты Opera $experimental-support-for-svg: true header @include background(linear-gradient(gray, black), filter-gradient(gray, black)) FF, Chrome, Safari, CSS3 IE через filter
- 17. Compass. Base64 .icon background: image-url("icon.png") // IE 6, 7 background: inline-image("icon.png") ↓ .icon { background: url(/images/icon.png); background: url(data:image/png;base64,iVBORw0KG ANSUhEUgAAABAAAAAQAQMAAAAlP QVR4nGP4/5/h/1+G/58ZDrAzwz3g … MVEUAAAD///+l2Z/dAAAAM0lE);
- 18. Compass. Спрайты $icons: sprite-map("icons/*.png") .logo background: sprite($icons, logo) // icons/logo.png .contacts background: sprite($icons, contacts) // icons/contacts.png ↓ .icon { background: url('/images/icons.png?123') 0 0 no-repeat; } .contacts { background: url('/images/icons.png?123') 0 -24px no-repeat; }
- 19. Jammit Для CSS/JS-файлов: 1. Объединяетвсе файлы в один 2. Убирает пробелы/комментарии, сокращает JS-код 3. Сразу сжимает GZ на максимальной компрессии, чтобы Nginx быстро отдавал уже сжатое
- 20. Ссылки HAML: haml-lang.com CoffeeScript: coffeescript.com Compass: compass-style.org Jammit documentcloud.github.com/jammit/
- 21.