It's likely that some, if not most, of you use CSS preprocessors and popular languages like SASS and LESS daily. SASS and SCSS are basically the same, but SCSS syntax still uses braces, while SASS syntax omits them completely.
If you are not using a CSS preprocessor, start now. Writing pure CSS is considered unacceptable 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 like blocks of code you define once and can reuse anywhere. If you are familiar with any programming language, you can think of them as functions. A mixin can take multiple parameters and call functions, and it's very useful when you want clean, 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 styles determined by the browser. Usually, that default style doesn't fit our needs. You will definitely, more often than not, be bothered by the placeholder style, from the color 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 only want the first two next to each other, you will use float:left on the first two, and after the second you'll add clear:both. That way, you prevent the third element from sitting next to the first two, since it moves 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 a string using JavaScript or PHP? It isn't necessary, since these SCSS mixins can help you truncate some text.
The best thing about responsive websites is that the text fits on every device, proportional to the screen width.
Possible values include 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 in an absolute way
We often find ourselves in a situation where we have to center something, either horizontally or vertically, right? The combination used before is display:table for the outer element and display:table-cell for the inner.
With CSS3, you can solve this problem much more easily using the translate property.
Center your item with CSS3 transform:translate(); You don't have to worry; your item will always be centered, shifted left by -50% and right by -50%. Also, you don't have to worry about responsiveness, 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 it with your friends.
