I use Less with my site. Let say the code look like below.
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
</head>
<body>
...
</body>
</html>
When I updated the styles.less file, and refresh the page, Less.js will compile the less file and apply to the page. But I just wonder where is the compiled CSS file stored? Does less.js call lessc to compile the less file?
In the setup you gave (the HTML page), you are letting the client to worry about interpreting the Less file.
To be exact, Browser loads the JavaScript library you link to, and then this JavaScript interprets the styles.less file.
The actual css file is not stored on the server, as it is all the browser-sided work, and I doubt the browser stores it somewhere except RAM.
This does not sound like a good approach though. We, generous site owners with high-end servers love to lift the computational bit off the clients as much as possible. We do not want to upset an iPhone user running low on battery without neccessity.
Alternatively, you run lessc styles.less > styles.css on your styles file after you finished editting. And then use styles.css in HTML directly, also remove the less.js from HTML.
Question you might want to ask: How do I make compiling to css automatic then?
There are several solutions:
Automate the compilation of less file on it being changed, using some software to watch a file or directory.
The Editor you are using might have compile less feature, or be added as an extension.
You might want to consider strat using a web framework. It is an overkill for just compiling less, but if you get other advnatages from web framework or are already using it - that is a good option. An example of using Less middleware with Express framework.
Related
Today I discovered less stylesheet and egor to learn it.
But i am confuses it is showing inside inspect element Internel Server error 500 in linking less.
I first install it via command in nuget console
ie
PM -> install-package dotless
and then relate the stylesheet in my header content like
<link rel="stylesheet" type="text/less"
href="Content/style.less" />
Is this correct way? If not help required.
The style you used is only recommended for debugging. You need to add the style.js script to your site, like below. You may also need to make sure your server is configured to serve .less files by adding the MIME type to your site configuration.
<script src="less.js" type="text/javascript"></script>
But no, that is not the correct way for production use. Your browser has no idea what LESS is. Your browser understands CSS only. For test purposes, less.js is able to convert .less files into a usable form, but it's not recommended for production use.
Instead, the point of LESS is that it compiles to CSS. Then you provide that CSS as your stylesheet in the traditional way. The LESS documentation should help you out. As a quick example, here's how you'd compile LESS to CSS.
lessc styles.less > styles.css
In the above command, lessc is the compiler program. styles.less is your LESS sheet being passed to the compiler. The output would normally go to STD OUT and you'd see it in the console, but since we included > styles.css we're redirecting that STD OUT into a text file called styles.css.
there are 3 files, less.js, style.less and style.css. I so far don't understand what the less.js do. Do I need to include it in somewhere? and for style.less, I know I should write less in it and it compile to my style.css, but should I included it in my index.html?
I don't understand the guide in less.org.
First off you don't need to use less in order to use Twitter Bootstrap. The idea behind less to have smaller style sheet files. And Being that Bootstraps css is so large, less helps mitigate that issue. Now about the files you mentioned.
Browsers don't understand *.less files. less.js, in this context, serves as the "compiler"
for the *.less files
Start from the website:
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Then download less.js from the top of the page, and include it in the element of your page, like so:
<script src="less.js" type="text/javascript"></script>
End from the website
They mention compiling the *.less into a proper css. What they should have elaborated somewhere on the site is "Why compile less?"
Like all code, less will require debugging
Running it through a command line compiler can find errors that less.js can't
less.js is an additional file and processing load that is put on the browser. Hence compiling *.less into *.css can make for a faster browsing experience
The Bootstrap gives you the option of choosing either css or less
I've been meaning to get into/start using less/sass but am having a major hurdle.
I normally edit my css using cssedit/espresso 3 which is basically like firefox's firebug.
After goofing around with codekit etc, it just seems really cumbersome process in terms of being able to see css changes live and being able to experiment.
Is there a similar solution (to css edit/espresso Live preview) of being able to edit styleshees live in less/sass approach?
I can only answer you question for LESS. Personally i think grunt(tool) are great compile your source for production or syntax checking in collaboration projects.
The best tool for "live" testing and editing your LESS code seems your browser in combination with a preferred text/css editor.
See also: http://lesscss.org/#usage "Client-side usage" here you will find everything you need. Also they will give you the same message:
Client-side is the easiest way to get started and good for developing
your LESS. For production and especially if performance is important,
we recommend pre-compiling using node or one of the many third party
tools.
You will have the opportunity to setup a global javascript object with settings. The most important setting in this case seems env set it to development this will prevent caching of your LESS files and show compile error direct in your browser:
To start add something like this to the head of a html file:
<link rel="stylesheet/less" href="test.less">
<script type="text/javascript">less = { env: 'development', poll: 5000 };</script>
<script src="less.js" type="text/javascript"></script>
If you saved the above in less.html call in your browser http://localhost/less.html#!watch now edit your LESS files (test.less in this example). After saving your LESS file the browser will show you your results "live" (within 5 seconds).
You can use #import in test.less and also the imported files are under watch.
I have no problem implementing a solution in my pom.xml using the samaxes plugin to minify and generate my required example.min.css file, is there script, how can I keep the development environment utilizing the CSS files on the fly without greatly changing the CSS source files?
I have the following code in my xhtml doc:
.
.
<link type="text/css" rel="stylesheet"
href="/assets/css/forms.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/content.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/images.css"/>
.
.
My pom creates an example.min.css and saves it in the same location using samaxes beautifully. I want to use this in my page but only in production...I want to be able to keep up with development on the fly on these various files but when I do the maven compile, it generates the example.min.css file from this and I intend on using this instead in production. There's tons of great answers saying which plugins to use to optimize and minify my css and js, I just need to know if there's a best-practice out there to point to them without bringing in another plugin like wr04J or is there some js I can implement that can build a conditional stylesheet statement on the fly if I use a param or something?
Originally I was using the concept of applying a rendered attribute to a ui:fragment tag that would render one way or another depending on a bean property that checked for the existence of the Maven debug property but this generated way too much overhead and just seemed like a bad hack just to get it to work. I need a better, simpler idea.
With the current version of Minify Maven Plugin you have to do something like this:
if productionEnvironment
<script src="js/bundle.min.js"/>
else
<script src="js/bundle.js"/>
end
It remains easy enough to debug and you only have to define your source files once (in the pom).
This will, however, be fixed in a future version of the plugin. Source Maps might soon become a reality and I'm planning to add support for it very soon.
I've even looked at CSS Crush, Minify, SmartOptimizer, CSSTidy and a slew of other PHP CSS compressors. But they all have one major flaw.
You can't use this:
<link rel="stylesheet" href="css/styles.css" type="text/css">
When using dreamweaver, this is the only way to see the DESIGN in DESIGN VIEW. If you replace that styles.css file with styles.php, it breaks, even if you HAVE css code in the file..
I am using minify for my JS and it is working beautifully, but if I use it with CSS, Dreamweaver gets scared and doesn't know how to render it. haha. Of course, it IS server side though.
Does anybody have a workaround for a situation like this? I do prefer to use dreamweaver because of the immediate changes that can be made in design view, as well as the FTP capabilities and code hinting, but even the new CS6 seems to whine when you use anything BUT a .css file.
I can't verify that this solution will work, but it should theoretically.
First, you'll want to add .css files as PHP, so you don't have to change the file extension. This is good practice regardless, since the file extension should indicate what content is being delivered. I don't know that there's any standard that states this outright, but it's good practice. If you're using Apache, you can add this to your .htaccess or global server configuration file:
AddHandler php5-script .css
Then, just <link rel="stylesheet" href="css/style.css" type="text/css" /> after renaming your file back to CSS. For more details on this, see the Apache docs on AddHandler.
Second, you'll want to 'comment out' your PHP code within your CSS. For example, you could do something like this at the top of style.css:
/*
<?php include 'your-file-compressor.php'
// Put any PHP code for compression here
?>
*/
That way, Dreamweaver will still read the actual CSS code, but PHP should be able to compress before delivering it to clients.
As Kishore pointed out, Minificaiton should be part of build process. While development you should use the raw css file.
Instead of href="css/styles.php" its better to use href="compresscss/path/css/styles.css". Here compresscss/path/css/styles.css is mapped to compresscss.php?path=css/style.css. This can be done by mod_rewrite in apache.
This way dreamweaver will see it as an css file and also you will compress it.