Blog in css

2 Apr 2017, 20:20
by repraze

Looking back a few months ago, I was happily writing my own sets of Mixins to make my CSS cross-browser. I encourage you to read about them. Every time I encountered a weird property, I created a Mixin. I could have used one of the many available collections out there, but I kept my own little file.

Little did I know the mess to come.

The Let Down

Using the latest CSS features was good, and seeing my code build nicely was gratifying enough, but as time went by and some of the properties became standard to all browsers, my files became messier.

Mixins are great, with a simple binding in your style, it expands into a set of predefined properties. This is especially useful when you want to make your style browser compatible. One declaration and you're done. When a browser integrates the property, you can reduce the Mixin and continue. Relying on a library is probably the best so you don't have to keep track. Although what do you do when you simply don't need a Mixin any more?

This is the main issue, writing those Mixins in your sources means that you depend on them. The result are ghost functionalities that bind to now available properties. The build is universally slower and it's all just a big mess. The only solution is to remove all the bindings to those Mixins and you've lost what made them useful in the first place.

Autoprefixer - The Way Forward

Autoprefixer takes another route to solve the problem. It will grab your CSS and parse it to add vendor prefixes. The solution is always kept up to date and you can target a set of browsers.

With Autoprefixer, your CSS becomes somewhat similar to TypeScript. A higher language that will be parsed to be browser compatible. The good thing about this method is that you don't compromise your language in the first place. As things move forward you can simply update and rebuild, no hassle.

What About Mixins Then?

There's a better way to deal with your browser issues now, but it doesn't mean that Mixins are obsolete! They are still very useful to generate tedious code in just a couple of lines. You can have recursions and iterate through arrays to create rich and powerful style-sheets. I've created my own column grid system with combinations and you can imagine how it would take forever to write something similar with just CSS. All those n column implementation out there.

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