I'm trying to use less.js and after installing it I see some extra .less files (e.g.
alert.less, badges.less etc) which are not on my hard drive and are conflicting with my css styles. Where are they coming from ? I would like to use less but keeping my css intact.
These are part of bootstrap. See here: http://getbootstrap.com/2.3.2/
Related
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
So I am having this Ghost theme (liebling) that I'd like to modify to my needs. E.g. I'd like to change the font-size of the post title and content.
As the theme is quite complex (at least for me) I am having a hard time to figure out which setting has been made in which SCSS file.
When I start Google Chrome and inspect elements it points me to the CSS file that makes the setting. However it doesn't point me straight to the SCSS file it got created from. Of course it doesn't, as this would require some form of debug-database so chrome is able to deduce/know which SCSS files where involed creating that specific CSS.
So long story short: How can I find out which SCSS file lead to which CSS setting?
There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.
For using a site like jsfiddle or cssdesk, how would I pull all the css rules that apply to my element together in one place? My CMS has a pretty large number of CSS files that act on the same elements.
Use Firefox's built-in inspector (not firebug) to inspect the element. In the column that pops up for the inspector, choose "Computed" tab.
Highlight all the styles you want, then right click and choose, Copy Selection.
Go to your jsFiddle or CSSDeck, paste in the properties, and surround it with your rule:
h1 {
... your copied stuff here ...
}
NOTE: you'll need to add semicolons to the end of all the properties.
Not sure if I'm understanding the question properly, but I think you're asking how to apply all the same styles on a fiddle that are applied on your own site. If that's the case, then on jsFiddle, in the left nav, there is an Add Resources option. If your site is public, then you can enter in the direct url to your css file(s) there.
Then any html you enter in the fiddle should get the styles from those css files applied in the result when you run it.
Two answers spring to mind:
The first is simply to upload your CSS files from your laptop to a server somewhere. You could also run a webserver from your laptop if you can open port 80 from your router to your local computer. You could get a static URL to your IP address from a service like No-IP Free.
Use a CSS pre-processor like SASS or LESS when composing your CSS on your computer. This requires a bit of a change to your workflow, but you will find the changes make life as a web developer much easier in the long run. Both SASS and LESS understand vanilla CSS, so you don't have to change your existing files, just the extensions. They also both have the ability to import other SASS or LESS files on your computer, and include them in the output generated CSS. So, using SASS for an example… if your main CSS file is called screen.css, move it to screen.scss. The SASS pre-processor will read through and render the file back to CSS after you make changes. Now, to include another file in your screen.scss file, add #import 'newFile.scss'; and the CSS file SASS generates will include both screen.scss and newFile.scss.Following this design paradigm has the additional benefit of keeping all your CSS in one output file. It is recommended that you keep all your CSS in one file to minimize server requests (see Should I still bother keeping all css in one file? for discussion).
If it possible to use #import in a .css file to load a style sheet from another site? Specifically, I have a main style sheet for my site which loads in other (local) style sheets using #import. I'd also like to load in a jquery ui theme hosted by google, e.g.
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css";
This does not seem to work - I wanted to check whether this is allowed before working out exactly where the problem is.
That should work. Are you sure it is not loaded? What browsers does this happen in? Can you confirm using Firebug?
There is no mention of it not working in the w3 specs nor in the related MSDN Article (The latter applies to IE only of course).
According to those specs, adding url(...) around the address is optional, but try whether that yields better results.