CSS Preprocessors: getting started with LESS and Sass

You probably have heard of LESS, Sass, Stylus, and others but may not have had a chance yet to figure them out. Here’s a very brief overview…

Why should you be using one of these?
CSS Preprocessors exist to help make your CSS more dynamic. They use their own languages, albeit all rather similar, to do the same things. They make CSS better 

  • Retain browser compatibility
  • Allow for the creation of variables using reusable CSS properties
  • Allow for better code by making it more scalable and modular
  • Introduce parent references, math, mixins, nesting, and error reporting

Which one should you use?
There is no bad choice. Like with anything else in programming other factors are the drivers here. Do you use Ruby? Then you will probably gravitate towards Sass. Are you a heavy Bootstrap user? Then consider looking at LESS or Stylus… Research and see which works for you.

Useful links to get started

  • LESS
    • LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functionsLESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

  • Sass
    • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
  • Stylus
    • “Expressive, dynamic, robust CSS”
  • SimpLESS
    • “The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”
  • WinLESS
    • “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”
  • nib
    • Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

Tabbing web parts in a SharePoint web part page using jQuery and jQueryUI

Like many others I found EasyTabs to be a great fix. It has matured into something really great but that is not always the right tool for me so I went looking for a simpler solution. I wrote some jQuery that trawled the page and moved content around. It worked just fine but then I came across some very similar code but that used jqueryUI to create more elegant tabs.

The original source for this along with some good comments can be found here.

The final code I used is below.

< !– Reference the jQueryUI theme’s stylesheet on the Google CDN. Here we’re using the “Start” theme — > 
< link  type=”text/css” rel=”stylesheet” href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” / > 
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”>< /script>
< script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”>< /script> 

< script type=”text/javascript”>
    jQuery(document).ready(function($) {
// Visible title of each web part goes here.
        liTargetForTabs([“Web Part Title 1″,”Web Part Title 2”]);
    });

    function liTargetForTabs(TitlesOfWebParts)
    {
        for(index in TitlesOfWebParts)
        {
            var titlePassed = TitlesOfWebParts[index];
            $(“#liTargetForTabs”).append(‘< li>< a href=”#Tab’+index+'”>’+titlePassed+'< /a>< /li>’).after(‘< div id=”Tab’+index+'”>< /div>’);
            $(“span:contains(‘”+titlePassed+”‘)”).each(function(){
                if ($(this).text() == titlePassed){
                    $(this).closest(“span”).hide().closest(“[id^=’MSOZoneCell_WebPart’]”).appendTo($(“#Tab” + index));  }
            });
        }
        $(“#targetForTabs”).tabs();
}
< /script>
< div id=”targetForTabs”>
< ul id=”liTargetForTabs”>< /ul>
< /div>


How to fix the PowerGui error “index was out of range. Must be non-negative…”

I was getting this error whenever I tried to open a PowerShell script by double clicking it. PowerGui is my default PowerShell editor.

The workaround is to empty out the PowerGUI configuration settings and data for the user account under which it fails to start. Making a backup is probably wise.

Navigate to each path below and delete the PowerGui folder.

  • %USERPROFILE%AppDataRoamingQuest Software
  • %USERPROFILE%AppDataLocalQuest Software
You may have to empty your recycle bin as well.