Short forms of useful elements
In CSS code (and not only CSS), you wish to get the final effect more quickly each time you repeat a part of the code. So why don't you create short forms for some CSS declarations as well? Let's check what we can make shorter:
/* Text decoration */ =tdn text-decoration: none =tdu text-decoration: underline /* Text align */ =tac text-align: center =tar text-align: right =tal text-align: left /* Text transform */ =ttu text-transform: uppercase =ttl text-transform: lowercase /* Display */ =di display: inline =db display: block =dib display: inline-block /* Margin 0 auto */ =m0a margin: 0 auto
Now, each time you want to make some text uppercase, you are just using code:
.sampleClass +ttu
Here's the compiled CSS:
.sampleClass { text-transform: uppercase; }
Another example of usage of short mixins is a element which will be displayed as a block element and text will be centered:
.sampleClass +db +tac
Here's the compiled CSS...