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
Related
I am still getiing used to SCSS's 7-1 architecture. I can do control+f and find a particular class in my CSS file but sometimes I forget where it is coming from as I have multiple SCSS file following the 7-1 architecture.
Is there a way where I can locate which SCSS file the compiled CSS is coming from?
I am using Visual Studio Code.
You can use sourcemaps and then the developer tools inside your browser to see where things actually came from.
See this link
I've got the below setup:
Brackets IDE
CodeKit for compiling SASS/SCSS into CSS
CloudMounter to mount a live copy of a Wordpress site via FTP (it also auto updates the server's files with any changes I make to the mounted version).
Here's how it works:
Add SCSS styling into .SCSS file
Save SCSS file
CodeKit auto compiles into CSS file, and stores on Local/mounted drive.
CloudMounter picks up the change and auto uploads it to server where Wordpress site is hosted.
Probably not the most efficient workflow but I'm quite impressed with what I've managed to pull off.
My question is: What happens if one of the other people in my office directly FTPs onto the server and makes an edit to the .CSS file instead of using the above method to add SCSS instead?
Will this break the compiler? When I update the SCSS file in the future, will this overwrite/ignore the new custom CSS?
I'd rather like to keep myself as the only developer who uses SCSS instead of having to train the other people in the office.
DON'T! It will be very hard to maintain what you edited and when you reload the Wordpress site you will lose the edits to the compiled CSS file (pure assumption). If you ABSOLUTELY have to just put the extra CSS you want to add or want your coworkers to add in separate CSS files that AREN'T SCSS/SASS.
SCSS compiles to CSS, that would be like writing software in C++ and then editing the compiled object files or writing software in Java and then editing the byte code. It is just very backwards and not ideal.
By doing what you said you wanted to do you are doing something that is not not advised. SCSS is neat because it allows you to short hand a bunch of stuff and saves you typing and annoying syntax and lets you use variables which plain CSS doesn't allow. Adding plain CSS to a mainly SCSS styled app isn't bad, but I suggest you put all your additional CSS in a separate file so that it is clear what the compiled CSS from SCSS is and what the new CSS you used is.
For the most part SCSS can almost be used Exactly like CSS as far as I know and its worth learning.
I'm just starting to play with SASS in Visual Studio. The question I have is that if I put my .scss file in the theme folder, the compiled CSS file will automatically be added to the site. The problem comes in that it generates a .css AND a .min.css file and BOTH are being applied to pages that use the theme.
Is there a way to have VS only add the .min.css automatically? I'd love to keep them in the theme folder and let VS handle linking everything automatically, but I don't want the stylesheet to be added twice. Or is there something else that is considered better/best practice that I should be doing with SASS files?
Are you using Web Essentials plugin to compile SASS? If yes, in its options, you can change it so when it compiles it can output min, css or either.
example for LESS (same for SASS):
Plus, even if VS is producing min and css files, it wouldn't make much difference since bundling will only use one file. You can just exclude certain files from the solution, and they will be ignored.
You could also look at build tools such as Gulp or Grunt to compile sass - they have much more options that you can apply.
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.
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.