The LESS docs here
http://lesscss.org/#usage
say: "Make sure you include your stylesheets before the script."
However, BlogEngine.net seems to make that impossible by rewriting all the links to *.js file and putting them before the style sheets.
I've tried everything I can think of including putting the files in a subdirectory and using a relative path. I'm very hesitant to mess with the BlogEngine.Net code.
Is there any way to get LESS to work with CSS in BlogEngine.Net? Any way to force the engine to allow me to order the Javascript entry after the *.less reference?
Perhaps you could use the Tracking Script or the "Add custom code to the HTML head section" fields (you can find them in Admin -> Settings -> Custom code).
From what I can see in the code, these fields are rendered in the HEAD section after the stylesheets.
Is there any way to get LESS to work with CSS in BlogEngine.Net?
If you are willing to consider a different approach than using the client side less parser than I recommend trying the design time less parser in either Visual Studio 2012.2 or The Web Essentials Extension in Prior releases of Visual Studio 2012. It allows you to write your less file and have it compiled to css and minified css every time you save. Then you can just reference the output min.css file in your theme.
Related
I'm trying to upgrade a Plone 3.3.5 server to 4.3.6. However, when I update the site, I find that the CSS for the site is not carried over. If I go to my CSS Registry, I find that almost all of my CSS is producing the (resource not found or not accessible) error.
My confusion seems to be in how Plone locates and links/imports stylesheets in general as Plone seems to be loading virtually none of my CSS and pretty much giving me raw HTML in the browser. I'm assuming the CSS registry is loading CSS from the buildout-cache. With this assumption, an example stylesheet that I'm targeting is located under:
Plone/buildout-cache/eggs/Products.NuPlone-1.0b3-py2.7.egg/Products/NuPlone/skins/nuplone_styles/base.css
When the CSS Registry failed to load this, I noticed that some CSS was being loaded in via handles like this:
++resource++tinymce.stylesheets/tinymce.css
But this format doesn't work with base.css and others.
So my question is, given I've got a new product installed with some CSS included in it, how do I get Plone to target said CSS?
For resources inside "skins" FS folders, the way to register on portal_css tool is to simply provide the filename, so simply put there base.css.
If this is not working probably the nuplone_styles skin folder is not registered properly in the portal_skins tool.
So go to ZMI --> portal_skins --> click on "Properties" and check the following:
what theme is used? You must probably switch back to NuPlone (but I'm not sure if it works on Plone 4)
is the nuplone_styles folder in the list of CMF layers of the used theme?
Please note also that adding the nuplone_styles layer to another theme is not a good idea. Please think about copying CSS you need in the custom directory.
This is not an answer, but some additional explanation, not fitting in a comment:
The "old" way to include style-sheets via skin-folders, requires to specify only the file-name, not a full path, and will be found by traversal, meaning the first found file with the according name, will be taken. In case of several files with the same name, the order of skins matters.
The other way is to register style-sheets via a browser-package, to have an unambiguous path to a certain file, they must start with +++resource++.
As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?
I am using Polymer.
Thanks!
Laurent
You can make the client compile the LESS to CSS , you should definitely take a look at this :
http://lesscss.org/#client-side-usage
It is advised to compile it yourself to css in a production environment though !
Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?
Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:
src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.
We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.
Simply compile your less and embed the generated CSS file via good old link tag.
I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.
Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ -
To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less
The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file.
Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.
If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS.
Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222
One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.
I'm using Gulp for my build process and I found this module very useful:
https://github.com/MaKleSoft/gulp-style-modules
It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.
Bounty: Bounty given to whoever share a standalone command-line CSS minifier for Windows (that is, run just like JSMin and CSSTidy, but actually minifies rather than 'prettify' and remove properties
Using Visual Studio 2010 Post-Build Events, I'm currently working to reduce our CSS/JS framework by merging and minifying the files into .min for production when building the solution/project.
For the JS I'm using JSmin.exe while for CSS, CSSTidy.exe
All okay for JSmin, but CSSTidy is removing all IE7 *property hacks and other properties used by display-table.htc (-dt-display:). If I use the --preserve_css=true setting, it keeps the comments (which I don't want) and the *property have the * stripped out (which I want).
Example:
.row-fluid .span1 {width: 6.382978723%; *width: 6.329787233638298%;}
Becomes (note it added linebreak as well):
.row-fluid .span1 {
width:6.382979%;
width:6.329787%
}
The question made here is what I'm looking for BUT the answer was given for HTML Purifier (which I don't use) instead of a CSSTidy alternative.
So the questions:
Is it possible to make CSSTidy NOT remove the IE7 hacks nor other invalid properties (which I actually use)?
Is there any other standalone/command-line CSS compressor (specially one which actually minifies rather than just tidy it)? (bounty for that)
Obs.:
The VS solution is TFS shared, can't make all devs install YUI or whatever other framework which isn't standalone, nor other languages frameworks like Ruby/PHP. Currently the jsmin.exe and csstidy.exe were the best since I just added both to the solution and call them on post-events.
After spending all Friday searching and not finding a good tool, today I gave a new shot and finally found a tool that minify both CSS and JS.
The name isn't much straightforward, that's why was hard to find: Microsoft Ajax Minifier
While asks for install, I just copied the folder contents to the project and worked like a charm.
For those who want to use it as Post-Event build:
Considering you have a .js folder and you want to concatenate and minify all .js files that end with .debug.js.
type "$(ProjectDir)\Scripts\*.debug.js" | "$(ProjectDir)tools\AjaxMin" -JS -comments:none –global:jQuery,$ -out "$(ProjectDir)\Scripts\myProject.min.js" -clobber
$(ProjectDir) is the project folder;
type is a cmd.exe command for displaying the contents of one or more files. So I order to get the contents of all *.debug.js files and leave in the STDIN;
Invoke AjaxMin.exe (no need for the .exe that I copied to my \tools\ folder;
pass arguments as needed with -argName:argValue;
use -out and a pathname with a file that will be outputted;
add -clobber to overwrite if file exists
Now everytime I need to update my css and js files, I re/build the project and voilá, minified CSS and JS.
I'm considering using less in an upcoming project but have been trying to figure out the best way to work with it while in development.
Usually when developing a site I'll write my html and css then start testing it in the browser, see how it looks, refine, reload, and repeat the whole process until I'm happy with how everything looks.
A crucial part of the process is using the Inspect Element feature in the browser to identify the piece of CSS I need to change. Usually just by looking at the line number I know exactly where to go in my CSS file.
But if I use Less (or any other method of combining/compressing my CSS) it makes the line numbers useless. I know I could use Find to search for the section of code but line numbers are much faster.
This is especially true when working on a project that involves other developers or large CSS files.
I just wondered how others deal with this, or maybe there's a better process?
Minified CSS really should only be going out to the production version of your site. When you're performing tests/changes etc, this should all be done in some test or development version of your site in a secondary server area where you can have the line-numbers version of css available. The same would go for JavaScript. On the production viewable copy, you want it minified. In development, you don't.
In any event, you should always have 2 copies of your css. The first copy is the primary source copy that is your development copy. It has all of your properly formatted styles with line-breaks in it. The other is the very latest minified version of your css that went to production. This will allow you to switch between the 2 files rapidly in the event that you need to work something out, assuming your site uses some sort of templated delivery (layout pages, master pages, or whatever).
The minified version will only be useful in the final delivery. All other needs should use the master copy. It might not be a bad idea to put a configuration in server-side portion of your site that determines what style sheet to use. That way you can simply change a configuration setting and go into a "debug" mode.
I agree with Joel - that's how I handle it. A build script minifies the CSS (and JS) before each release is FTP'ed to production. I just have a switch in PHP like:
if ($config->prod()) {
// incldue the minfied css
} else {
// include all the original files
}
Personnaly, I use an ant build script to make a production version:
it "condense" multiple css files in one
then it minify them with YUI compressor
same for scripts
(page recomposition to point to the newly generated files)
this way you divide your http request for those files, and gain some bandwith from 30% to 70% i'd say. depends on gzip also.
in my case, the dev version have:
18 css weighting 178ko
reduced down to 1 css at 96ko in the production version
I personally use tools to minify and inject the CSS into the browser each time i save my Less file. So i see each change immediately. This way it's pretty clear what just happened. I don't need the referencing line numbers that much any more.
I recently started using source maps, to see the correct file and line numbers (of my less files) when inspecting CSS in the browser again. I think that is what you are looking for. I personally don't need this extra fanciness that much.
Does anyone know how to enable css intellisense in a non .css file extension? I have a .less file that is basically a .css file but visual studio will not use .css intellisense on the file.
Try using the CSS Is Less extension for VS2010:
http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923
Forces .LESS files to open in the CSS editor, without having to change settings or adding HTML tags to your LESS file.
Visual Studio allows you to map custom extensions to the different editors by going to Tools->Options->Text Editor->File Extension. You simply supply the custom extension and select the editor you wish to associate it with. Sadly, the Visual Studio team has seemed to overlook the CSS editor in the list of editors.
A possible work around is to associate the extension with the Html Editor and then type <html><head><style> in the top of the file and </style></head></html> in the bottom of the file. This will give you CSS intellisense support between the sets of tags. You can then remove the HTML tags and the file association when your done editing.
Another alternative is to name your files '.less.css', then change any references to them in either your master page or your main css file (the one that loads all the other css files with #import statements), then configure the less handler as follows in the 'handlers' section of your Web.Config file:
<add name="LessCssHandler" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.LESS.CSS" verb="*" />
You then get syntax highlighting, less works fine and you've not had to set up new file extensions in vs, load any vs addins, etc, which is handy if you have a team of more than 1 developer.
If you use a single file to define colours etc, it will have to be named '.less' and imported into each .less.css file with an #import 'exampledefs.less'; statement within that file.
I'm really enjoying MindscapeWebWorkbench. It is a free plugin for VS 2010 to provide .less support. In addition the extension came with .Sass and Coffee script support!
Give a try!
Ahh, Hanselman approves ;)
Late answer, but this is a hackish way to solve it in "pure" VS2010
#if DEBUG
<html><head><style>
#endif
in the top of the file and
#if DEBUG
</style></head></html>
#endif
in the bottom of the file
This extension provides full Intellisense
http://visualstudiogallery.msdn.microsoft.com/e646c6ec-87a7-45ea-81e8-d655a3d3e73e
I highly recommend using Crunch: http://crunchapp.net/
Visual Studio (Express included) allows you to open Less files with Crunch. True it doesn't open them in Visual Studio, it opens Crunch to edit the file, but there are many reasons to use Crunch anyways. The biggest reason is that Crunch will take your Less code and compile to a pure CSS file. The benefits are that you don't need to include the less.js script in your website, which avoids extra overhead, you can write Less code, and it's as simple as double-clicking your less file in VS, editing the file, then "crunching" (or saving) it over your CSS stylesheet. No need to touch the pure CSS generated by crunch.
Nobody has mentioned Web Essentials 2012:
http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
I had to make add a MIME-type to my IIS server like this:
Extension: .less
MIME type: text/css