Sass Theme

Version:

Framework:
Style Sheet Language:
JavaScript Task Runner:

Platform:

The Sass Bootstrap Theme is an SASS language inspired Twitter Bootstrap theme. It features a primary pink and grey colour scheme with clan typography. It is a great theme for web designers, web developers, fashion websites or blogs, or other design website.

Bootstrap’s glyphicons are not included. If you wish to use font icons, I would highly recommend Font Awesome.

This theme comes in minified or unminified assets, plus the ability to make the components gradients, instead of the default flat UI.

[screenshot]

Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass.

Features

Here are the main features of the Sass Mixin Library:

  • Simple to add to your project and use in your project;
  • Adjust variables to your liking; and
  • Save tons of time and typing.

Supported Mixins

Sass Mixin Library currently supports the following Sass mixins:

  • Background gradients (top to bottom, left to right, gradient)
  • Background opacity
  • BEM front-end naming methodology
  • Border
  • Border image
  • Border radius
  • Breakpoints for responsive design
  • Clearfix
  • Font face
  • Font size (rem)
  • Height and width size
  • Margin
  • Padding
  • Text shadow
  • Vendor prefixes helpers

How-to Use

Copy the _mixins.scss file and mixins directory to your project. Add the following to your core file or file in which you want mixins to be added:

@import "mixins";

Example of implementation can be found in test.scss.

Example Output

Input:

.clearfix {
    @include clearfix;
}

Output:

.clearfix {
    *zoom: 1; 
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

BEM Sass Mixins

The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology.

BEM Sass Mixins

The Sass mixin for BEM element is:

// BEM Element
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

The Sass mixin for BEM modifier is:

// BEM Modifier
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

BEM Sass Mixins Usage

Here is how you would use the BEM Sass mixins:

.block {
  /* Add .block CSS here */

    @include element('element-name') {
      /* Element CSS goes here */
    }

    @include modifier('modifier-name') {
          /* Modifier CSS goes here */

        @include element('element-name') {
            /* Element of Modifier CSS goes here */
        }
    }

}

Where element-name and modifier-name is the name of the element and modifier.

As you can see, the block wraps around everything. The element and modifier of the block goes inside the block CSS class. If there is an element of the modifier, the element would go inside the modifier.