sass – bbird.me http://bbird.me WordPress quick tips Wed, 08 Aug 2018 16:39:07 +0000 en-US hourly 1 https://wordpress.org/?v=4.9.8 Sass Quickstart http://bbird.me/sass-quickstart/ http://bbird.me/sass-quickstart/#respond Mon, 14 Mar 2016 12:02:38 +0000 http://bbird.me/?p=420 First things first – I use SCSS Syntax. Also, you need a compiler – I use NetBeans (Koala is also

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

]]>
First things first – I use SCSS Syntax. Also, you need a compiler – I use NetBeans (Koala is also good). But these are for Windows users just like myself – I have no doubts that for Linux users, there are much more powerful solutions :-).

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.

]]>
http://bbird.me/sass-quickstart/feed/ 0
Auto compile Sass on save in NetBeans http://bbird.me/auto-compile-sass-on-save-in-netbeans/ http://bbird.me/auto-compile-sass-on-save-in-netbeans/#respond Sat, 12 Sep 2015 09:24:48 +0000 http://bbird.me/?p=245 If you’re developing WordPress websites in NetBeans, there is a chance that you will edit CSS using the Sass approach. In

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

]]>
If you’re developing WordPress websites in NetBeans, there is a chance that you will edit CSS using the Sass approach. In other words, for every change you make in any of the Sass partials, you will surely want these changes compile into main style.css file automatically. NetBeans offers you this option. And the best of all, it’s very easy to set this up, but you may Google that many developers are having trouble doing it the right way.

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:

ruby

The next step is to install Sass from command promptopen 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:

sass1

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.

sass2

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.

]]>
http://bbird.me/auto-compile-sass-on-save-in-netbeans/feed/ 0