In main.scss, I load general.scss which has styles required in all cases. Maybe I am the odd one out here, but I use a system as follow… First of all, I want my code to be easy to read to the point that anyone understands instantly that a media query is targeting tablet devices just by looking at it – I reckon the word tablet would do that better than 768px.Īlso, what if that reference width changes in the future? I hate the idea of replacing it in 5 instances around the code, especially when it’s scattered around multiple files.Ī first step would be to store that breakpoint in a variable and use it to construct the media query. So if your code contains 5 media queries that target tablet devices with a width of 768px, you will hardcode that number 5 times, which is something ugly that my OCD would never forgive. As a consequence, the expressions used to define the media queries will make reference to the typical screen width of those devices. You can make a layout adapt in such a way that multiple devices with different screen sizes can enjoy an optimal experience. The most common use for media queries is the transformation of a layout based on the browser’s viewport width. After all, what’s the point of doing all this if one can simply write media queries using pure CSS? Tidiness and maintainability. So I took what I liked about each of them and created a solution that covered all scenarios I came across. All of them eventually failed to cater for everything I needed to do in an elegant way. I spent a few months experimenting with a dozen different approaches to media queries in Sass and actually used a few in production. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well. If you do, to test something out or what have you, run rails assets:clobber when you are done, to restore your assets to working in development mode.Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. You generally should not run rails assets:precompile in development. you may or may not still be having problems with actual live-reload, but they'll be different problems - right now, you are having a different problem before you even get to live-reload. Now, try again all of the things you tried before - without the production-mode built assets in the way, you will be seeing different results. Even if you disable live reloading entirely, you still aren't seeing CSS changes - even after restarting the server and hard-refreshing the browser, as you say. Which is what you are suggesting, right? This is actually a problem entirely separate from and unrelated to live-reloading. If so, this is unrelated to "live reloading", you wouldn't/aren't seeing changes even upon manually reloading. Which is why you don't see changes until you run assets:precompile again. So, once you've run that ONCE, these production-mode built assets are there, and the Rails app it just using them and ignoring the development-mode stuff. The only thing that's updating the CSS is running 'rails assets:precompile' Try /r/railsjobs, /r/forhire, or the following job sites: Looking for work, or need to hire Rails developers? Ruby Doc: Complete and accurate documentation for the Ruby programming language.Rails API: Searchable docs built with the sdoc gem.APIdock: Rich and usable interface for searching, perusing and improving the documentation.Bundler: Manages an application's dependencies.Ruby Version Manager (RVM): alternative ruby environment manager.Rbenv: manage multiple ruby environments.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |