Skip to content

Instantly share code, notes, and snippets.

View danielguillan's full-sized avatar

Daniel Guillan danielguillan

View GitHub Profile
@danielguillan
danielguillan / getrandomcolor.rb
Created August 2, 2013 08:32
Sass - Get Random Color
module Sass::Script::Functions
def getRandomColor()
Sass::Script::String.new("#%06x" % (rand * 0xffffff))
end
end
@danielguillan
danielguillan / bem-mixins.scss
Created December 13, 2013 17:00
BEM object definition using mixins - Auto-generated selector names with configurable syntax style. - Enables nesting without actually generating over-specific selectors (>=Sass 3.3). - Generates ids, classes or silent (placeholder) classes. Can be configured per object. - More robust definition, less error-prone. possible future extensions. Over…
$element-separator: '__';
$modifier-separator: '--';
$class-type: '%';
@include block('flag') {
display: table;
width: 100%;
@include element('image') {
padding-right: 10px;
@danielguillan
danielguillan / SassMeister-output.css
Last active August 29, 2015 13:57
Generated by SassMeister.com.
.translate3d.opacity .my-selector {
opacity: 0;
transform: translateY(100%);
}
.no-js .my-selector, .no-translate3d .my-selector, .no-opacity .my-selector {
position: relative;
top: 100%;
display: none;
}
@danielguillan
danielguillan / SassMeister-input.scss
Created March 14, 2014 17:23
Generated by SassMeister.com.
// ----
// Sass (v3.3.2)
// Compass (v1.0.0.alpha.18)
// ----
// =============================================================================
// Modernizr mixin (async)
//
// Table of contents:
// 1. Modernizr mixin
@danielguillan
danielguillan / SassMeister-input.scss
Created March 16, 2014 11:05
Generated by SassMeister.com.
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// ----
// Map storing sizes when the mixin is being called
$sizes: (
width : (),
height : (),
);
@danielguillan
danielguillan / SassMeister-input.scss
Created April 13, 2014 10:52
Generated by SassMeister.com.
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
// =============================================================================
// Modernizr mixin
//
// Table of contents:
// 1. Modernizr mixin
@danielguillan
danielguillan / SassMeister-input.scss
Created May 19, 2014 16:12
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// SassyLists (v1.0.0)
// ----
// =============================================================================
// Z-index Manager
// Early exploration for a z-index manager
//
@danielguillan
danielguillan / SassMeister-input.scss
Created June 2, 2014 11:31
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
$use-fractions: false !default;
$numbers: (1 one whole, 2 two half, 3 three third, 4 four quater, 5 five fifth, 6 six sixth, 7 seven seventh, 8 eight eighth, 9 nine ninth, 10 ten tenth, 11 eleven eleventh, 12 twleve twelfth, 13 thirteen thirteenth, 14 fourteen fourteenth, 15 fifteen fifteenth, 16 sixteen sixteenth);
@mixin widths($prefix: '', $widths...) {
@danielguillan
danielguillan / SassMeister-input.scss
Created June 18, 2014 07:23
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
// =============================================================================
// Mixin-driven BEM definitions
//
// I still don't know whether i like this idea or not.
//
@danielguillan
danielguillan / SassMeister-input.scss
Created June 18, 2014 09:06
Generated by SassMeister.com.
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
// =============================================================================
// Experimenting with BEM maps
//
// Table of contents:
// 1. Demo BEM map