Is there any program similar to app.less for linux? I want to keep comments that I have in the less files transferred the compiled css files. If not, is there a command line that I could use using the lessc command in linux?
The problem is that whenever I run the lessc command on my less files, I get a minified version css that throws away all my comments. I want the comments to help me debug as well as it being non-minified.
Lessc compilers default is not to minify, but you can always check the commands help (lessc -h).
Also, in less you can use two types of comments the normal css style comments:
/* This is a CSS comment */
And these will be "printed" on the output css file.
The other style of comment is like single line comments in many languages:
// This is a LessCSS comment
And these do not get "printed" on the output css file.
Hope this helps!
Related
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.
My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic
I am collaborating with Senior Developers and quite embarrassed to ask why the code in all the .css files is on one line?! At first I thought it was minified but when I went to unminify it it said Unrecognized format. How do I work with these files? As far as I can see it's ONLY the .css files.
It can be the case they are using a CSS compiler (like SASS or LESS),
in that case the files won't have .css extension but .SASS, .SCSS,
.LESS which will be compiled into a single CSS. - Teknotica
Tecknotica's speculation was correct. So to be more specific this is how you would work with these files given a similar situation. You don't actually write CSS directly into the CSS file but instead add your CSS to a SCSS file that then gets compiled into the CSS file using a tool such as Grunt. The CSS is all on one line in the CSS file (the one you don't directly write to) apparently because it reduces to the number of requests to get the bits. Thanks for everyone's help & advice.
Ew, that's annoying. Usually when I come across that, I just do a search and replace for " ; " and add a break beneath it to help organize everything. Hope that helps!
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)
How do other Wordpress theme developers incorporate Sass into their theme development while taking advantage of its compressed output style? Sass compressed removes ALL comments, so I currently have an empty style.css with my theme declaration and an #import calling the minified css from compass, but this hardly seems like the best solution.
Has anybody found a way around this? What would be the best solution if not?
http://codex.wordpress.org/Theme_Development#Theme_Stylesheet
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id40
SUPER SHORT VERSION: Use /*! loud comments */ and compile the SCSS just before packaging and distributing.
Two part answer, "old part" first:
I used Sass/SCSS when developing my "Orin" theme: https://github.com/founddrama/orin
Part One:
In my src/scss directory, I keep all of my _include.scss files and the style.scss file that has all of the #import statements.
During development, I just run the usual sass --watch (although it's an extra step to remember to save the style.scss file).
Once your SCSS source is looking good and committed to version control, you can simply build the style.scss into style.css and check that into version control for the Theme that gets distributed.
In my case, "Orin" is just for me, so I perform the build when I update it on the blog server, but the SCSS compilation can just as easily be done prior to packaging/distribution. The build script I'm using is here (in that Github repo); the gist of it being:
touch to create the style.css output file;
apply the license text;
compile the SCSS and append it to style.css.
Part Two:
More recent versions of Sass include support for /*! loud comments */; meaning that I need to get off my lazy butt and update to:
Include the license text and theme description right there in style.scss using the loud comments;
update the build/deploy script to simply compile the SCSS.
Well, i would suggest you to use Compass .
The comment should look like this:
/*! A loud SASS comment */