othersmallcities
/ _icons.scss
Last active
August 29, 2015 13:55
— forked from morewry/_icons.scss
compass retina sprite with placeholder
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
| $disable-magic-sprite-selectors: true; | |
| $icons-inline: false; | |
| $icons-sprite-base-class: "%icons-sprite"; | |
| $icons-layout: vertical; //must in order to get the correct position! -> this appears to be a bug in Compass 0.12.2; @include background-size gives the correct posititon, $var-sprite-position($img) does not. | |
| $icons: sprite-map("folder-name/*.png"); | |
| @import "folder-name/*.png"; | |
| @each $img in sprite-names($icons) { | |
| %icon-#{$img} { | |
| @extend %icons-sprite; |
morewry
/ _sprite.scss
Last active
August 29, 2015 13:57
Compass sprites with placeholder (use compass icon sprites with placeholders) instead of class selectors (except the generated sprite map) and retina support
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
| /* | |
| # Sprite (Theme) | |
| */ | |
| // --------------------------------------- | |
| // Config | |
| $disable-magic-sprite-selectors: true; | |
| $sprite-default-margin: 1px; | |
| $sprite-debug: true; |
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
| // ---- | |
| // Sass (v3.3.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // Flint (v1.3.5) | |
| // ---- | |
| @import "flint"; | |
| // Customization module defaults | |
| // ------------------------------------------------------------------------------- |
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
| http://plnkr.co/edit/G6wObW2hXYvqlGcGJoEU?p=preview | |
| http://plnkr.co/edit/uZ4qQDJIH2htNXLswsqY?p=preview | |
| http://plnkr.co/edit/GrKmTFPfzkFvVWi1vkKJ?p=preview | |
| http://plnkr.co/edit/Z7wrznN1l7i469cYEOke?p=preview | |
| http://plnkr.co/edit/mONgKU4XRqZlJ5RPKDQL?p=preview | |
| http://plnkr.co/edit/11BbgDmxH2nDntgYLO1V?p=preview |
chriseppstein
/ custom_functions.rb
Created
October 8, 2010 22:03
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
| module Sass::Script::Functions | |
| def user_color | |
| color_values = options[:custom][:user].color. | |
| scan(/^#?(..?)(..?)(..?)$/).first. | |
| map {|num| num.ljust(2, num).to_i(16)} | |
| Sass::Script::Color.new(color_values) | |
| end | |
| end |
morewry
/ _include-or-extend-defaults.scss
Last active
October 1, 2015 21:07
Sass @include or @extend with generated selectors & override-able 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
| // --------------------------------------- | |
| /* | |
| http://codepen.io/morewry/pen/meBtj | |
| Use case for defaults: | |
| providing interface points to override framework defaults with more flexibility and granularity than variables can reasonably provide, ie customize normalizations without editing the stylesheet directly (@content in reverse) | |
| Use case for swapping extend or include: |
morewry
/ config.rb
Last active
October 1, 2015 21:07
"Ad Hoc" Compass plugins config.rb, potentially useful for dealing with compass plugins through bower instead of as gems. Set up a plugin similarly to https://github.com/Team-Sass/Compass-Extension-Template
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
| # make ad hoc compass frameworks behave (show up in list, be import-able like normal) | |
| # custom vars | |
| thisplugin_dir = (yours) | |
| # compass config | |
| extensions_dir = (yours) | |
| extensions_path = project_path + extensions_dir | |
| additional_import_paths = [extensions_dir, extensions_dir + thisplugin_dir + 'stylesheets'] |
morewry
/ respond-to.scss
Last active
October 1, 2015 21:07
Sass mixin for nicknamed, comma-separated "or" media queries
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
| /* | |
| # Responsive Design Utilties | |
| A few Sass functions and mixins helpful for responsive designs including a function to convert between CSS measurement units and a respond-to media query mixin that supports comma-separated "or" queries. | |
| */ | |
| // --------------------------------------- | |
| // --------------------------------------- | |
| /* |
morewry
/ sass-extend-or-include-wish
Created
April 3, 2014 03:23
Something I wish I could do in Sass
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
| // --------------------------------------- | |
| /* | |
| ## Set / Get | |
| http://cdpn.io/hgLal | |
| */ | |
| // --------------------------------------- |
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
| /* | |
| # Convert Units (function) | |
| TODO: Description | |
| */ | |
| // --------------------------------------- | |
| @function convert-units ( $length, $as: rem, $root: 16, $ppi: 96 ) { | |
| $unit: unit($length); |
OlderNewer