People tell me I should still be using twitter. I wrote a blog this week to share technical ways to show leadership as an engineer: /pulse/25-ways-… 5 years ago *The extra code makes your CSS files quite larger than it needs to be, so make sure you remove the “–debug-info” flag and recompile your final CSS file without it. Your CSS file gets ‘injected’ with bunch of extra code*, this extra code is what FireSass (and now Google Chrome) sees, it helps FireSass and Chrome “map” your Sass/SCSS file(s) from your CSS file(s). Open Firebug (F12) and inspect an element, you’ll see on the Style panel on the right the map of that element on your Sass/SCSS file. ![]() For example: “sass –watch scss:css –compass –debug-info” - No quotes of courseĤ. On your CMD (Command) you need to type the following flag: “–debug-info”. To map your Firefox to your Sass/SCSS from your CSS file(s), follow these steps:ģ. If you run into any problems or have ideas for how this support could be improved further, please leave a comment below.įollow to see future front-end development tips and tricks.Īnother awesome tool in my Web Design arsenal, thanks! sass files next to the style blocks in the inspector (see below). Restart your rails server, reload the page in Chrome and inspect the elements: if everything worked you should see references to your. ![]() Remove all of the above with: RAILS_ENV=development rake assets:clean The cache is typically in Rails.root/tmp/cache or Rails.root/public/assets depending on how you (pre)compile your assets. ![]() You will probably need to delete your generated CSS files to force rails to regenerate the CSS output from your (unchanged) Sass or SCSS files. Next, select the the Experiments tab and check “Support for Sass”:Ĭlose the inspector and restart Chrome for good measure.įinally, configure your sass compiler to output debug info when compiling. You can enable source map support in your rails 3.1+ webapp by editing config/environments/development.rb and ensuring it contains the following lines: = trueĬ_comments = false # source maps don't get output if this is trueĪlternatively, if you’re compiling your sass manually, set the :debug_info flag to true and and :line_numbers to false. Ensure you’re looking at the General tab, then check “Enable source maps”: Open the Web Inspector and then open its settings (by clicking the cog in the bottom right). Next, enable support for source maps in Chrome. Open chrome://flags and make sure ‘Enable Developer Tools experiments’ is checked and restart the browser. Enable the right settings in Chromeįirst, ensure you have Experiments enabled in Chrome. All you have to do is turn on a few flags and tweak your rails app to make it work. This has been available in Canary and Beta channels for a while, but it’s now firmly available in the stable Chrome releases. If you pay attention to these references in the Web Inspector, it can be meaningless at best and outright misleading at worst.Įnter Google Chrome’s native Sass support. Unfortunately, if you’re using a framework like LESS or Sass, then by default Chrome will reference the CSS files that those frameworks generate, even if you’ve never seen them before. If you are writing this for yourself, consider what you would like to see/use in a few months.When you open the Chrome web inspector, you can browse to the styles that are being applied to your elements. Are you building this for a team? If so, you would be wise to consider you're team's coding experience and what they are most comfortable with. If you prefer to use w3c css standards with extra features, you can do that too.Īlso, always consider who will be using your code later. If you like using SASS style syntax, use it. Each feature on-top of pure CSS is clearly defined in the nfig which makes it much easier to refactor later. I prefer PostCSS over SASS or LESS because it's modular. If you are building a larger tool or code which may be required to scale, use PostCSS with Gulp and/or Webpack. If you are doing a small one-off project, you probably don't need anymore than CSS and you're going to waste time trying to get you're build tools setup. If you are writing code for < IE Edge you will probably want to use a pre/post-processor to handle (at the very least) autoprefixing Questions to ask before making a decision
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |