Sass, Compass and source maps in Webkit Devtools

If you want to use the awesome source maps for Sass in Devtools, you will have to:

  1. Go to chrome://flags/ and Enable Developer Tools experiments, then restart Chrome.
  2. Open Devtools and check Enable source maps in General tab and Support for Sass in Experimental tab.
  3. Download latest Sass from the console: gem install sass --pre (you might need sudo)
  4. Just adding sass_options = {:sourcemap => true} to config.rb in Compass won’t work (just yet) and you can even get Compass conflicts with the aforementioned Sass alpha version. In my case, Compass 0.12.2 (Alnilam) does not get on very well with Sass 3.3.0.alpha.103 (Bleeding Edge), though it might be some other gem conflict.
  5. For that reason, we will have to watch changes using Sass directly, using sourcemap option: sass --watch --sourcemap sources/compass:public/css which generates a .map file for each source. This is the information Devtools will use to let you trace/edit original Sass files directly in the browser.

Checklist to install multiuser development environment in OS X Mountain Lion

This list in not exhaustive, just my bare minimum for frontend purposes. I’m not dealing with Rails, PostgreSQL, MongoDB or other server tools since it’s not my day-to-day use. Just yet. It’s surprising that you need so many console tools these days to do frontend, but things fall apart, and most of them really improve your performance in many ways.

Installation for one or multiple users would be the same, but there are tasks we will perform as admin user so that we can share part of the environment across multiple users, who will only need to configure personal data (Git, $PATH, Sublime or other editor, …). We are using Mountain Lion but the following should work the same in older systems, down to at least Leopard or Snow Leopard.

Developer environment installation by admin user:

  • If we are going to use the complete Apple developers set up, including iOS simulators, we need to install XCode (from the Mac Store), then open it, preferences, downloads, install command line tools and the needed simulators.
  • If we don’t need iOS simulators, just go to and download, then install the Command line tools for your system. It’s around 200Kb only.
  • Open a Terminal window and check if you have properly installed build tools:
which gcc

(it should return /usr/bin/gcc)

  • Then we will install homebrew, a nice package manager for OS X, from the terminal:
ruby -e "$(curl -fsSL"
  • We are going to install Git now to have a control version in our projects without the need of a centralised repository:
brew install git
  • Update homebrew now:
brew update
  • Install rbenv to manage different versions of Ruby:
brew install rbenv

To use Homebrew’s directories rather than ~/.rbenv add to your profile:

export RBENV_ROOT=/usr/local/var/rbenv


brew install ruby-build
  • We are going to install Compass, a CSS framework that uses Sass stylesheets (make sure you code your Sass with ‘compass watch’ running in a terminal tab):
sudo gem install compass
  • Install node, several development tools are distributed as npm these days:
brew install node

We recommend prepending the following path to your PATH environment variable to have npm-installed binaries picked up: /usr/local/share/npm/bin

  • We love Grunt, a Javascript task runner. We use it to build our frontend files, minimize, JSlint and several other features. From version 0.4 on, command line tools are not included, you need to install separately:
npm install -g grunt-cli
  • Now you can install grunt locally on each of your project’s folder (even a specific version for each project). Best approach is following offical Getting started and create a package.json, then use npm install --save-dev to install npm modules locally
  • PhantomJS is used to create files from Javascript in terminal, in one of our favorite tools, named Grunticon (allows us to throw SVG icons into a folder and convert them into datauri inside your CSS, with PNG fallback). No more sprites :-)
brew install phantomjs
  • Install nanoc, a nice static site generator
sudo gem install nanoc

If we need the preview server of nanoc we need to install it::

sudo gem install adsf

We can use other preview servers, like Apache from our system, MAMP or even a LiveReload server.

  • Install MAMP, which lets you have Apache, MySQL and PHP environment in a second.
  • We are going to configure /etc/hosts file according to this tutorial: How to use vhosts in Wordpress development.
  • Install Go2Shell (from the Mac Store), which opens a terminal window to the current directory in Finder. We just need to drag the app to the icons bar in Finder.
  • We install Chrome now, with LiveReload, Web Developer, YSlow plugins.

If you’re going to use Wordpress, I recommend installing wp-cli so you can perform admin tasks from the terminal. You will need to add an alias for mysqldump

sudo ln -s /Applications/MAMP/Library/bin/mysqldump /usr/local/bin/mysqldump

Now you can go to your wordpress project folder in terminal and, for instance, perform a database backup just typing

