Difference between revisions of "Useful Mixins"

From rbachwiki
Jump to navigation Jump to search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Create Full Background Image ==
== Create Full Background Image ==
<pre>
<pre>
@mixin backImage($image){
@mixin backImage($url, $repeat: no-repeat, $origin:border-box,  $position:center center, $size:cover)
background: url($image) center center no-repeat;
{
-webkit-background-size: cover;  
// url, no-repeat, border-box|content-box, center center
-o-background-size: cover;  
background-size: cover;  
background-image:url($url);
background-repeat: $repeat;
background-origin: $origin;
background-position: $position;
-webkit-background-size: $size;  
-o-background-size: $size;  
background-size: $size;  
}
}


</pre>
</pre>
== Background Image with gradient ==
<pre>
@mixin backImage(
$image,
$repeat: no-repeat,
$origin:border-box,
$position:center center,
$size:cover,
$grdir: bottom left,
$colorstart:green,
$colorend:green,
$opacitystart: 0,
$opacityend: 0)
{
// url, no-repeat, border-box|content-box, center center
background: linear-gradient(
bottom left,
rgba($colorstart,$opacitystart),
rgba($colorend,$opacityend)
),
url($image);
background-repeat: $repeat;
background-origin: $origin;
background-position: $position;
-webkit-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
</pre>
To use the mixin without passing all parameters, pass it the variable name with the value
@include backImage('image.jpg', $opacitystart: .5, $opacityend: .8);
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Latest revision as of 22:02, 29 September 2016

Create Full Background Image

@mixin backImage($url, $repeat: no-repeat, $origin:border-box,  $position:center center, $size:cover)
{
	// url, no-repeat, border-box|content-box, center center
	
	background-image:url($url);
	background-repeat: $repeat;
	background-origin: $origin;
	background-position: $position;
	-webkit-background-size: $size; 
	-o-background-size: $size; 
	background-size: $size; 
}

Background Image with gradient

@mixin backImage(
 $image, 
 $repeat: no-repeat,
 $origin:border-box,
 $position:center center,
 $size:cover, 
 $grdir: bottom left,
 $colorstart:green,
 $colorend:green, 
 $opacitystart: 0, 
 $opacityend: 0)
{
	// url, no-repeat, border-box|content-box, center center
	background: linear-gradient(
		bottom left,
		 rgba($colorstart,$opacitystart), 
		 rgba($colorend,$opacityend)
		 ),
	
	url($image);
	background-repeat: $repeat;
	background-origin: $origin;
	background-position: $position;
	-webkit-background-size: $size; 
	-o-background-size: $size; 
	background-size: $size; 
	
}

To use the mixin without passing all parameters, pass it the variable name with the value

@include backImage('image.jpg', $opacitystart: .5, $opacityend: .8);

Back To Top- Home - Category