It's sure that some, or even most of you, are using CSS preprocessing and the popular languages involved like: SASS and LESS on a daily basis. SASS and SCSS are basically the same but the SCSS syntax is still uses braces where as the SASS syntax omits them completely.
If you are not using any of CSS preprocessor, think about that now. It is considered intolerably to write pure CSS nowadays. CSS preprocessors are saving your time, help you write better and aesthetically pleasing code, which is a standard in an industry and something every professional developer should care about.
SCSS mixins are something like blocks of code that you define once and you can re-use them anywhere. If you are familiar with any programming language you can think of them as functions. A mixin can take multiple parameters and make calls to functions and they are very useful when you want really clean and DRY code.
Let's take a look at 5 SCSS mixins and extends you must know and use as a professional developer.
1. Style placeholder
Every website has some color scheme. Most elements like inputs, headings etc. have their own default style that is determined by the browser. Usually that default style is something that doesn't fit to our needs. You will definitely, more often than not, be bothered by the style of the placeholder, starting with the color and going all the way to the font.
This is an easy way to create a mixin for input placeholders in sass:
@mixin placeholder {
::-webkit-input-placeholder {@content}
:-moz-placeholder {@content}
::-moz-placeholder {@content}
:-ms-input-placeholder {@content}
}
Usage
@include placeholder {
font-style:italic;
color: white;
font-weight:100;
}
2. Clear Fix
Have you ever had a problem where your site's elements literally start to fall apart? Very often the main reason for that is the fact that floats are not being 'cleaned'. For example, if you have three elements, and you only want the first two to be one next to each other, you will use float:left, and after the second one you'll put clear:both. In that way you'll prevent the third element from standing next to the first two, since it's place is below.
A lot of people use the old method of clearing floats. They are using a lot of unnecessary divs with classes to clear floats. The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Thanks to SCSS, we can use this little mixin to change that without any HTML.
%clearfix {
*zoom: 1;
&:after {
content: '';
display: table;
line-height: 0;
clear: both;
}
}
Usage
.wrapper-that-contains-floated-children {
@extend %clearfix;
}
3.Vertical Align Trick
Are you familiar with this problem? This SCSS mixin is perfect for vertical alignment of inner elements. As you know, it is always difficult to vertically align something, and adding padding or margins is never the smartest choice, because nowadays, with CMS being so present, you can never know how much text there is going to be, therefore, you cannot know how far away they should be in order for the text to be in the center.
Luckily, with our SCSS mixin this can be achieved in a second, which a great time saver.
@mixin vAlign(){
&:before {
content: '';
vertical-align: middle;
display: inline-block;
height: 100%;
width: .1px;
}
}
Usage
.wrapper {
@include vAlign;
}
4.Truncate Text
How many times have you had to truncate some string, but you used javascript or PHP? It isn't necessary, since this SCSS mixins can help you truncate some text.
The best thing when you are doing responsive websites, is that the text will fit on every device, proportional with the screen width.
Possible values that you can use are ellipsis, clip or a string. The most used one is ellipsis.
@mixin trunc($value: ellipsis){
overflow: hidden;
white-space: nowrap;
text-overflow: $value;
}
Usage
.wrapper {
@include trunc;
}
5. Center it on absolute way
We often find ourselves in a situation where we have to center something, either horizontally or vertically, right? The combination that was used before is display:table for the outer element, and display:table-cell for the inner.
With CSS3 present, this problem can be solved in a much easier way - using translate property.
Center your item with CSS3 transform:translate(); You don't have to worry, your item will always be in center, from the left by -50% and from the right by -50%. Also, you don't have to worry about responsive which is a good thing.
@mixin center($l:auto,$t:auto) {
position:absolute;
left:$l;
top:$t;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
Usage
.center-it {
@include center(50%,50%);
}
If you find this article helpful, subscribe to our newsletter or share us with your friends.
