Skip to content

Instantly share code, notes, and snippets.

View alice-liu's full-sized avatar

alice-liu

1 follower · 0 following
View GitHub Profile
@lunelson
lunelson / SassMeister-input.scss
Created December 4, 2013 11:45
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/
@lunelson
lunelson / SassMeister-input.scss
Created November 8, 2013 07:53
Mixin to Mixin passing of data using 'unique-id()' function
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
/*
Using the unique-id() function to store temporary data in a global map
as a means to pass information to sub-routine mixins and back again
*/
@blackfalcon
blackfalcon / _ico-fonts_haml_sass.md
Last active February 28, 2016 00:50
Icon fonts, HAML and Sass

by Dale Sande

Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

[IcoMoon][IcoMoon] is a fantastic resource that allows users to select specific icons from various libraries, as well as upload custom SVG art and download a customized font library. In the download package there is an HTML document that illustrates the library you just created, but for most professional applications this isn't going to work. Mainly because you will probably not use IcoMoon's code verbatim. Customizing the HTML and CSS per your use is ve

@blackfalcon
blackfalcon / _@each_for_sprites.markdown
Last active December 11, 2015 20:09
Sprites are a pain, @each makes it hurt less

Sprites are a pain in the ass, we all know that. And with a recent reminder of Google's Bootstrap I am once again reminded of the horrible ways that people solve problems.

It's funny to me. We are reminded again and again that universal selectors are bad. We as UI devs are beat over the head time and time again that CSS performance is key. As shown in the wildly popular deck by Jon Rohan, [unqualified selectors][css-deck] are only second in the list of no-no's behind universal selectors. But yet we see them all over the place. Do what we say, but not as we do is the world we live in.

In Google's Bootstrap we see the following icon code, [class^="icon-"], [class*=" icon-"] is the selector? Really?

[class^="icon-"], [class*=" icon-"] { <-- WTF?!
display: inline-block;
width: 14px;