Sass Style Guide

Sass Style Guide

With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you're looking for more examples, Sass Guidelines is another good place to look.

#Use Your Regular CSS Formatting Rules / Style Guide

This post is about Sass-specific stuff, but as a base to this, you should follow a whatever good CSS formatting guidelines you are already following. If you aren't yet, this roundup of style guides may help you. This includes things like:

  • Be consistant with indentation
  • Be consistant about where spaces before/after colons/braces go
  • One selector per line, One rule per line
  • List related properties together
  • Have a plan for class name naming
  • Don't use ID's #hotdrama
  • etc

#List @extend(s) First

.weather {

    @extend %module; ...


Knowing right off the bat that this class inherits another whole set of rules from elsewhere is good. Another benefit is that overriding styles for that inherited set of rules becomes much easier. Knowing when to use @extend versus @include can be a little tricky. Harry does a nice job of differentiating the two plus offers thoughts on how to use them both.

#List @include(s) Next

.weather {
  @extend %module; 
  @include transition(all 0.3s ease-out);

Next up is your @includes for mixins and other functions. Again, this is nice to have near the top for reference, but also allows for overrides. You might also want to make the call on separating user-authored @includes and vendor-provided @includes.

#List "Regular" Styles Next

.weather {

@extend %module;

@include transition(all 0.3s ease-out);

background: LightCyan; ...

Compile imported regular CSS file in SCSS file to SASS @import rule

Compile imported regular CSS file in SCSS file to SASS @import rule

With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files? According to this documentation all files with .css extension, it will be compiled to a CSS @import rule. For example, if style.scss contains:
@import "../../bower_components/animate.css/animate.css";
... it will be compiled to:
@import url(../../bower_components/animate.css/animate.css);
This is not what we want if we are aiming to utilize the minify and merge features of SASS and Compass. Some will rename the .css fileextension to .scss as workaround. But if we are using a package manager like Bower, renaming the file extension is strongly not recommended. This article will show solution to this issue: In your project folder, create mylib.rb file and copy the following codes in this file:
require "sass/importers"
class Sass::Importers::Filesystem
  alias :css_importer :extensions
  def extensions
    css_importer.merge('css' => :scss)
Now we can import regular CSS file(s) in our SASS files. Example if we want to import ../../bower_components/animate.css/animate.css we will write it in SASS file without the .css extension:
@import "../../bower_components/animate.css/animate";
To use our custom ruby library with the compass command line, execute:
compass compile assets/sass/style.scss -r ./mylib.rb
If you are using grunt, you can use the following codes as the reference for your gruntfile.js:
odule.exports = function (grunt) {
    compass: {
      prod: {
        options: {
          config: 'config.rb',
          require: './mylib',
          environment: 'production',
          sourcemap: true
        } // options
      }, // prod
      dev: {
        options: {
          config: 'config.rb',
          require: './mylib',
          sourcemap: true
        } // options
      } // dev
    }, // compass
    watch: {
      sass: {
        files: [
        tasks: ['compass:dev']
      } // sass
    } // watch
  }); // initConfig
  grunt.registerTask('default', 'watch');
  grunt.registerTask('prod', ['compass:prod']);
} // exports
CSS Flexbox – Sass Mixins

CSS Flexbox – Sass Mixins

SassFlexbox comes with a bunch of placeholders and mixins to help you use Flexbox without worrying about vendor prefixes. Whenever possible, extend placeholders are provided to allow you to not create so much duplicated code.
// --------------------------------------------------
// Flexbox SASS mixins
// The spec:
// --------------------------------------------------

// Flexbox display
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

// The 'flex' shorthand
// - applies to: flex items
// , initial, auto, or none
@mixin flex($values) {
  -webkit-box-flex: $values;
     -moz-box-flex: $values;
      -webkit-flex: $values;
  	  -ms-flex: $values;
  	      flex: $values;

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
     -moz-flex-direction: $direction;
      -ms-flex-direction: $direction;
          flex-direction: $direction;

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
@mixin flex-wrap($wrap) {
  -webkit-flex-wrap: $wrap;
     -moz-flex-wrap: $wrap;
      -ms-flex-wrap: $wrap;
          flex-wrap: $wrap;

// Flex Direction and Wrap
// - applies to: flex containers
//  || 
@mixin flex-flow($flow) {
  -webkit-flex-flow: $flow;
     -moz-flex-flow: $flow;
      -ms-flex-flow: $flow;
          flex-flow: $flow;

// Display Order
// - applies to: flex items
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
     -moz-box-ordinal-group: $val;     
  	     -ms-flex-order: $val;     
  	      -webkit-order: $val;  
  		      order: $val;

// Flex grow factor
// - applies to: flex items
@mixin flex-grow($grow) {
  -webkit-flex-grow: $grow;
     -moz-flex-grow: $grow;
      -ms-flex-grow: $grow;
          flex-grow: $grow;

// Flex shrink
// - applies to: flex item shrink factor
@mixin flex-shrink($shrink) {
  -webkit-flex-shrink: $shrink;
     -moz-flex-shrink: $shrink;
      -ms-flex-shrink: $shrink;
          flex-shrink: $shrink;

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
@mixin flex-basis($width) {
  -webkit-flex-basis: $width;
     -moz-flex-basis: $width;
      -ms-flex-basis: $width;
          flex-basis: $width;

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
     -moz-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
            -ms-flex-pack: $justify;

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch 
@mixin align-content($align) {
  -webkit-align-content: $align;
     -moz-align-content: $align;
      -ms-align-content: $align;
          align-content: $align;

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
@mixin align-items($align) {
  -webkit-align-items: $align;
     -moz-align-items: $align;
      -ms-align-items: $align;
          align-items: $align;

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
@mixin align-self($align) {
  -webkit-align-self: $align;
     -moz-align-self: $align;
      -ms-align-self: $align;
          align-self: $align;
Differences Between Bootstrap 3 and 4

Differences Between Bootstrap 3 and 4

Bootstrap 4 brought some major changes, adding new components, scrapping others. Here's the difference between Bootstrap 3 and Bootstrap 4.
Component Bootstrap 3 Bootstrap 4
Source CSS Files LESS SCSS
Primary CSS Unit px rem
Media Queries Unit px px
Global Font Size 14px 16px
Default Fonts Helvetica Neue, Helvetica, Arial, sans-serif Uses a "native font stack" (user's system fonts), with a fallback to Helvetica Neue, Arial, and sans-serif
Grid Tiers 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl).
Offsetting Columns Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4. Uses offset-*-* classes to offset columns. For example, offset-md-4.
Inverse Tables Not supported. Added inverse tables with the .table-inverse class.
Table Head Styles Not supported. Added table head styles with the .thead-default and .thead-inverse classes.
Condensed Tables .table-condensed .table-sm
Contextual Classes Bootstrap 3 doesn't use the .table- prefix for its contextual classes. For example, Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger). Added the .table- prefix for its contextual classes.
Responsive Tables The .table-responsive class must be added to a parent div element. Can add .table-responsive to the actual table element.
Reflow Tables Not supported. Added reflow tables with the .table-reflow class. Reflow tables have now been dropped.
Horizontal Forms Horizontal forms require the .form-horizontal class. Forms don't require .row when using grids (although this class is still a requirement on Bootstrap 3 grids in general). Bootstrap 4 dropped the .form-horizontal class — it is no longer needed to display horizontal forms. Forms require the .row class when using grids.
Use .control-label when using grids for form layout. Bootstrap 4 uses .col-form-label * when using grids for form layout. * Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.
Checkboxes and Radio Buttons Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons. Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.
Form Control Size Use .input-lg and .input-sm to increase or decrease the size of an input control. Use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.
Help Text Use the .help-block class to display help text. Bootstrap 4 uses the .form-text class to display help text. Bootstrap 4 forms don't have an official class for help text. Instead, the .text-muted class was introduced for more flexibility.
Validation and Feedback Icons Includes validation styles for error, warning, and success states on form controls (for example, .has-warning). To present icons on the input fields using Bootstrap 3, use glyphicons. Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.
Legends No classes for styling the form legends. Provides the option of using .col-form-legend on legend elements to style it more like a label.
Custom Forms Not supported. Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
Styles Includes the .btn-default and .btn-info classes. The .btn-secondary class isn't available in Bootstrap 3. Introduced the .btn-secondary, .btn-light, and .btn-dark classes. Dropped the .btn-default class. Note that the .btn-info class was initially dropped in Bootstrap 4 but then reappeared again.
Outline Buttons Not supported. Introduced the .btn-outline-* classes for styling buttons with an outline color. Introduced the .btn-*-outline classes for styling buttons with an outline color. (The .btn-*-outline classes became .btn-outline-* in Alpha 3).
Button Sizes The .btn-xs class is available. Dropped the .btn-xs class (only .btn-sm and .btn-lg are available now).
Responsive Images Use .img-responsive class. Use .img-fluid class.
Image Alignment Use .pull-right, .pull-left, and .center-block helper classes. Uses .m-x-auto instead of .center-block to align block-level images. Can also use the various .pull-*-right and .pull-*-left responsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-right helper classes on the image's parent. Can use the various .pull-*-none classes to disable floating.
Media Objects
Classes Includes many different classes for media objects, including .media, .media-body .media-object, .media-heading, .media-right, .media-left, and .media-list and .media-body. Uses just .media class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).
Structure Apply dropdowns to lists (i.e. using ul and li). Dropdowns can be built with ul or divs. Apply the .dropdown-item to a a or button element and wrap them all in a div (or ul) with a .dropdown-menu class applied.
Menu Headers Apply .dropdown-header to the li tag. Apply .dropdown-header to h1 - h2 tags (as Bootstrap no longer uses li tags to build dropdowns).
Dividers Apply the .divider class to the li element (because it used lists to build dropdowns). Apply the .dropdown-divider to the div element.
Disabled Menu Items Apply the .disabled class to the li element. Apply the .disabled class to the a element.
Button Groups
Justified? Supports justified button groups (via the .btn-group-justified class). Not supported.
Extra Small? Supports extra small button groups (via the .btn-group-xs class). Not supported (dropped the .btn-group-xs class).
Inline Navs There is no .nav-inline class. Can use the .nav-inline class to explicitly specify navs to be displayed inline.
Colors Limited (preset) color options. Supports inverse navbars but not the other classes. New (preset) color options. Introduced the .navbar-light and the .navbar-dark classes, and allows the .bg-* classes to be used on navbars.
Navbar Alignment Use .navbar-right, .navbar-left to align components within the navbar. Use the various .pull-*-right and .pull-*-left responsive helper classes. Can also use the various .pull-*-none classes to disable floating. Can either use spacing utilities such as .mr-auto, or any of the flexbox alignment utilities.
Navbar Forms Add the .navbar-form class to forms within navbars. Bootstrap 4 dropped the .navbar-form class. It's no longer necessary.
Fixed Navbars Uses .navbar-fixed-top and .navbar-fixed-bottom to fix navbars to the top or bottom. Uses .fixed-top and .fixed-bottom.
Default Pagination Only requires .pagination to be added (to the ul element that represents the list of pages). Must also add .page-item to each li element and .page-link to each a element.
Pagers Uses .previous and .next for aligning pagers. Pagers have been dropped in Bootstrap 4 (Alpha 3). Uses .pager-prev and .pager-next for aligning pagers.
Pill Labels The .label-pill class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect). Labels have been replaced by badges in Bootstrap 4. Badges can use the .badge-pill for rounded corners.
Supported? No. "Tags" are called "Labels" in Bootstrap 3 (i.e. they use the .label class). Yes. The .tag class was introduced in Bootstrap 4 (Alpha 3) to replace the .label class. This was done to disambiguate from the label element. Tags have now been renamed to "badges". These replace labels from Bootstrap 3.
Full-Width The .jumbotron-fluid class is not required on full-width jumbotrons. Introduced the .jumbotron-fluid class for full-width jumbotrons.
Progress Bars
Uses progress? Doesn't use the progress for progress bars. Instead, applies progress bar classes to nested div elements. Uses the HTML5 progress element when working with progress bars. Using the progress element was abandoned in Alpha 6. Bootstrap 4 now uses the div element again.
Supported? Supported. Not supported.
Blockquotes Bootstrap styles are applied to the blockquote element by default. Introduced the .blockquote class for styling the blockquote element (i.e. styling this element is now opt-in).
Blockquote Alignment Use .blockquote-reverse to align a blockquote to the right. Use the text utilities to align blockquotes (.text-center and .text-right).
Page Headers The .page-header class is supported. The .page-header class is not supported.
Description Lists The .dl-horizontal class was used to declare a horizontal list. Horizontal lists are now declared with the .row class on the dl tag, then any of the grid system's predefined classes to the dt and dd tags.
Non-Responsive Usage
Supported? Supported. You can specify a layout to be non-responsive. Not supported.
List Groups
Linked List Items / Button List Items Apply .list-group-item to the a element. Apply .list-group-item-action to the a element.
Show content Uses .in to have content expanded upon page load. Uses .show to have content expanded upon page load.
Supported? Not supported. Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.
Supported? Supported. Not supported. Use cards instead.
Supported? Supported. Not supported. Use cards instead.
Supported? Supported. Not supported. Use cards instead.
Classes Uses the .breadcrumb class against the ul tag. Also requires .breadcrumb-item to be applied against all li elements that make up the breadcrumb. Breadcrumbs can also be used outside of lists. For example, the .breadcrumb-item could be applied to a bunch of a elements that are wrapped in a .breadcrumb element.
Carousel Item Use .item class. Use .carousel-item class.
Supported? Yes. No.
Custom Checkbox using SASS

Custom Checkbox using SASS

Styling default checkbox using SASS.


<div class="custom-checkbox">
        <input type="checkbox" name="">                                                   
        <span class="checkbox-icon"></span>
        <span class="checkbox-text">Select</span>

Color Variables

$primary_color    : #000;
$fonts_1          : FontAwesome;


@mixin transition($transition...){
  transition: $transition;
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;

SASS Structure

	position: relative;
	display: inline-block;
	min-height: 19px;
	padding: 0px 0px 0px 27px;

		margin: 0;
		padding: 0;
		display: block;
		width: 19px;
		height: 19px;
		display: block;
		background: lighten($primary_color, 95%);
		border: lighten($primary_color, 80%) 1px solid;
		position: absolute;
		top: 0px;
		left: 0px;
		text-align: center;

			content: "\f00c";
			font-family: $fonts_1;
			font-size: 13px;
			color: lighten($primary_color, 40%);
			display: block;

			opacity: 0;
			filter: alpha(opacity=0);

			transform: translate(4px, 0px);
			-webkit-transform: translate(4px, 0px);
			-moz-transform: translate(4px, 0px);
			-ms-transform: translate(4px, 0px);
			-o-transform: translate(4px, 0px);

			@include transition(all ease 0.2s);
		display: none;

		&:checked + span.checkbox-icon{

				filter: alpha(opacity=100);

				transform: translate(0px, 0px);
				-webkit-transform: translate(0px, 0px);
				-moz-transform: translate(0px, 0px);
				-ms-transform: translate(0px, 0px);
				-o-transform: translate(0px, 0px);

		font-size: 14px;
		padding-top: 1px;