Difference between revisions of "Useful Mixins"

From rbachwiki
Jump to navigation Jump to search
Line 15: Line 15:


</pre>
</pre>
== Background Image with gradient ==
<pre>
@mixin backImage($image, $repeat: no-repeat, $origin:border-box,  $position:center center, $size:cover, $grdir: bottom left, $opacitystart: 0, $opacityend: 0){
// url, no-repeat, border-box|content-box, center center
background: linear-gradient(
bottom left,
rgba(blue,$opacitystart),
rgba(blue,$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)


==[[#Create Full Background Image|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Revision as of 18:11, 23 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, $opacitystart: 0, $opacityend: 0){
	// url, no-repeat, border-box|content-box, center center
	background: linear-gradient(
		bottom left,
		 rgba(blue,$opacitystart), 
		 rgba(blue,$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