Blog in preprocessor

26 Aug 2016, 16:08
by repraze

The ability to create "Mixins" is an important feature of style sheet pre-processors such as less. They are comparable to functions in programming and enables you to write CSS widely supported by the different browsers while remaining easy to manage its compatibility.

In short it will be useful to any good web-designer to maintain a cross-compatible style while being able to quickly change settings across the entire application.

My take on it

As I know some of you just want to look and copy the code, so there you go!


/*
	Compilation of Useful Less Mixins
	Thomas Dubosc (@repraze)
	http://repraze.com/posts/view/1ntp5ltvyo/compilation-of-useful-less-mixins
*/

//Changes how the placeholders are displayed, expects {}
.placeholder (@rules) {
	&::-webkit-input-placeholder {
		@rules();
	}
	&:-moz-placeholder {
		@rules();
	}
	&::-moz-placeholder {
		@rules();
	}
	&:-ms-input-placeholder {
		@rules();
	}
}

//Rounded corners
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:	@radius;
	border-radius:		 @radius;

	-moz-background-clip:	padding;
	-webkit-background-clip: padding-box;
	background-clip:		 padding-box;
}

//Shadows on element
.box-shadow (@string) {
	-webkit-box-shadow:	@string;
	-moz-box-shadow:	@string;
	box-shadow:			@string;
}

//Hyphenate text
.hyphens (@string){
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

//Transition for animations style and timing
.transition (@transition) {
	-webkit-transition:	@transition;
	-moz-transition:	@transition;
	-ms-transition:		@transition;
	-o-transition:		@transition;
	transition:			@transition;
}

//Transform (rotate, translate) an element
.transform (@string){
	-webkit-transform:	@string;
	-moz-transform:		@string;
	-ms-transform:		@string;
	-o-transform:		@string;
	transform:			@string;
}

//Perspective definition for 3D viewing of elements
.perspective (@value: 1000) {
	-webkit-perspective:@value;
	-moz-perspective:	@value;
	-ms-perspective:	@value;
	perspective:		@value;
}

//Filtering such as grayscale
.filter (@string){
	-webkit-filter:	@string;
	-moz-filter:	@string;
	-ms-filter:		@string;
	filter:			@string;
}

//Animation keys definition, expects {}
.keyframes (@name; @arguments) {
	@-moz-keyframes @name { @arguments(); }
	@-webkit-keyframes @name { @arguments(); }
	@keyframes @name { @arguments(); }
}

//Bind key to animation
.animation (@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	animation: @arguments;
}

//Element selection mode
.user-select (@string) {
	-webkit-user-select:@string;
	-khtml-user-select:	@string;
	-moz-user-select:	@string;
	-o-user-select:		@string;
	user-select:		@string;
}

//Generate background gradients
.gradient (@type; @colors; @dir: 0deg; @prefixes: webkit, moz, ms, o; @index: length(@prefixes)) when (@index > 0) {
	.gradient(@type; @colors; @dir; @prefixes; (@index - 1));

	@prefix  : extract(@prefixes, @index);
	@dir-old : 90 - (@dir);

	background-image: ~"-@{prefix}-@{type}-gradient(@{dir-old}, @{colors})";
  	& when ( @index = length(@prefixes) ) {
		background-image: ~"@{type}-gradient(@{dir}, @{colors})";
	}
}

Incomplete?

Again, this is a collection of useful mixins I've written and found. The power of less is that you can change this library to add extra compatibility and it will replicate everywhere you've used them without changing a thing!

The .border-raduis defines a default! You can parameter any of the functions to default to whatever you want when no arguments are passed. Though, leaving a library clean then having default variable in your .less style file is preferable so you can reuse this library without changing it constantly. I usually like to keep my variables into a separate settings.less file.

Ussage

Here's a few examples on how to use some of the functions described.



.smallRadius{
	.border-radius(2px);
}

.insideShadow{
	.box-shadow(inset 0 0 0 1px lighten(#000000, 80));
}

.transitionThis{
	.transition(all 0.5s ease-in-out);
}

.scaleThat{
	.transform(scale(3.0));
}

.blurry{
	.filter(blur(5px));
}

This is just a small take on what pre-processors can do for you! I invite you to read some more on LessCSS.org

Latest Posts