I defined a placeholder selector in a .sass file as:
.bold,
%bold
font-weight: bold
font-weight: 500
Then I used extend:
.pane-share-of-day
#extend %bold
When the css is generated, I get this error message:
Syntax error: Invalid CSS after ".bold,": expected selector, was "%bold"
I am using Sass version 3.2.5.
Any help please.
Adding these declarations into their own file worked just fine for me. Perhaps you can repost with more of what's going around it?
More importantly, though, is the redundancy of this declaration. The % placeholder selector was introduced so you could have a base class that never actually got output. Here you're defining such a class as being identical to another explicitly output class. In other words, if you already need .bold, you don't actually need to add %bold.
Try this:
.bold, bold
font-weight: bold
font-weight: 500
.bold, %bold
font-weight: bold
font-weight: 500
.pane-share-of-day
#extend %bold
You can't put two selectors for the same block on different lines in the .sass syntax.
Try this:
.bold, %bold
font-weight: bold
font-weight: 500
There should be no carriage return / no new line between listed selectors (classes, id's, placeholders)
BTW. you don't need to use placeholder selector to use #extend. You could just do:
#extend .bold
Related
I recently decided to use RTLCSS to make RTL versions of my stylesheetes.
Now i'm trying to use Declaration-level directives to tell RTLCSS what to do, but SASS compiles my comments to next line.
For example, font-size: 14px/*rtl:15px*/; Compiles to
font-size: 14px;
/*rtl:15px*/
And that stops RTLCSS from procssing it properly. Is there a way around this? can i configure sass to just compile the value as-is, preserving comment position?
P.S. I use grunt-sass(node-sass) to process my scss files.
Use SASS interpolation syntax, passing your comment as string
body{ font-size: 14px #{"/*rtl:15px*/"}; }
will produce
body { font-size: 14px /*rtl:15px*/; }
Both standard /rtl:.../ and special/important /!rtl:.../ notations are supported.
You can use /!rtl: to escape from sass compiler
Documentation
Suppose I have a file "_file1.scss" and "_file2.scss". Both of them have a mixin with the same name "my-mixin". Is it possible in "main.scss" file to import "_file1.scss" and "_file2.scss" and indicate from which file I want to use the mixin?
Something like "file1/my-mixin".
The problem that I have is I'm using SUSY and "compass/css3" and both have a "columns" mixin.
https://sass-lang.com/documentation/at-rules/use
You can use the last part of the file path that you're importing as a namespace.
#use '_file1';
#use '_file2';
#include _file1.my-mixin;
or, you can add an alias yourself:
#use '_file1' as one;
#use '_file2' as two;
#include one.my-mixin;
I'm creating a font module which contains all my webfonts and some Sass mixins to write out the #font-face declarations. The main mixin will be something like includeFont(name, weight, style).
I'll keep a record in some Sass variable(s) of which fonts at which weights and styles are actually available, and through being clever about this I think I can write the mixin so that I can detect if I try and request a font that doesn't exist.
But when I detect that situation, how can I throw an error?
As of Sass 3.4.0, there's an #error directive you can use to cause a fatal error:
$stuff: fubar;
#if ($stuff == fubar) {
#error "stuff is fubar";
}
If you try to compile this at the shell, you'll see the following:
$ sass test.scss
Error: stuff is fubar
on line 3 of test.scss
Use --trace for backtrace.
There are also related #warn and #debug directives which have been in the language for longer, in case those are more useful to you. Example:
#debug "stuff is happening";
#warn "stuff is happening that probably shouldn't be happening";
/*
Note that these directives do not terminate execution, and this block
will therefore still be output.
*/
* {
color: pink;
}
When compiled:
$ sass test2.scss
test2.scss:1 DEBUG: stuff is happening
WARNING: stuff is happening that probably shouldn't be happening
on line 2 of test2.scss
/*
Note that these directives do not terminate execution, and this block
will therefore still be output.
*/
* {
color: pink; }
Is there a way to make sass ignore multiline comments when generating the css file:
// these comments are ignored
These are not (only ignored in compressed mode):
/*
* multiline comments
*
*/
I found this ticket on Github where the author says:
If you really want, you can monkeypatch Sass to silence /* */ comments as well.
But I don't know what he means by monkeypatch sass, so how can I do this ?
Yay! I've learned monkey patching SASS while answering this question:
Sass mixin recursion; #include loop
And now i can help you too!
1) Install Compass
For this solution to work, you'll need Compass. Install it with:
gem install compass
2) Configure Compass
Create a compass.rb file in your project's root and define directories where you keep your SASS and CSS code, e. g.:
css_dir = "stylesheets"
sass_dir = "sass"
3) Create a monkey patch
Create a file called remove-all-comments-monkey-patch.rb in your project's root:
class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base
# Removes all comments completely
def visit_comment(node)
return []
end
end
4) Require the monkey patch from the config.rb
In the config.rb, add:
# Removing all comments by applying a monkey patch to SASS compiler
require "./remove-all-comments-monkey-patch"
5) Compile your project with Compass
Use compass compile to compile SASS into CSS. You can also use compass watch to make the Compass command line tool constantly monitor your code for changes and recompile parts that you modify.
Considerations
This will not remove comments with line numbers generated by SASS. To disable them comment out the line_comments = true line in config.rb or set it to false.
To re-enable multiline comments, just comment out the line that requires the monkey patch and do compass clean.
Don't use it! Use single-line comments with Ctrl+/.
Though this solution is portable and will work for everybody without hacking SASS code manually, you should really consider using an IDE that allows commenting out whole paragraphs with single-line comments using a single keystroke. For me it's Ctrl+/.
Here, i've filmed a short video for you to show that using line comments is actually quicker and more effective than using multiline comments: http://www.youtube.com/watch?feature=player_detailpage&v=DTyMAPZrwyc
Line comments also let you comment out comments without breaking the code.
Consider you have the following code:
foo
/* Bla bla */
bar
baz
And you need to comment it all out. If you wrap it all with /* */...
/*foo
/* Bla bla */
bar
baz*/
...then you broke the code! Now you have a comment that starts with /*foo and ends with bla */, and also a syntax error at baz*/.
Instead, just select the whole code and hit Ctrl+/ (provided that use some IDE or programmer's notepad), it will all be commented out immediately:
//foo
//
///* Bla bla */
//bar
//
//baz
And of course it can later be uncommented with the same hotkey.
You could wrap the comment in an unused #mixin - not an ideal fix but it works.
#mixin ignore {
/*
COMMENT
*/
}
many websites join the same propery of css rule in their css file, I want to use compass sass to complete this job, I found that extend method can do it, but it must extend base an selector, any way not to output the base css selector?,for example.
.a{color:red;font-size:10px;}
.b{color:red:font-weight:bold;}
they has same "color:red".if I want to ouput
.a,.b{color:red;}
I must extend .c
.c{color:red;}
but actually I don't want .c display at my css file. how to do it?
In Sass 3.2, they added a feature that does just that: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders
Basically, use a % instead of a . to make a silent class that's only for extending.
%c {
color: green;
}
.a, .b {
#extend %c;
}