Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
Это старая версия документа!
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:
index.sass
$link: orange
@mixin font//миксин
font-size: 15px
font-weight: bold
@mixin color
color : #fff
background-color: red
@include font//вызов миксина в миксине
@mixin link-color
a
color: $link//использование переменных в миксине
background-color: blue
body
@include font
.test
p
span
@include color
@include link-color
$link: orange;
@mixin font {//миксин
font-size: 15px;
font-weight: bold;
}
@mixin color{
color:#fff;
background-color: red;
@include font;//вызов миксина в миксине
}
@mixin link-color{
a {
color: $link;//использование переменных в миксине
background-color: blue;
}
}
body{
@include font;
}
.test{
p{
span{
@include color;
}
@include link-color;
}
}
body {
font-size: 15px;
font-weight: bold; }
.test p span {
color: #fff;
background-color: red;
font-size: 15px;
font-weight: bold; }
.test p a {
color: orange;
background-color: blue; }
@import "minixs";//Подключение миксинов
.test{//Именованные параметры
@include block($border: 1px solid red);
width: 500px;
height: 500px;
}
@mixin rounded($radius){
border-radius: $radius;
}
@mixin block($radius: 5px, $border: 1px solid black){
@include rounded($radius);
border: $border;
}
.test {
border-radius: 5px;
border: 1px solid red;
width: 500px;
height: 500px; }
@import "minixs";//Подключение миксинов
.test{//Именованные параметры
@include block(13px , 1px solid red);
width: 500px;
height: 500px;
}
@mixin rounded($radius){
border-radius: $radius;
}
@mixin block($radius, $border){
@include rounded($radius);
border: $border;
}
.test {
border-radius: 13px;
border: 1px solid red;
width: 500px;
height: 500px; }
@import "minixs";//Подключение миксинов
.test3{//Параметры по умолчанию
@include block();
width: 500px;
height: 500px;
}
@mixin rounded($radius){
border-radius: $radius;
}
//Параметры по умолчанию
@mixin block($radius: 5px, $border: 1px solid black){
@include rounded($radius);
border: $border;
}
.test3 {
border-radius: 5px;
border: 1px solid black;
width: 500px;
height: 500px; }
.test2{//Именованные параметры
@include block($radius: 20px);
width: 500px;
height: 500px;
}
@mixin rounded($radius){
border-radius: $radius;
}
@mixin block($radius: 5px, $border: 1px solid black){
@include rounded($radius);
border: $border;
}
.test2 {
border-radius: 20px;
border: 1px solid black;
width: 500px;
height: 500px; }