Sass is a seriously powerful web development tool. When it was first released, to install and use Sass requiredthe command lineand a Ruby framework. This was a big turn-off for many newcomers.

But what if I told you, today, you can start using Sass within minutes? What if I told you that you could do it without ever launching your command line? You can.

I’ll walk you through the process of setting up a Sass project with Prepros. Prepros is a tool for compiling Sass to CSS. (Prepros can also handle Jade, CoffeeScript, Less, Stylus and more .) In this tutorial we’ll create aresponsive web design using Sass, with the help of Prepros.

View DemoDownload the CodeOK, let’s get started!

Install Prepros

First step:Download Prepros. Prepros is available on Windows, Mac OS and Linux.

After downloading Prepros, install it on your computer just like any other desktop software:Prepros is free to use.But whenever you launch Prepros — and every now and then, when you’ve been using it for hours — it will remind you to buy a license. Personally, the notifications don’t bother me. But if you derive a lot of value from Prepros, I encourage you to buy a license to support its developers.

Sometimes Prepros will bug you to buy a license.

Set Up the Sass Project

Let’s set up our Sass project in Prepros. You can do this one of two ways:

1. Drag-and-drop your project folder into the Prepros window
2. or clickADD PROJECT

If you have no files in your project folder, Prepros will tell you that your “Project is empty.”:After adding a project, if you look inside your project folder, you’ll see Prepros created a new file. The new file is calledprepros.cfg. If you’re curious: This file contains the configuration settings of your project.

Create the Project Files

Let’s create the files for our Sass project. Use your favoritecode editorfor this. Here’s the project’s initial file structure:In the root of the project folder, we have 2 files:

• index.html— this is our web page.
• style.scss— This file just imports our Sass files. Prepros will automatically compile this into a CSS stylesheet namedstyle.css.

Then we have a sub-folder calledscss. This sub-folder contains our five Sass stylesheets:

• variables.scss— contains Sass variables that we’ll reuse throughout our project.
• mixins.scss— contains our Sassmixins.
• base.scss— the default style rules for HTML elements.
• layout.scss— style rules for the web page’s layout.
• components.scss— reusable class and ID selectors.

The project files are structured in a modular way, even though we’re only building a simple landing page. This level of CSS modularization is most beneficial incomplex, large-scale websites, though.

Import the Sass Stylesheets

We’ll import the five Sass stylesheets that are inside thescssfolder into the stylesheet namedstyle.scss.

This is the code that goes instyle.scss:

@import 'scss/variables'; @import 'scss/mixins'; @import 'scss/base'; @import 'scss/layout'; @import 'scss/components';

After savingstyle.scss, a new file will be created. It will be calledstyle.css— this is our project’s stylesheet. What you’ll notice later on is that whenever we update one of our Sass files, Prepros will also automatically updatestyle.css.

Right now,style.cssis empty only because our Sass files are also empty.You’re now ready to use Sass!If all went well, the whole process would’ve taken you just a few minutes. As promised.

Create a Web Design with Sass

To make sure everything’s working properly, why don’t we create a web design?View DemoDownload the Code

HTML

First, let’s work on our HTML. Place the following insideindex.html:

     
  
  
 
 
You Can Use Sass Within Minutes
 Read the tutorial 
 
 
 
 
What is This?
 
Sass was used to craft the CSS of this web page.
The Sass files were processed by Prepros, a tool that can compile Sass, as well as Less, Stylus, Jade, CoffeeScript and more.
 
 
 
 
 
Learn More
 
Does Sass seem hard to set up?
 
Does it seem like it'll take you hours/days to get started? Are you afraid of the command line?
 
You can use Sass in minutes, without ever stepping foot in a command line.
 Learn How 
 
 
 
 
By Six Revisions. Photos from Pexels.
 
 
  

Notice that we’re referencingstyle.css.We’re not referencing any of our Sass files in the markup.

That’s because Prepros will automatically compile our Sass code into regular CSS and place it instyle.css.

Write Some Sass

Now let’s write some Sass. I’ll go through the code for each Sass stylesheet now.

variables.scss

Sass variables are useful for CSS properties that you reuse throughout the project. Colors, the font stack, font sizes, and media query breakpoints are some typical variables we could define as Sass variables, because we end up using them over and over again. That way, when we need to change the values of these properties — say, if we wanted to change a color — we’ll only have to make the change in one place.

$color-foreground-default: #363636; $color-background-default: #ffffff; $color-black: $color-foreground-default; $color-white: $color-background-default; $color-dark-gray: #353d48; $color-medium-gray: #abb3be; $color-sass-pink: #c69; $color-var-2: #cccccc; $font-stack: "Raleway", sans-serif; $font-size: 17px; $font-weight-reg: 400; $font-weight-bold: 600; $line-height: 1.8; $margin: 30px; $padding: $margin; $screen-size-medium: 620px;

base.scss

I’ve declared some default styles for the HTML elements used in the web design.

body { margin: 0px; padding: 0px; font-family: $font-stack; font-weight: $font-weight-reg; @include set-font-size(1); background-color: $color-background-default; color: $color-foreground-default; } h1, h2 { margin: 0px; font-weight: $font-weight-bold; letter-spacing: 2px; text-transform: uppercase; } h1 { @include set-font-size(1.8); } h2 { @include set-font-size(1.5); color: $color-sass-pink; } p { margin: ($margin / 2) auto ($margin / 2) auto; } @media screen and (min-width: $screen-size-medium) { h1 { @include set-font-size(2.5); } h2 { @include set-font-size(2); } p { @include set-font-size(1.2); } } a { font-weight: $font-weight-bold; text-decoration: none; color: $color-sass-pink; @include transition("color"); &:visited { color: darken($color-sass-pink, 15%); } &:hover, &:active { color: lighten($color-sass-pink, 15%); @include transition("color"); } } strong { font-weight: $font-weight-bold; }

