Last active
September 17, 2015 12:28
-
-
Save scerelli/0f3ed8f30f0ec044870a to your computer and use it in GitHub Desktop.
A set of sass helpers that can be extended to group most used rules
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%position-fixed | |
position: fixed | |
%position-relative | |
position: relative | |
%position-absolute | |
position: absolute | |
%width-100 | |
width: 100% | |
%height-100 | |
height: 100% | |
%height-0 | |
height: 0 | |
//Position Helpers | |
%top-0 | |
top: 0 | |
%top-50 | |
top: 50% | |
%left-0 | |
left: 0 | |
%right-0 | |
right: 0 | |
%bottom-0 | |
bottom: 0 | |
//DISPLAY Helpers | |
%display-table | |
display: table | |
%display-inline-table | |
display: inline-table | |
%display-table-cell | |
display: table-cell | |
%display-inline-block | |
display: inline-block | |
%display-inline | |
display: inline | |
%display-block | |
display: block | |
%display-none | |
display: none | |
%vertical-center | |
vertical-align: middle | |
// AUTO WIDTH TABLE CELL | |
%auto-width-table-cell | |
width: 1px | |
white-space: nowrap | |
//TEXT ALIGN HELPERS | |
%text-left | |
text-align: left | |
%text-right | |
text-align: right | |
%text-center | |
text-align: center | |
%text-decoration-none | |
text-decoration: none | |
%text-uppercase | |
text-transform: uppercase | |
%font-italic | |
font-style: italic | |
//VISIBILITY HELPERS | |
%visibility-false | |
visibility: hidden | |
%visibility-true | |
visibility: visible | |
//OPACITY HRLPERS | |
%opacity-0 | |
opacity: 0 | |
%opacity-1 | |
opacity: 1 | |
/** Break line */ | |
.break-line | |
display: block | |
// ----- rem ----- // | |
@function parseInt($n) | |
@return $n / ($n * 0 + 1) | |
//supponing that your root font size is 16 px | |
=rem($property, $values) | |
$px: () | |
$rem: () | |
@each $value in $values | |
@if $value == 0 or $value == auto | |
$px: append($px, $value) | |
$rem: append($rem, $value) | |
@else | |
$unit: unit($value) | |
$val: parseInt($value) | |
@if $unit == "px" | |
$px: append($px, $value) | |
$rem: append($rem, $val / 16 + rem) | |
@if $unit == "rem" | |
$px: append($px, $val * 16 + px) | |
$rem: append($rem, $value) | |
@if $px == $rem | |
#{$property}: $px | |
@else | |
#{$property}: $px | |
#{$property}: $rem | |
// overflow auto // | |
%overflow-auto | |
clear: both | |
overflow: auto | |
// ------ Cursors ------- // | |
%cursor-pointer | |
&:hover | |
cursor: pointer | |
%overflow-hidden | |
overflow: hidden | |
/* truncate */ | |
=truncate($max-width) | |
width: $max-width | |
white-space: nowrap | |
overflow: hidden | |
text-overflow: ellipsis | |
// ----- Clearfix ----- // | |
%clearfix | |
&:before,&:after | |
content: "" | |
display: table | |
&:after | |
clear: both | |
=box-sizing($box-model) | |
-webkit-box-sizing: $box-model // Safari <= 5 | |
-moz-box-sizing: $box-model // Firefox <= 19 | |
box-sizing: $box-model | |
// ------------------------------------- | |
// Mixins | |
// ------------------------------------- | |
=vertical-center | |
&:before | |
content: "" | |
display: inline-block | |
vertical-align: middle | |
// margin-right: -0.25em | |
height: 100% | |
=triangle($width-left, $width-right, $height, $color) | |
width: 0 | |
height: 0 | |
line-height: 0 | |
border-style: solid | |
border-width: $width-left + px $width-right + px 0 $height + px | |
border-color: $color transparent transparent transparent | |
_border-color: $color #000000 #000000 #000000 | |
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000') | |
-webkit-transform:rotate(360deg) | |
/*** PRESETTED CLASSES ***/ | |
.img-circle | |
border-radius: 50% | |
.clearfix | |
+clearfix() | |
.truncate | |
display: table | |
table-layout: fixed | |
width: 100% | |
white-space: nowrap | |
-webkit-line-clamp: 2 | |
& > * | |
display: table-cell | |
overflow: hidden | |
text-overflow: ellipsis | |
.hide | |
display: none |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment