This is my application.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
.fav_yes {
color: white;
background-color: red;
}
.navigation {
color:green;
};
Yet when I have elements with class="fav_yes" in my views I'm still not seeing the styled html. I tried messing around with semicolons and whatnot with no luck. No similar questions seem to provide effective solutions. What am I missing?
From the bootstrap-saas git-hub write up:
If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
I still had an application.css file, so the .scss was being overriden. I just copied and pasted content of the .scss into .css, deleted the .scss file and renamed the the .css file to .scss.
you forgot to add this to your application.js: //= require bootstrap-sprockets
make sure it is under //= require jquery
Related
I'm following M Hartl's Rails Tutorial, and trying to add a bootswatch theme.
I have succeeded by using the boostrap-sass gem as defined in the tutorial, and twitter-bootswatch-rails gem from the net.
However, in Hartl's tutorial, all the CSS that we write in addition to default bootstrap is in a separate custom.css.scss file.
My application.css.scss file (Renamed from Rails default .css) contains
#import "bootstrap-sprockets";
// Import cerulean variables
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
#import "custom";
Which works, however the custom.css.scss file has a reference to $gray-light, a variable set in bootstrap. The server will return an error at the variable reference in the css file, unless I add
#import "boostrap-sprockets";
#import "bootstrap";
to custom.css.
End result though, is I now have two gigantic CSS files being used, for what I would think is no reason.
I thought the idea of
#import "custom";
was to include my custom.css.scss file into the application.css.scss file so that it would all be in one place, and variables would work nicely.
The other method that works is to dump my entire custom.css.scss contents into application.css.scss but that defeats the point of having separate files.
Am I doing something wrong?
Edit: To add more fuel to the fire, I deleted the two lines from custom.css, and instead `#import bootswatch/cerulean/variables"; and it works. However, the resulting CSS that's on the website itself has NOTHING from that file.
This could well be wrong, but I post an answer to my own question as follows:
It appears that the sprockets lines //= require_self and //= require_tree, even when listed inside the comment section of the manifest as they are by default, are actually running.
This then causes each of the files "required" to be compiled separately. As a result, instead of getting a single application-FINGERPRINT.css file, I was getting an application, a custom, and a static_pages one. I assume this is the "require_tree" line.
After removing these lines, the #import "custom"; line works as I expected it to. The files are all combined into an application-FINGERPRINT.css file and I no longer need to #import anything at the top of custom.scss.
I'm a newbie in ruby developement so sorry in advance if my question isn't less precise at the first time.
I try to apply a css style but the way I'm using doesn't work as I think it should.
index.html.erb from home controller app/views/home
<div class="box_home">
...
...
</div>
home.scss app/assets/styelsheets
.box_home { margin-bottom: 20px; }
application.scss app/assets/styelsheets
#import "bootstrap-sprockets";
#import "bootstrap";
body { padding-top: 50px; }
.box_home { margin-bottom: 20px; }
Nothing happend like that. But if I insert the css property in application.scss it works.
Is it the right way to do or should I decentralize styles in each controller's scss files ? If yes, how ?
I tried to find docs or older Q&A but I didn't.
Thanks in advance for your help.
Did you require this file inside application.css?
*= require home
If you are working with SCSS files, you should actually use #import instead of require in your application.scss
#import "bootstrap-sprockets";
#import "bootstrap";
#import "home";
// ...
From the rails asset pipeline documentation
If you want to use multiple Sass files, you should generally use the Sass #import rule
instead of these Sprockets directives. When using Sprockets directives, Sass files exist within
their own scope, making variables or mixins only available within the document they were defined in.
I'm using LESS. From Google PageSpeed I've learnt that, using #import in CSS file will hamper the site speed. So I'd like to exclude any #import thing from my CSS. I have 2 different stylesheets reset.css, and rebuild.css - to avoid #import I copied all of their code into my main stylesheet. So the real styles of my site got below many code and that's a problem. So I need the two stylesheets to #import into the styles.less (main stylesheet) file, in a way, so that, they actually won't generate any #import when I'm compiling them with WinLESS into pure styles.css. I want them to insert physically into the style.css when I'll compile the styles.less into styles.css.
I want styles.less like:
#import('reset.css');
#import('rebuild.css');
/* SITE STYLES HERE */
But want the rendered styles.css to be:
code from reset.css
code from rebuild.css
/* THEN, SITE STYLES HERE */
I'm using WinLESS to compile the CSS file from LESS, and NOT USING .less with JavaScript directly, but using the styles.css only.
The simplest way:
#import (less) 'reset.css';
#import (less) 'rebuild.css';
/* SITE STYLES HERE */
You can just use an import statement in your less file. it will be included (css code is inserted) in your result css file.
read more on winless example page (click on Importing)
Example:
styles.less:
#import('other.less');
.myOtherClass {
// other rules
}
other.less:
.myClass {
// rules
}
after compiling using winless (or any other less compiler); result.css:
.myClass {
// rules
}
.myOtherClass {
// other rules
}
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556
Can you import .css files into .less files...?
I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows:
#import "normalize";
//styles here
#import "mixins";
#import "media-queries";
#import "print";
All imports are other .less files and all works as it should.
My current issue is this:
I want to import a .css file into .less that references styles used in the .css file as follows:
#import "../style.css";
.small {
font-size:60%;
.type;
}
// other styles here
The .css file contains a class called .type but when I try to compile the .less file I get the error NameError: .type is undefined
Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!
You can force a file to be interpreted as a particular type by specifying an option, e.g.:
#import (css) "lib";
will output
#import "lib";
and
#import (less) "lib.css";
will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.
If you want your CSS to be copied into the output without being processed, you can use the (inline) directive. e.g.,
#import (inline) '../timepicker/jquery.ui.timepicker.css';
I had to use the following with version 1.7.4
#import (less) "foo.css"
I know the accepted answer is #import (css) "foo.css" but it didn't work. If you want to reuse your css class in your new less file, you need to use (less) and not (css).
Check the documentation.
Change the file extension of your css file to .less. You don't need to write any LESS in it; all CSS is valid LESS (except of the MS stuff that you have to escape, but that's another issue.)
Per Fractalf's answer this is fixed in v1.4.0
From the LESS website:
If you want to import a CSS file, and don’t want LESS to process it,
just use the .css extension:
#import "lib.css"; The directive will just be left as is, and end up
in the CSS output.
As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary #imports consuming precious bandwidth.
Try this :
#import "lib.css";
From the Official Documentation :
You can import both css and less files. Only less files import
statements are processed, css file import statements are kept as they
are. If you want to import a CSS file, and don’t want LESS to process
it, just use the .css extension:
Source : http://lesscss.org/
If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but not include the whole CSS file in the result you can use #import (less,reference) "reference.css";:
my.less
#import (less,reference) "reference.css";
.my-class{
background-color:black;
.reference-class;
color:blue;
}
reference.css
.reference-class{
border: 1px solid red;
}
*Result (my.css) with lessc my.less out/my.css *
.my-class {
background-color: black;
border: 1px solid red;
color: blue;
}
I'm using lessc 2.5.3
If you want to import a css file that should be treaded as less use this line:
.ie {
#import (less) 'ie.css';
}
since 1.5.0 u can use the 'inline' keyword.
Example: #import (inline) "not-less-compatible.css";
You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS.
So you can use this to include the file in the output so that all CSS will be in one file.
(source: http://lesscss.org/features/#import-directives-feature)