layout.scss

Our web page is laid out into four sections:.page-header,.description,.learn-moreand.footer.

.page-header, .description, .learn-more, .footer { box-sizing: border-box; width: 100%; padding-top: $padding * 3; padding-bottom: $padding * 3; } .page-header { @include full-background-image("images/page-header-bg.jpg"); background-color: $color-black; color: $color-white; } @media screen and (min-width: $screen-size-medium) { .page-header { padding-top: $padding * 5; padding-bottom: $padding * 5; } } .learn-more { color: $color-white; background-color: $color-dark-gray; @include full-background-image("images/learn-more-bg.jpg"); } .footer { background-color: $color-sass-pink; & p { @include set-font-size(0.9); color: darken( $color-sass-pink, 30% ); text-transform: uppercase; } & a { color: darken( $color-sass-pink, 35% ); &:hover { color: darken( $color-sass-pink, 40% ); } } } .content { margin: 0px auto; width: 96%; max-width: 640px; text-align: center; }

components.scss

Thecomponents.scssstylesheet contains reusable classes.

Particularly,.call-to-action-buttonand.headline.

a.call-to-action-button { display: inline-block; width: auto; margin: ($margin * 1.5) auto ($margin * 1.5) auto; padding: $padding / 2; @include set-font-size(0.7); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; color: $color-white; border: 1px solid $color-white; border-radius: 8px; background-color: transparent; @include transition("background-color"); &:hover { background-color: rgba($color-white, 0.1); @include transition("background-color"); } } @media screen and (min-width: $screen-size-medium) { a.call-to-action-button { @include set-font-size(0.9); } } .headline { color: $color-white; text-shadow: 1px 1px 2px $color-black; }

mixins.scss

There are three mixins in our Sass project. They help us set响应完整的背景图像on a couple of the web page’s sections, uniformly set ourfont-sizeandline-heightvalues and help us with property transition effects.

@mixin full-background-image($image-url) { background-image: url($image-url); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } @mixin set-font-size($factor) { font-size: round( $font-size * $factor ); line-height: round( $font-size * $line-height * $factor ); } @mixin transition($property) { transition-property: $property; transition-duration: 0.3s; transition-timing-function: ease-in-out; }

The Result

All of that Sass code is automatically compiled into one big stylesheet calledstyle.css. For example, the Sass style rule for ouraelements is:

a { font-weight: $font-weight-bold; text-decoration: none; color: $color-sass-pink; @include transition("color"); &:visited { color: darken($color-sass-pink, 15%); } &:hover, &:active { color: lighten($color-sass-pink, 15%); @include transition("color"); } }

The Sass style rule was compiled to regular CSS, as such:

a { font-weight: 600; text-decoration: none; color: #c69; transition-property: "color"; transition-duration: 0.3s; transition-timing-function: ease-in-out; } a:visited { color: #ac3973; } a:hover, a:active { color: #df9fbf; transition-property: "color"; transition-duration: 0.3s; transition-timing-function: ease-in-out; }

Advanced Settings

Let’s talk about a couple of useful Prepros project options.

Improve Cross-Browser Support with Auto Prefixing

If you use a lot of new CSS features that still need vendor-prefixing, you’ll want to turn on automatic vendor prefixing.

In the Prepros window, click onstyle.scss. A sidebar will show up. Check theAutoPrefix CSSoption.

Click theProcess Filebutton to update yourstyle.cssfile.The next time you update your Sass stylesheets, Prepros will automatically watch out for CSS properties that need to be prefixed. For instance, in our project, we’ve used thetransitionproperty.

The property was prefixed like this:

-webkit-transition-property: "background-color"; transition-property: "background-color"; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;

Improve Web Performance

You can improve the download speed of your CSS files by minifying them. Minification removes non-essential characters such as spaces, tabs, comments, and so forth. This will lower the file size of ourstyle.cssfile.

Prepros可以贬低你的样式表。这里的s how:

1. Click onstyle.css. The Prepros sidebar menu will appear.
2. UnderOutput Pathchoose the name and location of your minified stylesheet. In this project, it’s calledstyle.min.css.
3. Enable theCompress CSSoption.

You’ll have to update the link to the project’s stylesheet tostyle.min.css. Inindex.html, it would be:

Just with this quick and easy change, we’re able toreduce the file size of our stylesheet by 21.4%.

What’s Next?

• Learn Sass.If you’re new to Sass, you’ll have to spend time learning how to write CSS with it. I highly recommend theSass Basics Course at Treehouse. It’s taught by Hampton Catlin, the creator of Sass.

  I’ve taken this course, and I’ve got nothing but great things to say about it. You can also check out the officialSass websiteif you prefer learning Sass “the hard way”.

• Explore Prepros settings.There are many options and features tucked away in Prepros. It’s worth the effort to explore and discover what Prepros has to offer. This tutorial barely scratches the surface of Prepros’s feature set.

Related Content

• The Best CSS Preprocessors (Right Now)
• Use Cutting-Edge CSS with the Help of Myth
• Why Use CSS Preprocessors?

Jacob Gubeis the founder of Six Revisions. He’s a front-end developer. Connect with him on推特.