Skip to content

Instantly share code, notes, and snippets.

@mauryaratan mauryaratan/extends.scss
Last active Dec 21, 2015

What would you like to do?
Useful Sass Mixins and extend, usable in most projects.
// Clearfix
%clearfix {
zoom: 1;
&:after {
display: table;
content: "";
&:after {
clear: both;
//Rem generator
$baseline-px: 16px;
@mixin rem($property, $px-values) {
// Convert the baseline into rems
$baseline-rem: $baseline-px / 1rem;
// Print the first line in pixel values
#{$property}: $px-values;
// If there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number" {
#{$property}: $px-values / $baseline-rem; }
@else {
// Create an empty list that we can dump values into
$rem-values: unquote("");
@each $value in $px-values {
// If the value is zero, return 0
@if $value == 0 {
$rem-values: append($rem-values, $value); }
@else {
$rem-values: append($rem-values, $value / $baseline-rem); } }
// Return the property and its list of converted values
#{$property}: $rem-values; } }
//Disable selection
@mixin no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@mixin iconify( $code: null ){
@if $code {
content: "#{$code}";
} @else {
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.