Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit

Вёрстка в стиле Ruby:
HAML, SASS, Compass, CoffeeScript, Jammit

Андрей Ситник
ai@evilmartians.com
evilmartians.com

Model View Controller

HTML CSS JavaScript

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>

HAML

YAML/JSON > XML → HAML > HTML

CoffeeScript

JS + Ruby + Python = CoffeeScript

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);
}

})();

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: 5
for name, score of scores
console.log("#{name}: #{score}")

CoffeeScript. Установка

1. Добавить gem 'barista', '~> 1.0' в Gemfile
2. Вызвать bundle install
3. Вызвать rails generate barista:install
4. Положить свои скрипты в app/coffeescripts

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; }

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. Градиенты

Opera

$experimental-support-for-svg: true

header
@include background(linear-gradient(gray, black), filter-gradient(gray, black))

FF, Chrome, Safari, CSS3 IE через filter

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: haml-lang.com
CoffeeScript: coffeescript.com
Compass: compass-style.org
Jammit documentcloud.github.com/jammit/

Вопросы?

ai@evilmartians.com
evilmartians.com

Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Similar a Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit

Similar a Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit (20)

Más de Andrey Sitnik

Más de Andrey Sitnik (7)

Вёрстка в стиле Ruby: HAML, SASS, Compass, CoffeeScript, Jammit