12/29/2023 0 Comments Compass codekit![]() When you open Chrome and inspect the styles of your project not only will you be able to see the partial file that originated the style, you’ll also be able to click it’s name to be taken straight to the file in the dev tools. It looks like utter gibberish but Chrome knows what to do with it. Re-save your styles.scss file and you should see the CSS compiled and Sass/Grunt will also generate a file called. You’ll want the same extension if you work with Safari. If you don’t already have the Chrome LiveReload extension you’ll want to install that and click the icon to get some automatic LiveReload of changes.Also tick the ‘Auto-reload generated CSS’. Now in the General tab of Web Developer Tools settings, under the ‘ sources‘ header, ensure ‘ enable CSS source maps‘ is ticked (note: it used to have a single button for both CSS and JS source maps as shown in the image. Now back in Developer Tools, click on settings (cog icon in the bottom right), click the experiments tab and then tick the ‘ Support for Sass‘ tick box.Type ‘ chrome://flags‘ in the Chrome address bar and switch on ‘Enable Developer Tools experiments’.Now, to actually see the Source Map support in Chrome (it shows regardless in Safari 6.1+): newbie tip: just type grunt and press enter) and you’ll see something like this on the command line: Now, from the command line and still within your project folder run ‘grunt’ (e.g.Just ignore that, you don’t need to touch it. Once that’s finished, if you look in the root of your folder you should see a ‘node_modules’ folder. Now run (again you may need to add sudo to the beginning if you see a bunch of errors) npm install. Now, if you aren’t already in the root of your folder, move there e.g.This installs the Grunt command ‘globally’ so you can run it from any location From the command line run this command (you may need to prefix it with ‘sudo’): npm install -g grunt-cli. If your folders and paths differ, amend the below to suit. However, the important points are that in this case all my Sass files are living in a folder called ‘sass’ in the root of the project (at the same level the Gruntfile.js and package.json are) and the resultant CSS is being compiled into a folder called ‘css’ also in the root of the project folder. If you have no idea what this is don’t worry for now. Grunt.loadNpmTasks('grunt-contrib-watch') Grunt.loadNpmTasks('grunt-contrib-sass') Copy and paste this into the Gruntfile.js file:.Copy and paste this into the package.json file:.One called ‘package.json’ and the other called ‘Gruntfile.js’ In the root of your project make two blank files.Grunt users, you’ll know which bits to skip, for everyone else, crack open your text editor of choice and your Terminal (sorry Windows users). All you need (hopefully) is to follow along and do a little cut and paste. ![]() And how about automatic live reloading of changes in the browser to boot? If you know nothing of Grunt, fear not, it’s perhaps a topic for another day. Well, I think there is a simpler way to source mapping glory by using Grunt to compile your Sass. Why I hear you (one person if I’m lucky) cry? I’ve therefore omitted that section from this rewrite. There are now plenty of other resources on the Net to explain how to get this up and running from the command line using the Sass watch command. To get the pre-release version of Sass run sudo gem install sass –pre in the CLI. In order to get this working with Sass, you’ll need Sass 3.3 (pre-release at the time of writing). Safari 6.1+ and the latest versions of Chrome (use v29+ of Chrome, if your ‘stable’ version isn’t yet at v29, grab the ‘Beta’ or ‘Dev’ version here: ) use ‘source maps’ for Sass debugging. Minor update : For those looking for Compass compatibility with source maps, that fine fellow Dennis Gaebel has put together a small project on GitHub providing demo configurations for Compass based source maps (there are branches for Grunt, Gulp, CodeKit 2).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |