In several examples (i.e. Railscasts episode, this Stackoverflow question, etc), I see "compass" being imported before "compass/reset" like so:
#import "compass";
#import "compass/reset";
Could someone explain to me why reset shouldn't come first? Or does the reset order not matter with respect to the base compass import?
#import "compass/reset";
#import "compass";
In the case of Compass, it does not matter what order you do your imports because it is just a collection of mixins, functions, and variables. Compass does not emit any styles unless you tell it to.
This may or may not be the case with other libraries, so make sure you always read the documentation.
Related
So, let's assume I have the following situation: I have 2 .scss files.
One with a variable, and one that will be actually translated into .css for my webpage, where I want to access to said variable.
vars.scss
$my_color: red;
main.scss
#use 'vars'
body {
color: $my_color;
}
What I am trying to do is to access the variable defined in vars.css and use it.
The reference is correct since if I use #import instead of #use, everything works
I've also tried to reference to the variable with vars.$my_color as was suggested in the documentation, but I keep getting a "undefined variable" error.
Well, if you read the documentation then in the ⚠️ Heads up! section, where the undesirability of further use of the #import rule is written, below, you can read the following:
The #import rule has a number of serious problems:
#import makes all variables, mixins, and functions globally available.
Therefore, the #use rule makes them inaccessible. Which is what you observe in action.
I think to achieve the desired result, combination of #use and #forward rules should be used.
But I am using VSCode Live Sass Compiler (Maybe you're using it too?) where #use is not supported so I couldn't give you the exact howto.
Hope this clarifies a lot.
I've discovered that #import has performance implications. However all of my sass files #import a global-constants.scss at the top of the file to reuse several variables for colour and other properties, so that I can change the main colour etc from one place.
Is there a more performant way to reuse variables in sass?
EDIT: upon pondering this further, I notice that my css file that is generated from my sass file after compilation, has no import statement, and all of the variables are rendered as proper css values. So I'm probably not going to get any performance issues anyway, is my guess.
When you are using #import inside the SCSS, it will try to include the whole file and send it to the browser, (it is better, if you have configured it to return only one single CSS file or minified). That way, it is clean and better:
No #import in the output.
Source code is split using #import, keeping the modularity.
Summary: No performance issues because of #import.
Bootstrap has allocated many keywords that we use when we develop web projects. Such as: container, navbar, nav, etc.. Sometimes I use these keywords for some of my projects. But for some other projects I don't need any feature of these keywords but I need the names. Is there any way to disable these keywords without overwriting them?
These keywords are important because these are what we call good practice. I don't like using menu or navigation-bar instead of navbar. So, is there any way to disable css of these keywords?
Thank you.
This is one of the downfalls of using a framework, and you have to ask yourself at one point whether it's worth your time building your own boilerplate for projects.
As for your question, I don't believe there's a "safe" way to do that with the vanilla css file, but if you have ruby installed and you download the SASS version you may be able to remove some of the other stuff you don't need by selectively commenting out components in _bootstrap.scss:
#import "bootstrap/component-animations";
#import "bootstrap/dropdowns";
#import "bootstrap/button-groups";
#import "bootstrap/input-groups";
// #import "bootstrap/navs";
#import "bootstrap/navbar";
#import "bootstrap/breadcrumbs";
#import "bootstrap/pagination";
#import "bootstrap/pager";
I am developing a new template for joomla and decided to use the Gantry framework. The mai problem of using it, is that i don't really understand the css/less structure. I need to understand it so i can make it more dry and easy to maintain. I find different overrides in difeerent css/less files. I don't really understand the logic. Can someone explain me how the css/less is structured?
Here is the global less file:(hope this gives an ideea about the structure)
#import "jui/less/mixins.less";
// Core variables and mixins
#import "variables.less";
#import "mixins/index.less";
// Core and Grid
#import "gantry-core.less";
#import "joomla-core.less";
// Template core styling and layout
#import "template.less";
#import "style.less";
#import "header-#{headerstyle}.less";
#import "jui/less/font-awesome/font-awesome.less";
#import "utilities.less";
#import "prettify.less";
#import "offline.less";
#import "error.less";
#import "jui/less/bootstrap-overrides.less";
Thanks.
It's a mess, I agree. It's clearly not been authored with end-users in mind, and it certainly isn't DRY. In my experience Gantry's LESS is very badly written, demonstrating a fundamental lack of understanding about how to use pre-processors responsibly or efficiently and creating some horrible outputs in the process.
If you want lightweight and maintainable LESS you'd be better writing it yourself, from scratch.
Last template I built with Gantry I disabled their LESS compiler, removed their LESS files and dropped in my own Sass framework instead.
The line #import "header-#{headerstyle}.less"; gives us a clue that from global.less you are able to load different themes depending on user selection in backend.
Basically you can follow the files inheritance by seeing what is being imported by each file.
I'm using assetic with less filter and storing main less file in app/Resources/...
I'd like to import into that file other less stylesheets from inside bundles.
Everything works fine but the paths are driving me nuts.
My base.less looks more or less like this:
#import 'normalize.less';
#import 'mixins.less';
#import 'header.less';
#import 'footer.less';
#import "../../../../../../src/Acme/FooBundle/Resources/public/less/example.less";
Is there a way to pass 'paths' option to less compiler in symfony2?
EDIT: I've found a issue for my problem on assetic's repo on github:
https://github.com/kriswallsmith/assetic/pull/218
Isn't it possible to store the path in a variable like they say in the less documentation?
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
This is not exactly what you want but this way you define it only once.