I'm pretty new to the use of .less files. I downloaded a FLAT UI bootstrap. Now I wanted to change the base color of the bootstrap and therefor I used the variables.less file. There I changed the brand-primary to an other colorscheme.
Now I read everywhere I need to compile this file. But to where do I need to compile this because there is no variables.css file available only there is a bootstrap.css file and flat-ui.css file. I'm I seeing something wrong here?
It's about this bootstrap: http://designmodo.github.io/Flat-UI
Related
I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
Say I've built a .CSS file that I compiled from a .SCSS file.
What happens if one of my team members directly edits the .CSS file, and I come along and recompile a change to the .SCSS file?
How do I stop the direct updates to the CSS file being lost?
You can't.
You must enforce .css files to be only written by scss compiler.
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.
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.