Close >>
Close >>

Using Sass to Create Linear-Gradients

by abe | 21 Apr 2015 1774 Views

Tweet about this on TwitterShare on FacebookBuffer this pageFlattr the authorShare on Reddit
Social Tips

Hey guys. Here's another addition to my 10 part series on all "Modern Web Development Languages" that I started putting together to help bridge the transition of old tech - CSS - to new tech - SaSS, LeSS. Most of the web development projects that come around the office use SaSS, and I also use it for WordPress Plugins too.

What I'm hoping this will do is give you a better understanding on how to use SaSS and CSS in a modern web development environment to create linear gradients in your divs.

Browser Support

  • Firefox 3.6+ (-moz-)
  • Firefox 16.0+
  • Chrome 10.0+ (-webkit-)
  • Safari 5.1+ (-webkit-)
  • Opera 11.6+ (-o-)
  • Opera 12.1
  • Internet Explorer 10.0


Standard SaSS @mixin equation (inside your .SCSS file)

Take a look at this below, basically a '@mixin' is SCSS selector that acts like a function. What it does is replicate everything that you put in the first time, so you don't have to rewrite the same styles over and over again.


Generates (inside your .CSS file)



 Keeping the same logic, let's add variables!

You can add 1, 2, 3, or more.




Last Modified: April 29, 2017
Written by abe
I write about Web Development, Graphic Design, & Take Photos from Time to Time
Bonoboville: unscene_us
Twitter: unscene_us