-
Notifications
You must be signed in to change notification settings - Fork 0
mixin :: bg
SMRSAN edited this page Jun 2, 2017
·
1 revision
There are several ways to use cross-browser and shorthand of background[-subprop]
properties.
Here is a list of defined mixins for this case:
Mixin | Usage |
---|---|
bg | Makes the background property shorter |
bg-color | Makes the background-color property shorter |
bg-size | Shorthand/cross-browser of background-size property |
bg-img | Shorthand/cross-browser of background-image property |
Param | Usage |
---|---|
$val | The value of background property. |
For example:
#myDiv
+bg($color-light-red)
#myDiv{
@include bg($color-light-red);
}
#myDiv{
background: #ff9a8f;
}
Param | Usage |
---|---|
$val | The value of background-color property. |
For example:
#myDiv
+bg-color($color-light-red)
#myDiv{
@include bg-color($color-light-red);
}
#myDiv{
background-color: #ff9a8f;
}
Param | Usage |
---|---|
$val | The value of background-size property. |
For example:
#myDiv
+bg-size(1920px 1080px)
#myDiv{
@include bg-size(1920px 1080px);
}
#myDiv{
-webkit-background-size: 1920px 1080px;
background-size: 1920px 1080px;
}
Param | Usage |
---|---|
$val | The value of background-image property. |
For example:
#myDiv
+bg-img(url('path/to/image.jpg'))
#myDiv{
@include bg-img(url('path/to/image.jpg'));
}
#myDiv{
-webkit-background-image: url('path/to/image.jpg');
-moz-background-image: url('path/to/image.jpg');
-o-background-image: url('path/to/image.jpg');
background-image: url('path/to/image.jpg');
}