Compile examples CSS with Sass using BS variables and mixins

Gruntfile.js

@@ -209,11 +209,16 @@ module.exports = function (grunt) {
     // CSS build configuration
     scsslint: {
       options: {
-        bundleExec: true,
-        config: 'scss/.scss-lint.yml',
-        reporterOutput: null
+          bundleExec: true,
+          config: 'scss/.scss-lint.yml',
+          reporterOutput: null
+        },
+      core: {
+        src: ['scss/*.scss', '!scss/_normalize.scss']
       },
-      src: ['scss/*.scss', '!scss/_normalize.scss']
+      examples: {
+        src: ['docs/assets/scss/examples/**/*.scss']
+      }
     },
 
     postcss: {
@@ -470,7 +475,7 @@ module.exports = function (grunt) {
     require('./grunt/bs-sass-compile/' + sassCompilerName + '.js')(grunt);
   })(process.env.TWBS_SASS || 'libsass');
   // grunt.registerTask('sass-compile', ['sass:core', 'sass:extras', 'sass:docs']);
-  grunt.registerTask('sass-compile', ['sass:core', 'sass:docs']);
+  grunt.registerTask('sass-compile', ['sass:core', 'sass:docs', 'sass:examples']);
 
   grunt.registerTask('dist-css', ['sass-compile', 'postcss:core', 'csscomb:dist', 'cssmin:core', 'cssmin:docs']);
 

docs/assets/scss/examples/album/album.scss

@@ -0,0 +1,89 @@
+// Load Bootstrap variables and mixins
+@import "../../../../../scss/variables";
+@import "../../../../../scss/mixins";
+
+body {
+  min-height: 75rem; /* Can be removed; just added for demo purposes */
+}
+
+.navbar {
+  margin-bottom: 0;
+}
+
+.navbar-collapse .container-fluid {
+  padding: 2rem 2.5rem;
+  border-bottom: 1px solid #55595c;
+}
+
+.navbar-collapse h4 {
+  color: #818a91;
+}
+
+.navbar-collapse .text-muted {
+  color: #818a91;
+}
+
+.about {
+  float: left;
+  max-width: 30rem;
+  margin-right: 3rem;
+}
+
+.social a {
+  font-weight: 500;
+  color: #eceeef;
+}
+.social a:hover {
+  color: #fff;
+}
+
+.jumbotron {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+
+.jumbotron p:last-child {
+  margin-bottom: 0;
+}
+
+.jumbotron-heading {
+  font-weight: 300;
+}
+
+.jumbotron .container {
+  max-width: 40rem;
+}
+
+.album {
+  min-height: 50rem; /* Can be removed; just added for demo purposes */
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  background-color: #f7f7f7;
+}
+
+.card {
+  float: left;
+  width: 33.333%;
+  padding: .75rem;
+  margin-bottom: 2rem;
+  border: 0;
+}
+
+.card > img {
+  margin-bottom: .75rem;
+}
+
+.card-text {
+  font-size: 85%;
+}
+
+footer {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  p {
+    margin-bottom: .25rem;
+  }
+}

grunt/bs-sass-compile/libsass.js

@@ -27,6 +27,11 @@ module.exports = function configureLibsass(grunt) {
         files: {
           'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
         }
+      },
+      examples: {
+        files: {
+          'docs/examples/album/album.css': 'docs/assets/scss/examples/album/album.scss'
+        }
       }
     }
   });

grunt/bs-sass-compile/sass.js

@@ -31,6 +31,12 @@ module.exports = function configureRubySass(grunt) {
         files: {
           'docs/assets/css/docs.min.css': 'docs/assets/scss/docs.scss'
         }
+      },
+      examples: {
+        options: options,
+        files: {
+          'docs/examples/album/album.css': 'docs/assets/scss/examples/album/album.scss'
+        }
       }
     }
   });

scss/.scss-lint.yml

@@ -17,7 +17,7 @@ linters:
 
   Comment:
     enabled: true
-    exclude: ['_normalize.scss', 'bootstrap.scss']
+    exclude: ['_normalize.scss', 'bootstrap.scss','../docs/assets/scss/examples/**/*.scss']
 
   DebugStatement:
     enabled: true