I tried to make simple web solution - a hello world solution - with the susy responsive toolkit. The instructions on the susy docs say to pull the sass folder in, but the sass doesn't seem to compile.
It is possible to get susy 2.2 to work in VS w/ web essentials?
I'm using VS2013 update 3 with web essentials.
I'd really appreciate it if somebody could upload a 'hello world' working solution. And so would this guy.
Additional Info for non-VS users:
Web essentials usually 'compiles' sass into css files.
Web essentials also has a menu option to compile the sass.
Once I uncomment the import statement, the sass no longer compiles or refreshes. No error message is shown. I'm pretty sure this is a web essentials plugin or web essentials dependancy problem.
At this time, VS web exetensions probably uses a sass compiler does does not meet the susy2.1's sass 3.3+ requirement.
The sass folder in the susy2.1 project compiles okay when compiled with koala - which supports sass version 3.3.7 as of writing.
As of now there is an issue with libSass and #import not working as expected. The author notes it here and links to libSass issues here
Related
I use Visual Studio 2019 to develop a web ASP.NET MVC application.
When I debug, or execute my web application, with the browser debugger F12, I can read in the sources menu (view photo) that my pages are based on sccs style sheets located in a scss directory.
How to generated this directory? Why most of the css (coming from bootstrap) are translated into sass files ? Is it due to the package Web.Optimization which generate bundles? I don't understand the process and its utility.
Can someone answer my questions ?
For information, I installed bootstrap 4.5.3 with NuGet, and I noticed that several files where created in"Content" directory in the project explorer (bootstrap-grid.css.map, bootstrap-reboot.css.map, etc). So I think bootstrap is maybe the reason of scss files like _reboot.scss).
Scss files are translated (by engine Sass) into css. Only that files browser can understand.
I think files from picture are just in public folder.
(*.map, *.min.css, etc) files are optional.
In Bootstrap documentation is written:
compiled and minified CSS and JS (bootstrap.min.). CSS source maps (bootstrap..map) are available for use with certain browsers' developer tools
https://getbootstrap.com/docs/3.4/getting-started/#whats-included-precompiled
The minimized files are size optimized and maps are helpful for developer tools use.
Thanks Apan.
Finally, I can keep only the 2 files bootstrap.css and the js, because MVC minimizes them with bundling process.
i would like to use Foundation 6 in my django project but it seems hard to do.
To work with sass, I have to use the cli and create a foundation project and it's not what I want because I already have a django project.
I tried to copy all files from scss folder into django but I always have errors when sublim text compile files to css.
Do someone has an experience with the same case ?
I am in the process of creating a website using Mono. It will be a standard webforms app (not MVC) but I'd like to use SASS for the CSS (specifically scss). However, I can't seem to get SASS to work with a mono webforms application. I tried using SassAndCoffee from NuGet and followed the standard setup instructions which said I should just reference my scss files as css files (e.g. application.scss would be referenced as application.css in a link attribute in the head. see http://blog.paulbetts.org/index.php/category/programming/mono-net/). That didn't work (or at least I'm assuming it didn't since my page rendered with no CSS and this scss has been tested on a rails platform so I know it works).
Next I tried using SquishIt which has an NSass wrapper. I followed the instructions here: http://www.cassandraking.net/wordpressapp/integrating-sass-into-net-using-nuget-and-squishit-sass/. This throw a 500 error because asp.net was unable to find NSass.Wrapper.proxy.dll. A quick google search led me to discover that because I was targeting "Any CPU", it couldn't choose between "NSass.Wrapper.x86" and NSass.Wrapper.x64". Sadly, however, MonoDevelop doesn't seem to want to give me the option to target x86 or x64 (the only option I have is to target "Any CPU").
I've kind of run out of options. Since I'm not using MVC, am I able to using SASS with a standard WebForms project using the Mono platform? Has anyone done this and can provide me some pointers?
In case anyone else runs into this, I never really found a viable solution in terms of a plugin. Honestly, Xamarin studio doesn't even seem to have a built in SASS editor as it isn't able to colour code anything in a SASS file. I ended up just using the sass command in terminal to convert a sass file to css. At a terminal prompt in the folder where your sass is kept type:
$ sass mysassfilename.sass:somecssfilename.css
To edit the sass file, I downloaded Microsoft's Visual Studio Code which has a version for the mac. It works rather well.
I was wondering if someone could help me with the following problem:
I have a web project in visual studio and I am using SASS for styling. I use Grunt to execute SASS and compile the .scss files to .css files. But for this to work Ruby must be installed on my system together with a SASS module. When someone else does a checkout of my project they cannot run SASS if they don't have ruby intalled on their system with this SASS module.
Is it possible to add a ruby installation (executable) with the SASS module to my project so that when someone else does a checkout of my project they can run SASS without having ruby installed on their system.
Thx in advance for any help, also this is my first question on stackoverflow ever, tips are welcome.
(Things I have run into but will probably not work are: Less, node-sas)
I don't think you'll be able to easily add a Ruby installation executable with your project. And I don't think you should.
Have a look on libSass, which was created and maintained by Sass authors. This library allow non-Ruby users to compile Sass. You've got plenty wrappers for various languages, like .NET, Java, JS, PHP, Python...
I think this could be a workaround that fit your needs.
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/