Where to start with SCSS?

It can be a bit overwhelming to try to find the best resources to learn from, so I have a few SCSS resources to point you in the right direction.

If you’re familiar with CSS, SCSS can be an easy language to get used to. A lot of what you need to know you can find right on sass-lang.com/guide. If you read that page from top to bottom, you’ll get a solid understanding of the language and how it works. Fair warning, the term “Sass” is thrown around pretty loosely. It is commonly used to describe both Sass and SCSS but there is a big difference between the two, as you can see in the examples on sass-lang.

After you get the hang of how those pieces work, check out the the well-documented and very over-kill example I put together below. It uses most of the pieces that you’ll read about on the sass-lang basics, and also a small example of why SCSS is so useful.

CodePen result

See the Pen a45c060c16f8969ed2e9751adb5ae271 by Maxwell Morgan (@maxinacube) on CodePen.0

CodePen SCSS


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);

/*
SCSS variables are always prefixed with $
*/

// Color Variables
$primary: #2876fc;
/*
complement is a built in function that accepts 1 argument for color.

The function will return a color that works well with the color provided.
*/
$secondary: complement($primary);
$light: #eee;
$dark: #222;

// Button variables
$btn-height: 30px;

/*
Functions will return information where it has been called

In the function below, text-color accepts one argument for color, determines how much lightness the color has, and then returns a light or dark color.

I use this to try and dynamically set the
font-color on an element based on it's
background-color.
*/
@function text-color( $color ) {
@if ( lightness($color) > 50% ) {
@return #111;
} @else {
@return #eee;
}
}

/*
Mixins are reusable chunks of code that
accept arguments to dynamically control output.
*/
@mixin button ( $bkg: $primary, $color: text-color($bkg) ) {
background: $bkg;
color: $color;
display: inline-block;
line-height: $btn-height;
opacity: 1;
padding: 0 10px;
text-shadow: 0 1px 1px darken($primary, 15%);
transition: opacity 250ms;
&:hover {
opacity: .8;
}
}

/*
cta-button is meant to be used in tandem with the button mixin. This mixin extends button by adding either a left or right arrow.

Because the CTA appends an arrow using a border, the background color will not inherit from the button. By default, the background-color for button and border-color for cta-button are set to $primary.
*/
@mixin cta-button ( $dir: right, $color: $primary ) {
margin-#{$dir}: $btn-height/2;
position: relative;

&:before {
content: '';

border-bottom: $btn-height/2 solid transparent;
border-top: $btn-height/2 solid transparent;

position: absolute;
bottom: 0;
top: 0;

@if ( $dir == right ) {
border-left: $btn-height/2 solid $color;
left: 100%;
} @else {
border-right: $btn-height/2 solid $color;
right: 100%;
}
}
}

:root {
background-color: $primary;
color: $dark;
font-family: 'Open Sans', Helvetica, sans-serif;
}

* {
box-sizing: border-box;
*,
&:before,
&:after {
box-sizing: inherit;
}
}

code {
background: rgba(black, .1);
padding: 0 4px;
}

#buttons {
background: $light;
/*
darken() and lighten() are built functions
that accept 2 arguments;
color, percent 0% – 100%

They will take the color and add/remove
lightness by the percent passed
*/
border: 5px solid darken($light, 10%);
margin: 50px auto;
max-width: 94%;
width: 600px;
padding: 20px;
img {
border-radius: 100%;
}
}

.button {
// To use a @mixin, you @include mixin-name
@include button;

&.cta {
@include cta-button;
}

/*
Typically if you wanted a button with a
specific text color or background-color,
you can just add another class and style
for that difference.

In a real world situation, this isn't the
best way to set this style. This writes a
mess of additional properties that you don't
need, but it's a good example.

With background-color being the first
argument in the @mixin, you can change that
by listing the color on it's own. If you want
to explicity set background and color, you
can comma separate the 2 arguments.
*/
&.secondary {
@include button($secondary);
}

/*
If you want pass an argument but it's not in
the order they're listed in the @mixin, you
must find the name of the argument as written
in the @mixin and set it by name.
*/
&.color-secondary {
@include button($color: $secondary);
}
}

See the Pen a45c060c16f8969ed2e9751adb5ae271 by Maxwell Morgan (@maxinacube) on CodePen.
0

A few other sites to bookmark:

CodePen is the easiest way to practice writing SCSS. If you go to codepen.io/pen, you can start a new pen. To use SCSS, click the gear icon in the CSS portion of the window and select Sass (.scss).

CSS-Tricks is worth poking around the whole site. It was founded by Chris Coyier, the man behind CodePen. The link will bring you to Sass snippets, but there are so many useful articles on that site for any aspect of front-end development.

The Sass Way has a lot of examples and is built on contributions from the community, very cool and such a good way to find how others leverage the power of Sass.

This should point you in the right direction toward learning what you need to know to become an SCSS expert and enthusiast. Take it in as small pieces, get used to the parts individually and it will all come together!

Have a pen that you want to share? Comment here or tweet us @linchpin_agency!

Tags: sass

Maxwell Morgan

Max Morgan is a front end enthusiast specializing in Sass and JavaScript, and dabbles in WordPress and Magento theme development.

| @maxinacube