Directory structure

I’d say this is up to:

1. personal preference
2. project requirements
3. … and few other things.

You can go with something like:

style.scss

partials/_base.scss

partials/_grids.scss

partials/_typography.scss

...

vendor/_jquery.scss

...

etc.

Partials

As you can see in the above structure, there are partials – this is the word you use for Sass files. It is a nice way to structure CSS, based on the layout, project type, etc.

Import

Use the @import clause for importing partials into the main (compiled) file. Normally you would put import clauses into the main style.scss file and the syntax would be something like the following:

// Modules and Variables
@import "partials/base";
@import "partials/buttons";
@import "partials/grids";
@import "partials/typography";

Notice that you don’t need _ or .scss suffix.

Variables

Yes, these are the variables you see in other programming languages. In _base.scss partial, you can put something like:

$primary-color: #333;

And you would call it like:

body {
  color: $primary-color;
}

But in _buttons.scss partial, you could also use the following, and without the need of redeclaring this variable:

button {
    background: $primaryColor;
}

But needless to say – if you want to reuse this variable across other partials, make sure you define it in _base.scss file (or whichever partial will be imported first), possibly on the top, before this variable has been used. As you know, in CSS, whatever comes last takes the precedence. And there is a quite big chance that your CSS file will not be compiled at all, as the compiler would return an error ( something like variable not declared or so).

Mixins and @include

Now Mixins is an excellent topic. Let the show you few mixins and notice that they use @include clause:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

And this is how you would call it in our example:

.box { @include border-radius(10px); }

But there is absolutely no reason why wouldn’t you use it again:

.box-wider
{ @include border-radius(20x); }

And you would get the following result:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

.box-wider {
  -webkit-border-radius: 20x;
  -moz-border-radius: 20x;
  -ms-border-radius: 20x;
  border-radius: 20x; }

I guess you are already asking – do I have to write all these mixins, or has someone already done this before? Sure they did it – and a lot of people did it! You can find an extensive list on this blog post, While you can find also some of them on my resources page.

Inheritance

Why bother with redeclaring the styles, when you can use an @extend clause. It would go like:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

And the CSS result will be:

.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

Nesting

If you use the following:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

You would get:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Post Sass Quickstart je prvi puta viđen na bbird.me.

I am assuming that you have NetBeans installed and WordPress project created. The steps are as follows:

Download the latest Ruby from http://rubyinstaller.org/downloads/ and install. When installing, make sure you thick the middle option:

The next step is to install Sass from command prompt – open command prompt and type the following:

gem install sass

Upon successful installation, several new files appeared in your Ruby folder – one of them is sass.bat you will need.

Now open NetBeans, open Tools -> Options and point to Miscellaneous. This is where you will select your Sass processor. If you installed Ruby in default path, you will have something like this:

Restart NetBeans after that (some users reportedly had to do it, so just in case ).

Completing these steps doesn’t mean that your Sass files will be processed – this is where most tutorials finish, forgetting the most important thing – setting the Sass file path! This is how you do it:

1. Right click on the project name and click properties.
2. Now, refer to the next image that will give you an idea on how to set input as output paths for Sass preprocessor. In my case, WordPress root directory is the projects’ root directory, hence the path I added.

And there you go – make a change in any of the partials or the main file, and providing there are no errors (undeclared variables, etc), Netbeans will compile main CSS file.

Post Auto compile Sass on save in NetBeans je prvi puta viđen na bbird.me.