fbpx

Tech Tip Thursday: Editing & Saving SASS in the Browser

Screen Shot 2014-11-06 at 4.40.33 PM

Google Chrome’s Dev Tools are a developer’s best friend, and until recently I had not known the amazingness that is the Sources panel. Sure, you can inspect an element and change it’s styles in the Elements panel, and when you get it the way you want it, copy it, switch to your text editor, save the file, go back to your browser, and refresh it. Over and over.

If you use SASS or Compass to compile your CSS, the process is similar, but may include trying to locate the offending style in your SASS file, or first looking at the compiled CSS in hopes of finding the line number of the precompiled CSS.

Well, there is a way to edit and save (!!!) your precompiled SASS right from the browser.

I am going to assume you have already set up your project with a SASS folder and you’ve got some files in there.  You also already have a compiled CSS file.  If you want to learn how to set these up, check out Compass or Sass.

[box]

TLDR

  1. Add sourcemap = true to config.rb file
  2. Compile Sass
  3. Inspect element in Chrome
  4. In Styles column, click .scss filename
  5. In Sources panel, add your folder to a Workspace. Make sure you hit “Allow” when Chrome asks for permission to access your files
  6. Edit your offending style in your sass file
  7. Save the file with cmd+s or right click > Save
  8. Compile again!
      [/box]

Make a sourcemap

So in order to make this work, you have to have a sourcemap.  In Compass projects, all this means is you need to add one line to your config.rb file.

sourcemap = true

Easy peasy.

Find a style to edit

I choose you, h1.

Screen Shot 2014-11-06 at 5.11.46 PM (2)

Inspect the element.  (another tip: cmd+option+i to open dev tools)

This is what we’re used to seeing, right?

Inspector Element

Yeah, that’s because oops, I forgot my sourcemap.  Let me add that.

Add the sourcemap in Compass

Now if you had CodeKit or Sass watching for changes to your files, it should compile automagically.  If not, do what you do to make that happen.

Now if we take a look at the styles in the Elements panel, we notice a very minor (and yet huge) difference.

closeup of sourcemap

Now we see exactly where our styles are coming from in our .scss file.  If we click where it says _type.scss:9 we’re taken to the Sources panel.

screenshot-1

Two things to note here.  In the left column you see my local environment.  I have my files in MAMP/htdocs/test-compass-project.  In the middle column is my local _type.scss file.

In order to be able to edit our precompiled css, we need to make a workspace.  To do that, find your folder in the left column, right click and select “Add Folder to Workspace.”  This also allows us to save the file right from the browser!

IMPORTANT NOTE: When you add your workspace, Chrome will ask for permission to access your files.  Accidentally clicking “Deny” will leave you lost and confused (I would know).  Make sure to click “Accept.”

Save Workspace

 

screenshot_345235345

I want to change the color of my heading tags.  I see that it’s taking a variable $headings-color.  Well, what do you know.  You can change the values of variables right in the browser.

screenshot_345235345-2

screenshot_3423657456

screenshot_34234

Now, you can ctrl+s to save the file or right click and either click Save or Save As.  Again, if you have Compass or Sass watching for changes, it will compile in the background.  Imagine the possibilities!

Yay-Uh!

To that I say…

Yay-uh!

Leave a Comment

Your email address will not be published. Required fields are marked *

GOT A PROJECT? LET’S TALK!

Are you ready to get your work out to the world?