I'm quite new to Sass so I don't quite know everything about it yet.
My idea is that I create a mixin like so;
#mixin crossBrowser($css) {
-webkit-+$css;
-moz-+$css;
-o-+$css;
$css;
}
and then use it by #include crossBrowser("transition: 0.2s ease-out");.
I think you can see where I'm trying to go here, is it possible? Or do I have to create a new mixin for every CSS3 property I want to include?
Solved it like this;
#mixin crossBrowser($property, $css) {
-webkit-#{$property} : $css;
-moz-#{$property} : $css;
-o-#{$property} : $css;
#{$property} : $css;
}
Then calling it by #include crossBrowser(transition, 0.2s ease-out);
Early 2017 edit
You should now write your CSS without vendor prefixes and then use a tool like https://autoprefixer.github.io to add prefixes.
Related
I am using a mixin to convert my Angular app from LTR to RTL accordingly.
#mixin rtl($property, $ltr-value, $rtl-value) {
[dir='ltr'] & {
#{$property}: $ltr-value;
}
[dir='rtl'] & {
#{$property}: $rtl-value;
}
}
#mixin rtl-prop($ltr-property, $rtl-property, $value) {
[dir='ltr'] & {
#{$ltr-property}: $value;
}
[dir='rtl'] & {
#{$rtl-property}: $value;
}
}
When I use #include, for some reason it doesn't work. (html tag is defined properly)
#include rtl(border-radius, 0 10px 80px 0, 0 80px 10px 0);
<html lang="he" dir="rtl">
Any ideas why?
For those who will encounter this issue at the future, the problem was component's encapsulation - it was set to Emulated which probably interfered with the classes names.
Set it to None instead.
There are a couple of things you can do to solve this, but that are not optimal:
First and for all you are checking if the component itself has dir set, that is why it isn't working. Because the direction is set on the tag.
You can try to use :host-context, because than it will take a look at the html attribute and not your component. Like this:
#mixin rtl($property, $ltr-value, $rtl-value) {
:host-context([dir='ltr']) & {
#{$property}: $ltr-value;
}
:host-context([dir='rtl']) & {
#{$property}: $rtl-value;
}
}
But always check on canIUse to see if it has enough coverage. For this moment it is around 75% so I would say it is too low, certainly if you have a lot of mobile iOS users.
Another alternative to :host-context() is :dir(), but this has on the moment of writing only 3% coverage, so I would not bother using that either.
The currently approved answer (the one that suggests to set encapsulation to None) is not recommended since it will make all the mark-up for that component global and could cause some unexpected issues. Certainly because direction is maybe something you'd want to use in almost all of your components.
I think the best solution right now is to use logical properties from css. You use 'start' instead of 'left' for example. You can google it and find a lot of info to use it. (for example on developer mozilla site).
For your example you would have to use:
.yourClass {
border-start-start-radius: 0;
border-start-end-radius: 10px;
border-end-start-radius: 80px;
border-end-end-radius: 0;
}
And this would make it look the way you want it on any text-direction without the use of any mixins.
Is it posible to invoke a mixin doing something like this?
#mixin font-mixin ($mixinName, $color) {
#include #{$mixinName};
color: $color;
}
I mean I tried that, it does not work but,is there any way to do something like this? I want to dynamically call a mixin providing the name of the mixin I need to invoke as parameter of another mixin since it will help reducing a lot of code in my project
You can't do this directly, but you can work around it. You could do kind of a switch statement:
#mixin breakpoint($mixin) {
#if $mixin == mixin1 {
#include mixin1;
}
#if $mixin == mixin2 {
#include mixin2;
}
}
I wanted to make a mixin for column spanning containers in SASS using the Susy framework where I could just use an include in a div and use the span-columns such as this:
#mixin container($columns, $ofColumns) {
#include span-columns($columns,$ofColumns);
}
Then in CSS use it like this:
#foo {
#include container(4,12);
}
But I get the error in the output css 'Mixin container is missing argument $columns.' What am I doing wrong here?
I recently updated to Compass version 1.0.16 and am setting up basic use of the new animation stuff. For some reason, when I try to set the default values for different animation settings, they don't take effect, requiring that I hard-code the values throughout my app.
Specifically:
$default-animation-duration: 0.5s;
#import "compass/css3";
#include keyframes(slideOutLeft) {
0% {
#include transform(translateX(0%));
}
100% {
#include transform(translateX(-100%));
}
}
#id {
#include animation(slideOutLeft); // Doesn't work
}
#id2 {
#include animation(slideOutLeft 0.5s); // Does work.
}
Any thoughts?
Official word from the Compass folks can be found here: https://github.com/chriseppstein/compass/issues/1556
Yeah, currently the defaults are only used in the long-form properties
e.g. animation-duration(), or in when no arguments other are passed
e.g. animation() (where all the defaults are used). Not sure that's
the best way, but the defaults are pretty invasive otherwise.
I'm using bootstrap for a simple test webapp. I want a button to start off with the standard style (btn), and switch to the btn-danger style only on hover. I know this can be done with jquery or straight javascript, but I'm really not interested in that approach.
Can I do this in straight CSS without copying any of the bootstrap style code into my own CSS? Ideally, I'd like to be able to do something like this:
.mybutton {
}
.mybutton:hover {
style: btn-danger;
}
http://jsfiddle.net/wPDCm/5/
The syntax for using LESS (the CSS preprocessor that Twitter Bootstrap uses) should be this:
.mybutton:hover {
#include .btn-danger;
}
There is no way to do this with CSS alone.
This can't be done without a CSS pre-processor.
Using SASS you could do something like:
#mixin danger-will-robinson {
background-color: red;
}
.btn-danger {
#include danger-will-robinson;
}
.mybutton:hover {
#include danger-will-robinson;
}
Other CSS preprocessors have similar features.