How can I prevent changes in files imported to bootstrap.less from being compiled into files, which have bootstrap.less imported?
I have custom.less file imported into bootstrap.less Each change of custom.less generates new bootstrap.css. So far so good.
But I also have another file, choosen.less, and each change of this files generates new choosen.css file - this is also expected.
The problem is that each change of custom.less generates not only the new bootstrap.css but also new choosen.css, because choosen.less imports bootstrap.less.
As final result I get duplicated code in bootstrap.css and chosen.css
So, how can I prevent from changes outside bootstrap.less from being compiled into choosen.css ?
It sounds like you're referencing choosen.css and bootstrap.css separately.
If so, you can't actually want to import Bootstrap into choosen.css at all.
(alternatively, simply remove the direct reference to Bootstrap)
If you want to be able to use Bootstrap mixins in choosen.css, just import bootstrap/variables.less and bootstrap/mixins.less.
Related
There is currently SASS files in place (mixins, partials, variables etc) however, although these are still in place, a lot of CSS code was manually added to the final compiled CSS file which means the SASS files are not updated and if they were compiled, the manual CSS that was added would be overwritten.
How can I add the manual CSS that was added to the compiled CSS so that it is included as part of my SASS and prevent any overwrites?
I ended up adding the normal css file part of my SASS so it compiled as one file than to overwrite it. I then setup my own SASS structure which new code will go in to.
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
I have the following sass directory
sass
config.rb
-base.scss
-mixins.scss
-main.scss
site
-dowmloads.scss
-messages.scss
...
...
This works fine, however I don't want all my .scss files to compile to css files.I just want to output main.css because it imports the other files.
Whenever I do compass watch all the css get created...
Is this possible?
Start the filename with an underscore. You can then import this and it's styles will only get added to the file that imports it. The actual file itself will never get generated into it's own css file.
Hope it helps.
I'm working with Twitter Bootstrap using .less files on my site, and I have changed something in variables.less, and now I want to recompile the code. Can anybody point me to a source for how to recompile the .less code? Manually editing the file is not working.
Try SimpleLess. It's free for all platform http://wearekiss.com/simpless
Here follows a possible set of operation to perform to recompile changes. I suggest you to do the changes in a different file and then import the file with custom changes:
create a custom.less file in the same or a parallel directory (ex.: ../shared) of the variables.less file; add in the custom less file the reference to the variables.less file and the new definition of the constant (ex.: cell padding for tables);
#table-cell-padding: 5px;
#table-condensed-cell-padding: 2px;
add the reference to the custom.less file in the bootstrap.css file soon after the variables.less
// Core variables and mixins
#import "variables.less";
#import "../shared/custom.less";
#import "mixins.less";
compile the modified less files with web compiler (install it from Tools->Extensions and Updates if you don't have it);
check into bootstrap.css that the custom values are properly changed as the ones you set in custom.less;
check in compilerconfig.json (a file created from Web Compiler) that the file bootstrap.css that you are creating with compilation is the same referred in _Layout.cshtml; In case, modify the outputFile of the json file to overwrite the bootstrap.css referred in the _Layout.cshtml file;
I'm wondering if its okay to import all of bootstrap.less into my own .less file and then overriding anything I wish to change within that one file. My own .less file, style.less, outputs everything into a single style sheet, and I'm NOT including the compiled bootstrap.css file, only the JS files.
bootstrap // folder with all bootstrap less files.
style.less // imports bootstrap folder, and outputs style.css in root directory
Are there any drawbacks to doing it like this, or should I also be including the compiled bootstrap.css file?
Yes, do, you immediately gain access to all the mix-ins and variables. I'd say this is the most powerful way to use bootstrap.
As you're suggesting just import bootstrap.less at the head of your less file. I import any other mixin libraries, like lesshat, after that.
The problem is that you end up with one monolithic CSS file which is a nightmare to debug, but less.js 1.50 introduces source maps which is invaluable when using this methodology: http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/
A faff to set up but saves a lot of head scratching.