Reproducing potential Sass bug with extending silent classes from within silent classes using grunt-sass. To test, Download files, cd to directory and: npm install grunt Logged bug for grunt-sass here https://github.com/sindresorhus/grunt-sass/issues/40

gruntfile.js

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {                                 // Task
        dist: {                             // Target
            files: {                        // Dictionary of files
                'style.css': 'style.scss'     // 'destination': 'source'
            }
        },
        dev: {                              // Another target
            options: {                      // Dictionary of render options

            },
            files: {
                'style.css': 'style.scss'
            }
        }
    }
  });

  grunt.loadNpmTasks('grunt-sass'); /* this doesn't work, creates a bad selector (%focusable:active, %focusable:focus, #mydiv) */
  /* grunt.loadNpmTasks('grunt-contrib-sass'); */ /* this works */


  // Tasks
  grunt.registerTask('default', ['sass:dev']);
};

packages.json

{
  "name": "extendextend",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-sass": "~0.6.1",
    "grunt-contrib-sass": "~0.5.0"
  }
}

style.css

%focusable:active, %focusable:focus, #mydiv { /* bad selector generated by grunt-sass (grunt-contrib-sass works correclty) */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

style.scss

%visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

%focusable:active,
%focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  @extend %visuallyhidden;
}

#mydiv {
	@extend %visuallyhidden;
}