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;
}
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; }
I have a method that takes a scss file f and compiles it:
def compile f
options = ...
Sass::Engine.new(File.read(f), options).render
end
where options is a hash that specifies several parameters. All the scss files that I want to compile with this command #import-s a fixed file, say "_foo.scss". So at the moment, I have the line
#import "foo";
at the top of every scss file. I want to let the method above implicitly/automatically do the equivalent to #import "foo"; so that I do not have to write that at the top of every scss file. How can I do that? Is there something I can do with options, or some hack with sass internals?
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