1. CSS Framework

3. Основная функция
css

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('/images/my-icons-s34fe0604ab.png') no-repeat;
}
.my-icons-delete { background-position: 0 0; }
.my-icons-edit
{ background-position: 0 -32px; }

9. Спасибо
Презентацию подготовил:
Калинин Антон
kalinin.a@i20.biz