{"id":847,"date":"2014-03-04T11:45:29","date_gmt":"2014-03-04T18:45:29","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=847"},"modified":"2014-03-04T11:49:19","modified_gmt":"2014-03-04T18:49:19","slug":"integrating-sass-into-net-using-nuget-and-squishit-sass","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/integrating-sass-into-net-using-nuget-and-squishit-sass\/","title":{"rendered":"Integrating SASS into .NET using NuGet and Squishit SASS"},"content":{"rendered":"<p>NuGet is the package manager (extension) for the Microsoft development platform including .NET that makes it easy to install and update third-party libraries and tools in Visual Studio. it makes managing dependencies in your application a lot simpler.<\/p>\n<p><a href=\"http:\/\/docs.nuget.org\/docs\/start-here\/installing-nuget#Installing_NuGet\">http:\/\/docs.nuget.org\/docs\/start-here\/installing-nuget#Installing_NuGet<\/a><br \/>\n<a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/27077b70-9dad-4c64-adcf-c7cf6bc9970c\">http:\/\/visualstudiogallery.msdn.microsoft.com\/27077b70-9dad-4c64-adcf-c7cf6bc9970c<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Nu Get Installation<\/strong><\/h2>\n<ul>\n<li>Go to Visual Studio 2010<strong> Menu &#8211;&gt; Tools<\/strong><\/li>\n<li>Select<strong> Extension Manager<\/strong><\/li>\n<li>Enter NuGet in the search box and click <strong>Online Gallery<\/strong>. Let it Retrieve information\u00e2\u20ac\u00a6<\/li>\n<li>Select the retrieved <strong>NuGet Package Manager<\/strong>, click Download. Let it Download\u00e2\u20ac\u00a6<\/li>\n<li>Click Install on the Visual Studio<strong> Extension Installer NuGet Package Manager.<\/strong> Wait for the installation to complete.<\/li>\n<li>Click Close and &#8216;<strong>Restart Now<\/strong>&#8216;.<\/li>\n<li>Go to Visual Studio 2010<strong> Menu &#8211;&gt; Tools, select Options\u00e2\u20ac\u00a6<\/strong><\/li>\n<li>Click Package <strong>Manager &#8211;&gt; Package Sources<\/strong><\/li>\n<li>Verify the following\n<ul>\n<li>Available package sources &#8211; Check box (checked) and NuGet official package source is set to &#8220;<a href=\"https:\/\/nuget.org\/api\/v2\">https:\/\/nuget.org\/api\/v2<\/a>\/&#8221;<\/li>\n<li>Name is set to &#8220;<strong>NuGet official package source<\/strong>&#8220;<\/li>\n<li>Source is set to &#8220;<a href=\"https:\/\/nuget.org\/api\/v2\/\">https:\/\/nuget.org\/api\/v2\/<\/a>&#8220;<\/li>\n<\/ul>\n<\/li>\n<li>Click OK<\/li>\n<li>Go to Menu &gt; T<strong>ools -&gt; Library Package Manage -&gt; Package Manager Console<\/strong><\/li>\n<li>Select NuGet official package source from the Package source dropdown box in the <strong>Package Manager Console<\/strong><\/li>\n<li>Go to Solution Explorer and note the existing reference<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Package Manager Console<\/strong><\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.35-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-871 alignnone\" alt=\"Screen Shot 2014-03-04 at 11.37.35 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.35-AM-300x107.png\" width=\"300\" height=\"107\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.35-AM-300x107.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.35-AM.png 633w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Tools Menu will Show NuGet Option Now<\/strong><strong><\/strong><\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.42-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-872 alignnone\" alt=\"Screen Shot 2014-03-04 at 11.37.42 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.42-AM-259x300.png\" width=\"259\" height=\"300\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.42-AM-259x300.png 259w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.42-AM.png 355w\" sizes=\"(max-width: 259px) 100vw, 259px\" \/><\/a><\/p>\n<p><strong>Squishit Installation<\/strong><br \/>\nSquishIt lets you easily compress and combine JavaScript and CSS. SquishIt will process SASS, LESS , CoffeeScript, JavaScript, etc and will minify, and combine the output. It works with both ASP.NET WebForms and ASP.NET MVC.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.nuget.org\/packages\/SquishIt\/\">http:\/\/www.nuget.org\/packages\/SquishIt\/<\/a><\/li>\n<li>Nice documentation from the author: <a href=\"http:\/\/www.codethinked.com\/squishit-the-friendly-aspnet-javascript-and-css-squisher\">http:\/\/www.codethinked.com\/squishit-the-friendly-aspnet-javascript-and-css-squisher<\/a><\/li>\n<\/ul>\n<p>To install, run this command from the Package Manager PowerShell Console, you can omit the version number:<\/p>\n<pre><span style=\"color: #008000;\">PM&gt; Install-Package SquishIt <\/span><\/pre>\n<p><strong>Squishit SASS Installation<\/strong><br \/>\nSquishit SASS Adds Sass processing capability to SquishIt. Can compile .sass and .scss files.<\/p>\n<p><a href=\"http:\/\/nugetmusthaves.com\/Package\/SquishIt.Sa\">http:\/\/nugetmusthaves.com\/Package\/SquishIt.Sa<\/a>ss<br \/>\nTo install, run this command from the Package Manager Console, you can omit the version number:<\/p>\n<pre><span style=\"color: #008000;\">PM&gt; Install-Package SquishIt.Sass<\/span><\/pre>\n<h2>Project Integration<\/h2>\n<p>web.config configuration:<\/p>\n<p>You&#8217;ll need to put this in web.config.release:<\/p>\n<pre><span style=\"color: #008000;\">&lt;system.web&gt;<\/span>\r\n<span style=\"color: #008000;\"> &lt;compilation xdt:Transform=\"RemoveAttributes(debug)\"<\/span>\r\n<span style=\"color: #008000;\"> &lt;\/system.web&gt;<\/span><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-873 alignnone\" alt=\"Screen Shot 2014-03-04 at 11.37.50 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.50-AM-300x132.png\" width=\"300\" height=\"132\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.50-AM-300x132.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.50-AM.png 508w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Import the SquishIt namespace at the top of the page:<\/strong><\/p>\n<pre><strong> <span style=\"color: #008000;\">&lt;%@ Import Namespace=\"SquishIt.Framework\" %&gt;<\/span><\/strong><\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.56-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-874\" alt=\"Screen Shot 2014-03-04 at 11.37.56 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.56-AM-300x108.png\" width=\"300\" height=\"108\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.56-AM-300x108.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.37.56-AM.png 462w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Create your Bundle<\/strong><br \/>\nPlease note:<\/p>\n<p>Put <strong>tildes (~)<\/strong> in front of each relative path<br \/>\nWhen you call the &#8220;Render&#8221; method, include the &#8220;_#&#8221; in the output file name. This causes the bundler to render a hash file of the file contents into the filename<br \/>\n<strong>WHITE SPACE MATTERS<\/strong>, be sure to not leave any space between file path and final quotes<\/p>\n<pre><span style=\"color: #008000;\">&lt;%= Bundle.Css()<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/site.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_patterns.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_account.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_base.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_checkout.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_content.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_layout.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/css\/_shop.scss\")<\/span>\r\n<span style=\"color: #008000;\"> .Render(\"~\/_resources\/www\/client\/css\/site_#.css\")<\/span>\r\n<span style=\"color: #008000;\"> %&gt;<\/span><\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.03-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-875\" alt=\"Screen Shot 2014-03-04 at 11.38.03 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.03-AM-300x212.png\" width=\"300\" height=\"212\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.03-AM-300x212.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.03-AM.png 520w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>You can also add yourJavaScript:<\/strong><\/p>\n<pre><span style=\"color: #008000;\">&lt;%= Bundle.JavaScript()<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery-migrate.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery-ui.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.bgiframe.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.columnlist.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.cookie.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.cycle.all.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.flot.pack.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.json.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.microdata.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery.scrollTo.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/schemas.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/_global\/js\/jquery\/jquery-ui.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/_default\/js\/application.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/client\/js\/application.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Add(\"~\/_resources\/www\/_default\/js\/wlPasswordStr.js\")<\/span>\r\n<span style=\"color: #008000;\"> .Render(\"~\/_resources\/www\/client\/js\/combined_#.js\")<\/span>\r\n<span style=\"color: #008000;\"> %&gt;<\/span><\/pre>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.10-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-876\" alt=\"Screen Shot 2014-03-04 at 11.38.10 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.10-AM-300x212.png\" width=\"300\" height=\"212\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.10-AM-300x212.png 300w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.10-AM.png 501w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>You will see output similar to this in your css directory:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.16-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-877\" alt=\"Screen Shot 2014-03-04 at 11.38.16 AM\" src=\"http:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.16-AM-254x300.png\" width=\"254\" height=\"300\" srcset=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.16-AM-254x300.png 254w, https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2014\/03\/Screen-Shot-2014-03-04-at-11.38.16-AM.png 272w\" sizes=\"(max-width: 254px) 100vw, 254px\" \/><\/a><\/p>\n<p><strong>IMPORTANT Final NOTES:<\/strong><\/p>\n<ul>\n<li>You will need to allow write permissions on the deploy directory so that it can write out the minified\/combined.css and .js file.<\/li>\n<li>Make sure you ignore the .debug.css files from svn\/git .svnignore\/.gitnore<\/li>\n<li>Any other minification\/compression is unnecessary<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>NuGet is the package manager (extension) for the Microsoft development platform including .NET that makes it easy to install and update third-party libraries and tools in Visual Studio. it makes managing dependencies in your application a lot simpler. http:\/\/docs.nuget.org\/docs\/start-here\/installing-nuget#Installing_NuGet http:\/\/visualstudiogallery.msdn.microsoft.com\/27077b70-9dad-4c64-adcf-c7cf6bc9970c &nbsp; Nu Get Installation Go to Visual Studio 2010 Menu &#8211;&gt; Tools Select Extension Manager [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[188,29,187,189],"tags":[192,268,194,193,104,190,191],"_links":{"self":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/847"}],"collection":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/comments?post=847"}],"version-history":[{"count":10,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/847\/revisions"}],"predecessor-version":[{"id":884,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/847\/revisions\/884"}],"wp:attachment":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/categories?post=847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/tags?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}