Is there a convenient way to have SASS automatically prepend a comment to the beginning of each CSS output file? Specifically, when using Compasss I'd like to stick a brief warning telling designers not to edit the CSS directly and to point them to instructions on getting started with Compass. I use an output style of :compressed, which strips out comments that are in the input SCSS/SASS file.
If there isn't a convenient way to do this then I'll submit an issue/patch. I was thinking of adding an option named :output_prefix that takes a String that will be prepended to all output CSS files.
From the SASS reference on comments:
When the first letter of a comment is !, the comment will be interpolated and always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.
So you could start your SASS file with something like this:
/*!
* WARNING: Don't edit this file by hand! Instead, you should be using Compass.
* (More information at http://compass-style.org/)
*/
compressed strips out all comments. I suggest you put this in a property:
warning { do-not: "edit this file"; }
Regarding the proposed patch, I do not think this use case is compelling enough to warrant such a feature.
Known bug in Sass. Fixed in master but not yet released:
https://github.com/nex3/sass/issues/784
Related
Atom recently stopped highlighting any embedded ruby inside my .html.erb files, so now they look like this:
However, if I change the grammar being used for the editor file to HTML (Rails) instead of ERB, everything goes back to being highlighted the way it should be:
But every time I open an ERB page it defaults to using the ERB grammar from the language-ruby package, which doesn't highlight any of the ERB, and I don't want to have to manually change the grammar each time I open an ERB file.
Is there any way to change which grammar Atom uses by default for a given file type? If not, are there any other workarounds to fix this and get ERB to start rendering embedded ruby in color again?
Before we get down to the actual question, how to change the default highlighting of a specific syntax, please check that this isn't related to the new treesitter parser.
If you really want to change the default syntax, you can add the following to your Atom configuration (config.cson):
"*":
core:
customFileTypes:
"text.html.ruby": [
"*.erb"
]
Make sure not to overwrite your existing configuration and nest the customFileTypes key correctly, since CSON is an indentation-sensitive format.
I am using Gulp CSSO to tidy up my CSS in WordPress but it deletes my comments, more specifically it deletes the theme meta data. Is there any way to get around this? Perhaps insert the theme meta data after I have run CSSO?
The csso documentation page says that it will remove the comments,because they do not affect rendering, but:
If you want to save the comment, CSSO can do it with only one first comment in case it starts with !.
So I don't think you can preserve a comment with the wordpress metadata format.
Why don't you apply gulp-csso first and then add the metadata as a prefix using gulp-header?
Actually, if you use the ! at the beginning of a single comment declaration such as:
/*!
...Your Theme declaration here...
*/
WordPress will properly detect the declaration, and CSSO will preserve the comment.
I have an issue with sass compilation.
When I have a project with a partial _partial.scss and have it imported in multiple partial files (because it contains color variables) it will end up in the compiled css multiple times!
This is ugly because the same rule will 'overrule' itself multiple times which makes debugging info (chromium dev tools / firebug) rather unreadable.
I presume there is a solution for all this. I just can't find anything on the issue, anywhere.
The solution is to either not include the same file multiple times or don't have any code that directly outputs CSS in the file you're planning on including more than once. If your variables were in a file by themselves, they could be safely included anywhere you'd like without selector duplication.
Maybe this #mixin helps you: https://github.com/wilsonpage/sass-import-once.
Have a look at the example and note how the reset is only included once in the final CSS.
It seems that just for this, sass (and thus, scss) now have #use instead of #import. From the #use documentation (emphasis is mine):
The simplest #use rule is written #use "", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.
Sass also discourages further use of #import:
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
Any projects having this problem could try running the module migrator tool and check if the problem is resolved.
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!
Is there any way in LESS to render the original LESS File + Line Number in the rendered CSS?
Just as Middleman does with SASS... (I'm not sure if it is a SASS or a Middleman feature)
I'm not familiar with Middleman, but the GitHub page for FireLess (inspired by FireSass, I guess) suggests that it would show the Less line number in Firebug, rather than the compiled CSS line number.
I have no idea why the selected answer was chosen to be correct - it relates to a different build of LESS built for the .NET framework, not simply LESS itself.
Anyhow, yes, LESS does support this. It's not particularly well documented, but if you compile using the --line-numbers=[comments|mediaquery|all] flag, it will compile your CSS with the debug info spec SASS established.
If you're using Grunt, and grunt-contrib-less, you can use the dropLineNumbers option (really strange choice of name, imho). I typically set mine to all.
There is now an option in dotless to output this information as per sass does. the flag is "debug". It will be included in the next release - https://github.com/dotless/dotless/issues/186