I'm writing a simple app using Twitter Bootstrap. In my main HTML file I have the following lines:
<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>
so every time I refresh the page, the whole css gets generated.
This takes about 15 seconds each time, so it's a pain waiting for the page to load.
I tried using SimpLESS to generate css out of the less files but the generation failed.
I'll try to get that to work, but I'm also wondering whether I'm not doing something wrong...
I dislike the fact that the css is generated each time, even if I don't change the less files. Is there a way to make less cache the css somehow?
Or perhaps there are other alternative solutions to this problem?
I would suggest removing parts of your .less file(s) to see if anything specific is causing poor performance. It shouldn't be that slow. My guess is that a particular mixin or function is causing the issue.
I would also suggest profiling the JavaScript (Chrome has a nice JS profiler) to see if anything obvious appears, like a LESS-related function which is slow and called repeatedly.
Here's my overall LESS strategy which might be helpful to you in the future. I'm using Visual Studio and ASP.Net, but you could do this with a variety of environments.
Most importantly, no JavaScript for LESS. Everything is done server-side.
In development, I request my .less files through the dotLess HTTP handler, which processes them and handles the caching. Every now and then, the cache glitches and I have to restart my local web server, but it's not a big deal. This enables me to make real-time changes to my less and see them by just refreshing the page. It's also fast.
Example: <link rel="stylesheet" href="foo.less" />
For production, I use a build action to compile my .less files into a single CSS file and reference the CSS file directly in the page. This takes everything dynamic out of the equation.
Example: <link rel="stylesheet" href="final.css" />
do you need every part from Bootstrap? Because that a lot of bloat code.
Try to disable some part from the main bootstrap file:
Do you need all the CSS for JavaScript parts?
Do you need 'code' & 'tables'?
In "responsive-utilities", you can comment out a lot if you don't need it.
Let me show you my setup, it's in SASS, but the principle stays the same:
// Compass utilities
#import "compass";
// Core variables and mixins
#import "includes/variables";
#import "includes/mixins";
// Reset
#import "includes/normalize";
#import "bootstrap/print";
// Core CSS
#import "includes/scaffolding";
#import "includes/type";
//#import "bootstrap/code";
#import "includes/grid";
//#import "bootstrap/tables";
#import "includes/forms";
#import "includes/buttons";
// Components: common
#import "includes/component-animations";
#import "bootstrap/glyphicons";
//#import "includes/dropdowns";
#import "includes/button-groups";
//#import "bootstrap/input-groups";
//#import "bootstrap/navs";
//#import "includes/navbar";
//#import "bootstrap/breadcrumbs";
//#import "bootstrap/pagination";
//#import "bootstrap/pager";
//#import "bootstrap/labels";
//#import "bootstrap/badges";
//#import "bootstrap/jumbotron";
//#import "bootstrap/thumbnails";
//#import "bootstrap/progress-bars";
//#import "bootstrap/media";
//#import "bootstrap/list-group";
//#import "bootstrap/panels";
//#import "bootstrap/wells";
#import "includes/close";
// Components w/ javascript
#import "includes/alerts";
#import "bootstrap/modals";
//#import "bootstrap/tooltip";
#import "includes/popovers";
//#import "includes/carousel";
// Utility classes
#import "bootstrap/utilities"; // Has to be last to override when necessary
#import "bootstrap/responsive-utilities";
//custom styling
#import "includes/customstyles";
Related
My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
I am trying to compile LESS files together.
/* frameworks */
#gitpath: "./../../../../git/";
#import "#{gitpath}normalize.css/normalize.css";
#import "#{gitpath}lesshat/build/lesshat-prefixed.less";
#import "#{gitpath}Semantic-UI/build/packaged/css/semantic.css";
/*custom*/
#import "variables.less";
#import "layout.less";
The problem is imports of normalize.css and semantic.css don't get compiled.
I tried to use inline directive:
#import (inline) "#{gitpath}normalize.css/normalize.css";
but then minification flag [-x] does not work when compiling through lessc command.
Any idea how to deal with this? Or better, is there any better practice how to use up-to-date CSS libraries in your projects? Currently I am storing them in a local git repository and try to use them among my projects.
Thank you
I have coded a Landing page just to try Twitter Bootstrap with Less files.
I am not sure if I have organized my less files as it should be.
In the head section of my index.html:
<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />
Here the content of my bootstrap.less
// Core variables and mixins
#import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
#import "less/mixins.less";
// CSS Reset
#import "less/reset.less";
// Grid system and page structure
#import "less/scaffolding.less";
#import "less/grid.less";
#import "less/layouts.less";
// Base CSS
#import "less/type.less";
// Utility classes
#import "less/utilities.less"; // Has to be last to override when necessary
In my folder "less" i have the following files
utilities.less
utilities.css
variables.less
variables.css
grid.less
grid.css
type.less
layouts.less
mixins.less
scaffolding.less
reset.less
They are all actually necessary to make my landing page work but I am not sure if this file organization is the best solution.
I am bit confused about that, could you help me out and tell me if I am doing well? Is there a better way to organize the files?
Here you see the landing page
How you organize your files is entirely up to you, but here's how I normally do it during development:
public/
css/
layout.css (compiled from main.less)
less/
main.less (imports bootstrap/bootstrap.less)
bootstrap/
bootstrap.less
...etc...
Usually main.less also imports files like blog.less, forum.less, etc (depending on the site content). This schema lets me include layout.css in the HTML, and either compile the lesscss through a watcher, or on demand.
I've been trying to split my less files up in to sections to make them easier to navigate, and want to import them all using one main file to compile them to css. my style.less file looks like this:
#import "reset";
#import "colors";
#import "grid";
#import "functions";
#import "headings";
#import "listings";
#import "content";
#import "buttons";
#import "layout";
#import "forms";
I'm using Winless to compile, and it says "Successfull Compile", but the resulting css file is completely blank. When I change my style.less file to only have one import, it imports that file no problem, so I know it's not a file directory/permissions problem. Any ideas? This is driving me mad. I love LESS, I don't want to have to do everything in one sheet.
I'm on a PC. Don't seem to have any trouble doing this at work on OSX, but I use Windows 7 at home and need something like Winless. I get the same results using less.js client side javascript file.
This is an old issue and it now works fine with less.js in v2.5.3.
#import "reset.less";
#import "grid.less";
#import "color.less";
#import "custom.less";
CDN reference below:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
Just remember to put your:
<link rel="stylesheet/less" type="text/css" href="less/compiled.less"/>
before the less.js reference.
I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.
Using less.js has given me issues. Like darylknight, I suggest an alternative. I present upon to thee WinLess