I am searching for a solution on how to implement SASS into an asp.net project. I have searched a lot but have found no example on the web. As far as I know some kind of JavaScript file will be needed in project in order for it to work.
Can anybody please share a sample aspx page with one or two textboxes with SASS applied to it?
Sass is written in Ruby, not JavaScript. There are a few JS compilers, but none of them are official, and none of them should ever be considered for use outside of development.
Outside of Ruby on Rails, there is no integration. You put your source files where appropriate and use the Sass compiler to compile it and place the CSS file into your public directory. Whether you use the command line or an application like Scout is up to you.
I personally use the command line to continuously watch my Sass files as I am working on them, and it only takes a second or 2 to compile (just slightly longer than it takes to alt-tab so I can refresh and see how it looks).
Related
(Related question: what's the difference between rv.js and r.js?)
I've got a series of RactiveJS-based components, each in their own module. I use the rv.js loader (linked above) mentioned on the Ractive site. I love it, but what I want to do is use that (or something similar) to build to one JS file that will work even in non-AMD/RequireJS apps. I've looked at Almond, but it seems to want to use r.js (rather than rv.js), and I'm not sure what the difference is or what changes I'd need to make.
Bonus points: is there a way to run all of this in Gulp? I'm one of those people who cringes when he has to use the command line, so please talk slowly and forgive my ignorance:)
A bit late to answer, apologies for that.
rv.js is a RequireJS plugin that loads ractive components as if they are javascript modules
r.js is the RequireJS optimizer, used to bundle together all files and minify (exactly your use-case)
RequireJS is quite large in size, and you don't want it bundled with your application js during a build.
Enter almond.js. It mimics the module resolution of RequireJS, but doesn't have the code to handle actual loading of the files over the network. The result is a smaller file size.
So, your workflow would be:
You use RequireJS during development
Use rv.js, as you are already, to load ractive components
When it's time to build, you use r.js to build
And ensure almond.js replaces RequireJS in the final built js file
Now, I use grunt, and there is a plugin for that: grunt-contrib-requirejs
For gulp, I suggest gulp-requirejs-optimize
It has options to replace requirejs with almond during the build process if you look at the documentation on that page.
Hope that helps.
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
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.
By default SASS looks at the filename and determines whether to make a css file out of it. I'm wondering if there is a way to prevent this from happening.
We're building a large website and lots of front-end developers are editing the css, but we only have one dev server. Sure some things you can see happen locally, but often you can only see the real rendered way on the server.
So, when I push my compiled css file to the server, my co-workers' css gets clobbered until s/he commits and I do an svn:update, etc, etc.
However, if we were working in different SASS file, and those css files were getting created, I would only have to push up, say, the forms.css file instead of the whole thing.
Then for Production, we'd put it back to the way SASS normally works.
The only other way I can figure to do this is to do a mass rename of files, which seem very messy.
Thanks in advance.
The entire point of partials is that they don't get compiled into files. If you want a sass file to be turned into a css file, remove the underscore.
Your real problem seems the be that you're putting compiled CSS in your version control. Don't do that. Only commit Sass, and compile it into CSS server-side with a post-receive hook or something.
I'm using lesscss, the 'framework/compiler' for css. My IDE, dreamweaver, does not recognize .less as CSS. So no niceties such as error checking or code completion there. Is there anything I can do about that?
Dreamweaver can be configured to recognize "new" filetypes and treat them as editable under preferences. You can also edit some config files to help DreamWeaver figure out how to treat the files so it does code highlighting, etc., though in my experience, it does not always work as you would expect. On the other hand, can lesscss be configured to output .css files?
Here's an Adobe article on getting Dreamweaver to add new file types.
http://kb2.adobe.com/cps/164/tn_16410.html
less syntax highlighter extention
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#
You can force DW to "recognize the files" although not parsing as far as I know. This might be of help : http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/ that might be of help
Try giving the extension: less.css, to your css file.
Example: styles.less.css.
This worked for me, but I still need a base stylesheet, such as: styles.css.
Also,
You can compile .less files to .css directly from within Dreamweaver using a free (Donation-ware) plugin:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522
Dreamweaver has a very hard time with LESS, in my experience. It doesn't properly handle nesting and will color those as though they are syntax errors. However, it is mostly workable since the auto-complete does at least still work, and the overall coloring is okay on everything except nested items. (at least for me)
Also the extensions that are referenced above do not work on mac.
If you are having trouble getting DW to be able to open and color code LESS at all, try this--
1) Change some DW config files:
For Mac users, there are TWO configuration folders (at least for DW5.5). Two sets of identical files, FOUR in total files, have to be changed:
~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml
~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Extensions.txt
and -
Adobe Dreamweaver CS5.5/Configuration/DocumentTypes/MMDocumentTypes.xml
Adobe Dreamweaver CS5.5/Configuration/Extensions.txt
And this technote tells you what exactly to change in those files:
http://helpx.adobe.com/dreamweaver/kb/change-add-recognized-file-extensions.html
Install a LESS Compiler
and for those on mac, this little app works GREAT. All it does is watch your less files and automatically save them to css on save.
http://incident57.com/less/
I hope that is helpful to someone!
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#
This actually does all that and more, as CSS and less have a little different syntax specially when it comes to nesting rules inside one another.