jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

petsel

(function () {

  var
    global = this,

    ArrProto = global.Array.prototype,

    proto_slice = ArrProto.slice,
    proto_map = ArrProto.map,
    proto_reduce = ArrProto.reduce,

stuntbox

/**
* Filter out hard-coded width, height attributes on all images in WordPress. 
* https://gist.github.com/4557917
*
* This version applies the function as a filter to the_content rather than send_to_editor. 
* Changes made by filtering send_to_editor will be lost if you update the image or associated post 
* and you will slowly lose your grip on sanity if you don't know to keep an eye out for it. 
* the_content applies to the content of a post after it is retrieved from the database and is "theme-safe". 
* (i.e., Your changes will not be stored permanently or impact the HTML output in other themes.)
*

EdPoole

@mixin vendorPrefix($property, $arguments) {
        -webkit-#{$property}: $arguments;
	   -moz-#{$property}: $arguments;
	    -ms-#{$property}: $arguments;
	     -o-#{$property}: $arguments;
	        #{$property}: $arguments;
}

/* HOW TO CALL IT */

blackfalcon

Sass' Silent Placeholder function works the same as normal CSS extending in the cascade

This example here illustrates how that Sass will extend a silent selector in the cascade the same way that a normal selector would. The only difference is that silent placehodlers are not processed into CSS until they are called into a selector that is processed into CSS.

Play with this in SassMeister to see how the processed CSS changes between the different selectors. http://sassmeister.com/gist/4512325

blackfalcon

by Dale Sande

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Large CSS files and increased complexity

CSS started out with very simple intentions, but as [tableless web design][1.1] began to really take a foothold, o

Wilto

( Conversation started here, with @murtaugh and @zeldman. )

Ah man, I got Opinions™ on this. I ususally go with something like:

<aside>
  <h1>Optional Heading</h1>
  <blockquote>
  	<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>

blackfalcon

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

michsch

// YAML Columns mixins
//
// Documentation:
// http://www.yaml.de/docs/index.html#yaml-columns

$ym-col1-width			: 25% !default;
$ym-col2-width			: 50% !default;
$ym-col3-width			: 25% !default;

$ym-column-layout		: 'table' !default;

stevemckinney

$white: #fff;
$black: #000;
$radius: 5px;
$sans: "Helvetica", sans-serif;
$default: #88a23d;

@mixin element-base {
	@include background-clip;
	@include transition(none);
	@include appearance(none);