wp db export

Developer environment config for each non admin users:

We have most of the environment set up ready, we just need some personal configurations. These will be performed by each non-admin user of the machine:

  • Open Finder and customize sidebars
  • We are heading to our personal folder ~/ and create an Applications folder. We are going to use this to install our programs, since /Applications will be used by programs installed by the system or admin for all users.
  • Install Dropbox (disclaimer, this is a recommendation link, both you and me will get extra space). Dropbox will let you have some Gb of your data backed up in the cloud and synchronized across your computers. It will require admin permissions to the folders in order to be installed.
  • Open /Applications folder and drag the app to the icons bar in Finder.
  • If you’re like me and prefer your finder to reveal hidden files, open Terminal and type:
defaults write AppleShowAllFiles -bool YES
killall Finder
  • Copy your public/private SSH keys from an older computer. If it’s the first time you need these (Git, for instance), just create your keys.
  • To configure your Git user, we can copy ~/.gitconfig from an older computer into ~/ or:
git config --global "Your name"
git config --global
  • Install SublimeText2 into our personal ~/Applications. You can buy it too! Or use Textmate, vim or whatever.
  • We are enabling Sublime access from terminal, pointing to a symlink in our bin (beware, link takes to the Sublime we just installed in our ~/Applications)
ln -s /Applications/Sublime\ Text\ /usr/local/bin/subl
  • If we open a new terminal window or tab (cmd+t) we should be able to open Sublime by typing
  • Install Sublime user prefs from an old computer, or use mine if you like them
  • Install the package with color and typography settings (I keep a copy in Dropbox), usually found in
“~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default”
  • Install Package Control from View > Show console, following these instructions
  • We can now install these packages from Package control: Emmet (previously known as Zen code), SuperCalculator (nice for px/em conversions), GitGutter (awesome, to see changes in gutter from last Git commit)
  • Install your .bash_profile from an old computer into ~/ or
  • Now you check if your .bash_profile includes PATH to our bin, grunt, and other tools:
export PATH=~/bin:/usr/local/share/npm/bin:/usr/local/share/npm/lib/node_modules/grunt/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
  • Alternatively, much better approach is separate each path into a specific var (thanx @happywebcoder for the tip):
export MY_BIN_PATH="~/bin"
export NPM_BIN_PATH="/usr/local/share/npm/bin"
export GRUNT_BIN_PATH="/usr/local/share/npm/lib/node_modules/grunt/bin"
  • Open Chrome and authenticate with your login/password in order to start sync’ing our favorites, plugins, and so on.
  • If we are going to develop responsive sites (or sites adapted to be viewed in mobile gadgets) you will want to install Adobe Edge Inspect which lets you synchronize what you see in your browser to your mobile device, instantly, and even inspect your device for a debug session.

Other programs you may like:

I don’t work nor get anything from the following, I just think they are awesome apps:

  • We love TotalFinder, your Finder with Tabs! Buy it, it’s worth it.
  • CloudApp is an awesome service that stores screen captures and other files in the cloud.
  • Buy and install Transmit FTP, but don’t forget to use Git locally :-)
  • Buy and install Divvy a cool app that lets you manage your windows size very easily with shortcuts.

iOS phone number styling

iOS has an automatic feature to detect phone numbers and link them to a phone call by clicking on them.

The problem with this is twofold:

  1. Many false positives 
  2. Style for these numbers is really ugly (ugly as in default link style).


If you want to avoid this feature you can add the following meta in your pages:

<meta name = "format-detection" content = "telephone=no">

which will avoid the phone to make calls to ALL phone numbers in your page. To reactivate this key functionality in some of the numbers, you need to add a link around each telephone number in your page, manually, using tel: as the beginning of the href, as in:

<a hef="tel:1234567890">1234567890</a>

Then we just need to style the special links:

a[href^="tel:"] {color: inherit !important; background-color: inherit !important;}


Since in some projects you will not be able to wrap numbers manually and you still want to style what iOS uses as phone numbers, you can do it the other way around. Let’s leave the OS add the special link for us (will not add the special meta that avoids this feature) and style how it looks. First you need to know how iOS links the numbers to the phone. Before:



<a hef="tel:1234567890" x-apple-data-detectors="true" x-apple-data-detectors-result="1">

As you can see iOS wraps the number into a link with special attributes. Now you can just style them using attribute selector:

a[x-apple-data-detectors=true] {color: inherit !important; background-color: inherit !important;}