CSS Framework

css

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

SASS и SCSSSASS.border

padding: 20px

margin: 10px

SCSS.border {

padding: 20px;

margin: 10px;

}

CSS.border {

padding: 20px;

margin: 10px;

}

Вложения и переменныеВложения.border {

padding: 20px;

margin: 10px;

h1 {

margin: 5px;

}

}

Переменные$blue: #3bbfce;

.border {

border-color: $blue;

background: $blue;

}

Mixins (Примеси)@mixin rounded_corners ($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}#footer { @include rounded_corners(10px);}.block { @include rounded_corners(5px);}

#footer { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.block { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}

Арифметика и циклы$the-border: 1px;

#header {

border-left: $the-border;

border-right: $the-border * 2;

}

#header {

border-left: 1px;

border-right: 2px;

}

@for $i from 0 through 200 { .item-#{$i} { height: 10px * $i; }}

Создание спрайтов$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; }

Спасибо

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