Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
21
Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit Андрей Ситник [email protected] evilmartians.com
-
Upload
andrey-sitnik -
Category
Technology
-
view
6.107 -
download
5
Transcript of Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit
Model
HTML
View
CSS
Controller
JavaScript
HAML HTML/XML→
!!! 5%html %body #content - @posts.each do |p| %h1= p.title %time{ datetime: p.t }
<!DOCTYPE html> <html> <body> <div id="content"> <% @posts.each do |p| %> <h1><%= @p.title %></h1> <time datetime="<%= @p.t %>"> <% end %> </body></html>
HAML
YAML/JSON > XML → HAML > HTML
CoffeeScript
JS + Ruby + Python = CoffeeScript
CoffeeScript. Основы
i = 42
square = (x) -> x * x
i = square(i) unless i < 10
if i > 100 alert(i)
(function() {
var i = 42;
function square(x) { return x * x; }
if (!(x < 10)) { i = square(i); }
if (i > 100) { alert(i); }
})();
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()
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: 5for name, score of scores console.log("#{name}: #{score}")
CoffeeScript. Установка
1. Добавить gem 'barista', '~> 1.0' в Gemfile2. Вызвать bundle install3. Вызвать rails generate barista:install4. Положить свои скрипты в app/coffeescripts
SASS CSS→
$color: black$width: 100px
@mixin default-font($size = 12px) font: $size serif
#content width: $width + 10px h1 color: $color @include default-font(40px) input @include default-font
#content { width: 110px; } #content h1 { color: black; font: 40px serif; } #content input { font: 12px seirf; }
SCSS CSS→
#content { width: $width + 10px; h1 { color: $color; @include default-font(40px); } input { @include default-font; }
Compass
Ruby → Ruby on Rails = SASS → Compass
SASS. Цвета
$color: #ff0000
a color: $color &:hover // a:hover color: darken($color, 10%) &:visited color: grayscale($color)
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);}
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;}
Compass. Градиенты
$experimental-support-for-svg: true
header @include background(linear-gradient(gray, black), filter-gradient(gray, black))
Opera
IE через filterFF, Chrome, Safari, CSS3
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);
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;}
Jammit
Для CSS/JS-файлов:
1. Объединяет все файлы в один2. Убирает пробелы/комментарии, сокращает JS-код3. Сразу сжимает GZ на максимальной компрессии, чтобы Nginx быстро отдавал уже сжатое
Ссылки
HAML:CoffeeScript:Compass:Jammit
haml-lang.comcoffeescript.comcompass-style.orgdocumentcloud.github.com/jammit/
