Tag: Sass Page 1 of 2

Sass

Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass. This download is only available for members. Sign In | Become a Member How-to-Use Copy…

Fullscreen Masterhead

Masthead using Sass

In this tutorial, we will show you how to create a simple masthead using HTML and Sass. This masthead is not fullscreen. Check out our tutorial about making…

Fullscreen Masterhead

Fullscreen Masthead using Sass

In this tutorial, we will teach you how to create a fullscreen masthead using HTML and Sass. First, let’s create the HTML. <div class=”masthead”> <h1>Welcome.</h1> </div> <div class=”container”>…

Sass

Custom Scrollbar Sass Mixin

The following is a Sass mixin that will allow you to customize the browser’s scrollbar. // @include scrollbars(.5em, foreground, background); @mixin scrollbar($size, $foreground-colour, $background-colour: mix($foreground-colour, white, 50%)) {…

Compile Sass using Grunt

Grunt or GruntJS is a JavaScript task runner. Grunt allows you to automate repetitive tasks like minification, compilation, unit testing and linting. In this tutorial, we are going to use Grunt to compile Sass, a CSS preprocessor.

Linear Gradient Background Sass Mixins

In this tutorial, I’m going to show you how-to create Sass mixins for linear gradient backgrounds.

Vendor Prefix Sass Mixin

Vendor prefixes is where browser vendors add prefixes to experimental or non-standard CSS properties. This tutorial will show you how-to create a vendor prefix Sass mixin, so you don’t need to remember to add them to certain CSS properties or type them out.

Social Sharing Buttons for Material Design Lite using Font Awesome and Sass

This tutorial will show you how-to create social media sharing buttons for the Material Design Lite front-end framework using Sass and Font Awesome.Example of what we will create:…

Material Design Bootstrap Buttons using Sass

In this tutorial, I’m going to show you how-to create Bootstrap buttons based on Material Design’s colour palette using Sass stylesheet language.Example of what we will create: See…

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…

Radial Gradient Background Sass Mixin

In a previous tutorial, I showed you two Sass mixins to create linear gradient backgrounds. In this tutorial, I’m going to show you how-to create a single radial…

Twitter Bootstrap Button using Sass and Font Awesome

In this tutorial I’m going to show you how-to create a Twitter button for the Bootstrap front-end framework using Sass and Font Awesome.##The Final Result This is what…

Border Sass Mixin

The following are two (2) Sass mixins for the CSS border properties. The first mixin is for the border shorthand property and the second mixin is for specifying…

Border Radius Sass Mixin

In this tutorial, I’m going to show you five (5) Sass mixins for the CSS3 border-radius property. The first one will be for multiple sides (shorthand) and the…

Padding Sass Mixin

The following are two (2) Sass mixins for the CSS padding property. The first mixin is for the padding shorthand property and the second mixin is for specifying…