wheresrhys

//Keybindings
[
    { "keys": ["ctrl+e"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} }
]

wheresrhys

<script>
(function() {
	if (Modernizr.classlist && Modernizr.queryselector && Modernizr.localstorage && Modernizr.eventlistener) {
		var j = document.createElement('script');
		j.type = 'text/javascript';
		j.async = true;
		j.src = '/resources/javascript/bundle.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(j, s);
		document.documentElement.className += ' o--js';

wheresrhys

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

$red: '.red';
$red2: '%red2';
@function red () {
 @return '.red'; 
}

wheresrhys

    "debowerify": {
      "version": "0.6.0",
      "from": "debowerify@~0.5.1",
      "dependencies": {
        "through": {
          "version": "2.3.4",
          "from": "through@~2.3.4"
        },
        "falafel": {
          "version": "0.3.1",

wheresrhys

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@mixin featureFlag ($flag) {
  @at-root {
   .#{$flag} & {
    @content;
   }

wheresrhys

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// First comments - whether the placeholder is added via a mixin, variable or function is 
// a red herring. It doesn't even have to be a placeholder - could be a normal selector.
// The problem is essentially to do with using @extend when you're not sure 
// if a part of the selector you're extending already targets the html element
// your new fragment of selector is supposed to target

wheresrhys

<div class="container">
  <div class="topic"><span class="adjuster"><span class="content">topic1</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic2</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic3</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic4</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic5</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic6</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic7</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic8</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic9</span></span></div>

wheresrhys

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// in module A
.featureA {
  %placeholderA {
    content: 'A';
  }

wheresrhys

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

/* So our dependency tree looks like:

   - ModuleB
     - ModuleA
       - UserAgent

wheresrhys

├─┬ brfs@1.0.0
│ ├─┬ escodegen@0.0.17
│ │ ├── esprima@1.0.4
│ │ ├── estraverse@0.0.4
│ │ └─┬ source-map@0.1.33
│ │   └── amdefine@0.1.0
│ ├─┬ falafel@0.1.6
│ │ └── esprima@1.0.4
│ └── through@2.2.7
├─┬ browserify@3.29.1