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.
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.
Using Foundation 5 and writing semantic grid / column markup through SCSS. To make things simple I divided each WordPress page with div[role="page/index/404/single"] and I'm appending the #include grid-row() and #include grid-column() to the corresponding semantic HTML markup.
I've devised a simple SCSS array to handle my variables in one go but I am having parsing issues.
$columns: ( 'article': 9, 'aside': 3, 'full-width': 12, 'none': 0 );
// index.php
div[role="index"] {
// row
main {
#include grid-row();
// column
article {
#include grid-column(columns('article'));
}
// sidebar
aside {
#include grid-column(columns('aside'));
}
}
}
I am receiving this error, which I fully understand, but how can I make this work??? I'm out of ideas.
column("article")/12 is not a unitless number for "percentage"
If this issue cannot be solved let me know. Would be a pain to manually define integers throughout my code for every site but I'll deal with it if I have to.
You need to use the following syntax to access your Sass array (you are technically using a Sass map).
#include grid-column(#{map-get($columns, 'article')});
#include grid-column(#{map-get($columns, 'aside')});
More info: http://www.sitepoint.com/using-sass-maps/
I'm using Bourbon's Neat library for my grid system.
I have some code like this:
section {
#include outer-container;
aside { #include span-columns(3); }
article { #include span-columns(9); }
}
I want to increase the width of the aside tag by, let's say, 50px on hover. However,this will cause the article to be pushed down to the next line.
Is there a way to scale the width of one column and proportionally resize the other column?
I know this can be done with javascript but I was wondering if there is a way to do this with the Neat grid-system .
Thanks!
EDIT
Here is the solution that worked for me:
section {
#include outer-container;
aside {
#include span-columns(3);
&:hover {
#include span-columns(2);
& + article {
#include span-columns(11);
}
}
}
article { #include span-columns(9); }
}
I'm using the css sibling selector + to select the article element when the aside is being hovered over.
There’s no built-in functionality for this, but have you tried overriding width on :hover? That is to say, add x length to the width of Column A and take the same amount away from Column B. CSS calc() could help here.
Neat’s docs give insight into the exact function of span-columns and its output: http://thoughtbot.github.io/neat-docs/latest/#span-columns
That being said, this sounds like a great use case for flexbox, if your needs allow for that.
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.
I am trying to create a sprite mixin, based on the compass sprite mixins for SCSS.
The trouble is that the image is loading multiple times. One for each unique call of the image (so each new class name that refers to the sprite)
Here is the SCSS I am using. First we call the compass mixins:
$sprite-default-size:29px;
#import "compass/utilities/sprites/sprite-img";
Then I create my own mixin, designed to accept a column of images, with hover states to the right of each image:
$icons: "/assets/icons/socialMediaSprite.png";
#mixin verticalHoverSprite($row){
#include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
&:hover{
#include sprite-img($icons,2, $row);
}
}
The I use the apply the mixins to each required class:
.socialMediaLink{
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}
Here is the HTML I am attaching the images to:
<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>
Screen shot from Chrome network panel, which shows the image loading three times:
Check that caching is not disabled in your browser (it can be disabled from about v17).
Another idea is you include your image only once:
background: url(yourimage.png) no-repeat;
And then only change it's position with CSS without including the image again:
background-position: 0px 100px;
I guess you are trying to do this way I would just suggest not to include the image for every class, change only the position.
RynoRn was correct, but I thought his answer needed expanding to be specific to Compass SCSS, and not just CSS.
To fix it using compass and scss, I changed the code from the question to the following:
The mixin now has no reference to the image, just changes the position:
#mixin verticalHoverSprite($row){
#include sprite-position(1, $row);
&:hover{
#include sprite-position(2, $row);
}
}
and we add the background image to the socialMediaLink class:
.socialMediaLink{
#include sprite-background("/assets/icons/socialMediaSprite.png");
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}