Is it possible to see the css output generated by the scss files in NextJS in a legible form in Visual Studio Code? I found bundled, minified, and unreadable, but wondered if there is a plugin or something that lets me see what my scss files are generating. Thanks.
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
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
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
In TextMate there is this awesome option to "Format CSS" and "Format CSS Compressed". This option doesn't seem to exist in vim. Perhaps it's in a plugin I'm not aware of? Or maybe I need to integrate CSS Tidy somehow?
You can integrate CSS Tidy fairly easily. Since you're coming from TextMate I'll assume you're on a Mac. If you don't already have CSS tidy installed, I'd recommend installing it via a package manager, like the excellent Homebrew.
Once it's installed, you can allow Vim to use CSS tidy for the = command, which automatically formats code, by adding the following to your ~/.vimrc:
autocmd filetype css setlocal equalprg=csstidy\ -\ --silent=true
Now whenever you have a CSS file open, it will consult CSS Tidy to format it when you invoke the = command. Try it on an open CSS file with gg=G to format the whole document.
Consult the CSS Tidy usage guide to add any other options you like, and don't forget to escape spaces you add to the above ~/.vimrc command with \.