I've installed Foundation 6 for Sites using SASS and I'm compiling with Gulp. I'm trying to use the Motion-UI library for some animation effects, and I've got a lot of it working.
Working Demo of Pre-built Animations:
http://jsfiddle.net/4a9kux0r/7/
The problem I'm having is trying to use the SASS mixins available for the Motion-UI library to create custom effects.
I have the following in my Gulpfile in order to process it...
var PATHS = {
...
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
...
};
So, with this in mind, the rest of my .scss files I'm using are set up into partials:
and my app.scss file...
#import 'settings';
#import 'foundation';
#import 'motion-ui';
...
#include motion-ui-transitions;
#include motion-ui-animations;
#import 'partials/base';
#import 'partials/typography';
#import 'partials/utilities';
#import 'partials/animations';
So, all said and done, an animation that is pre-built is working fine, such as:
MotionUI.animateOut($('#foo'), 'fade-in');
But if I try to make a custom mixin for it to combine effects, like this SASS I've placed into my _animations.scss partial
.combineAnimate {
#include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}
Something like this isn't working...
MotionUI.animateOut($('#foo'), 'combineAnimate');
It's probably just something in where I'm defining the custom animation, or not importing something properly, etc. This is my first time using gulp and foundation 6 and I'm still trying to piece it all together, so any help is sincerely appreciated!
Docs: https://github.com/zurb/motion-ui/blob/master/docs/animations.md
It is only compiling into this css code:
.combineAnimate {
-webkit-animation-name: custom-1;
animation-name: custom-1; }
#-webkit-keyframes custom-1 {
0% {
opacity: 0;
-webkit-transform: rotate(-1turn) translateY(120%);
transform: rotate(-1turn) translateY(120%); }
100% {
opacity: 1;
-webkit-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0); } }
#keyframes custom-1 {
0% {
opacity: 0;
-webkit-transform: rotate(-1turn) translateY(120%);
transform: rotate(-1turn) translateY(120%); }
100% {
opacity: 1;
-webkit-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0); } }
As stated in the official documentation for Motion-UI plugin:
"Note that in order to play properly, the element must have at least the property animation-duration applied to it as well."
Being new to CSS3 Animations, I had ignored this very bold stated prerequisite. My SASS was compiling just fine.
#include motion-ui-transitions;
.combineAnimate {
#include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
animate-duration: 2s;
}
Resolves the issue.
Related
I I've got the following next.config.js setup:
const path = require('path')
const withSass = require('#zeit/next-sass');
module.exports = withSass({
cssModules: true
})
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')]
},
}
and I'm importing a global scss file using:
import '../styles/main.scss';
In this main.scss file, I'm using some mixins like:
#mixin wrapper() {
...
#media screen and ($max-hd) {
width: calc(100% - 6em);
}
#media screen and ($max-md) {
width: calc(100% - 2em);
}
}
where both max-hd and max-md are variables from another scss file:
$max-md: 'max-width: (#{$break-md - 1px})';
$max-hd: 'max-width: (#{$break-hd - 1px})';
If I use the variable ${max-hd} in as content in the same wrapper mixin, it prints the right value:
content: "max-width: (1739px)";
But the media queries seem to be completely ignored. I'm having a hard time debugging, as this is my first time with Next.js and I can't find the exported styles (google developer tools throws me back to the actual scss, which looks correct).
Does anyone have any idea of what I'm doing wrong?
This is how I use scss with my next js project:
Install sass
npm install --save-dev sass
(or npm i sass if you compile your code on the server).
I created a root directory named scss, in it I have my variables, mixins etc. For example:
breakpoints.scss
$screen-sm-min: 640px;
$screen-md-min: 768px;
$screen-lg-min: 1024px;
$screen-xl-min: 1280px;
#mixin sm {
#media (min-width: #{$screen-sm-min}) {
#content;
}
}
#mixin md {
#media (min-width: #{$screen-md-min}) {
#content;
}
}
#mixin lg {
#media (min-width: #{$screen-lg-min}) {
#content;
}
}
#mixin xl {
#media (min-width: #{$screen-xl-min}) {
#content;
}
}
Then I use scss modules like this:
MyComponent.module.scss:
#import '/scss/breakpoints';
.image {
position: relative;
#include lg {
position: fixed;
}
}
in my component, I import the styles and use them as described here: https://beta.nextjs.org/docs/styling/css-modules
There are more options here:
https://beta.nextjs.org/docs/styling/sass
I have a really simple issue that seems to be difficult to solve. I want to stick with the normal standard 12 column neat grid, but I want the two .homeSplit divs to take up 5 columns each. I would like the second one(.insights) to get 1col of space in the middle so I gave it a grid-push(1). When it gets to mobile sizes, I want each of these divs to take up the full 12 columns and stack on top of each other. The issue is that once I get down to mobile size, that 1col space I assigned with grid-push(1) is persisting and I can't figure out how to get rid of it.
CSS/SASS:
.homeSplit {
position: relative;
#include grid-column(5);
&.news {
.post {
margin-bottom: 26px;
}
}
&.insights {
#include grid-push(1);
padding-left: 30px;
z-index: 999;
.post {
margin-bottom: 26px;
}
}
}
#media only screen and (max-width: 959px) {
.homeSplit {
#include grid-column(12);
&.insights {
#include grid-push(0);
}
}
}
I have tried grid-push(-1) as well but it goes too far. Am I misunderstanding how to use Neat? Pulling my hair out over here.
The best path here would be to use the grid-media() mixin to have a series of grids. Here is an example of what that would look like (with some of the extraneous code removed.
Also, neat by default favors min-width over max-width in media queries. based on your layout, min-width makes things a lot easier.
$my-desktop-grid: (
media: 959px,
);
.homeSplit {
#include grid-column(); // default's to 12 here
#include grid-media($my-desktop-grid) {
#include grid-column(5);
&.insights {
#include grid-push(1);
}
}
}
I've created a codepen as an example so you can see what this looks like in action.
https://codepen.io/whmii/pen/aVvqma
Option 1: the nesting is wrong.
In looking at the example above the #media declaration is nested within the .homeSplit block, but then .homeSplit is declared again w/in #media. However the code you have above would likely not run and would error out, so I'm going to assume there was something lost in translation when it was copped and pasted in to your question.
Option 2: grid-push wants false or just to be empty.
grid-push(0) isn't really a thing but in sass 0 may == false so you can try the following:
.homeSplit {
position: relative;
#include grid-column(5);
&.news {
.post {
margin-bottom: 26px;
}
}
&.insights {
#include grid-push(1);
padding-left: 30px;
z-index: 999;
.post {
margin-bottom: 26px;
}
}
#media only screen and (max-width: 959px) {
#include grid-column(12);
&.insights {
#include grid-push(); // 'false' is the default here
}
}
}
Note: I also cleaned up some of the nesting at the bottom
Im going to add a second answer that shows how to do this using the grid-media mixin.
I'm trying to workaround Bourbon not supporting #keyframe by generating my own prefixes version with a Sass loop like this:
$list: '' -ms- -webkit- -moz- -o-
$at: # //at sign
#each $prefix in $list
#{$at}#{$prefix}keyframes moveclouds
from
#{$prefix}transform: translateX(2400px)
to
#{$prefix}transform: translateX(-400px)
and expecting to generate css:
#keyframes moveclouds from {
transform: translateX(2400px);
}
#keyframes moveclouds to {
transform: translateX(-400px);
}
#-moz-keyframes moveclouds from {
-moz-transform: translateX(2400px);
}
#-moz-keyframes moveclouds to {
-moz-transform: translateX(-400px);
}
....
the issue is that I cannot figure out how to force Sass output # (at sign) in start of a line
if I do
$at: # // wont work, error
$at: \# // will generate \#keyframes = not good
$at: "\#" // wont work error
$at: ## // will generate ##keyframes = not good
so anyone got an idea how to output at sign in Sass ?
This simply isn't possible using variable interpolation. You can get around the # assignment like this:
$at: unquote("#"); // either of these will work
$amp: #{"#"};
But then you end up with this error:
error sass/test.scss (Line 4: Invalid CSS after "": expected selector_comma_sequence, was "#-ms-keyframes ...")
Interpolation on #keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
Usage:
#include keyframes(foo) {
0% {
color: red;
}
100% {
color: blue;
}
}
A more complex example can be found in Eric Meyer's Sass Animation library.
I'm using compass to generate my icons and their hover states. The active state is the same as the hover state, and I'd like to keep my sprite map from being bloated with duplicate icons. Is there any way to make it add an active class to the same coordinates as the hover state?
#import 'sprites/*.png';
#include all-sprites-sprites;
generates:
.sprites-left {
background-position: 0 -16px;
}
.sprites-left:hover, .sprites-left.left_hover, .sprites-left.left-hover {
background-position: -18px -16px;
}
I'd like to add
.sprites-left.active {
background-position: -18px -16px;
}
This is as close to a solution as I could come up with.
#import 'sprites/*.png'; // sprites to include
#include all-sprites-sprites; // creates all sprites
// Manually extend each to add active states.
.sprites-engaged.active{ #extend .sprites-engaged:hover; }
.sprites-married.active{ #extend .sprites-married:hover; }
Did you read the docs? The Selector Control section covers this:
#import 'sprites/*.png';
.sprites-left {
&:hover, &.active { #include sprites-sprite(name_for_hover) }
... etc
}
I'm trying to workaround Bourbon not supporting #keyframe by generating my own prefixes version with a Sass loop like this:
$list: '' -ms- -webkit- -moz- -o-
$at: # //at sign
#each $prefix in $list
#{$at}#{$prefix}keyframes moveclouds
from
#{$prefix}transform: translateX(2400px)
to
#{$prefix}transform: translateX(-400px)
and expecting to generate css:
#keyframes moveclouds from {
transform: translateX(2400px);
}
#keyframes moveclouds to {
transform: translateX(-400px);
}
#-moz-keyframes moveclouds from {
-moz-transform: translateX(2400px);
}
#-moz-keyframes moveclouds to {
-moz-transform: translateX(-400px);
}
....
the issue is that I cannot figure out how to force Sass output # (at sign) in start of a line
if I do
$at: # // wont work, error
$at: \# // will generate \#keyframes = not good
$at: "\#" // wont work error
$at: ## // will generate ##keyframes = not good
so anyone got an idea how to output at sign in Sass ?
This simply isn't possible using variable interpolation. You can get around the # assignment like this:
$at: unquote("#"); // either of these will work
$amp: #{"#"};
But then you end up with this error:
error sass/test.scss (Line 4: Invalid CSS after "": expected selector_comma_sequence, was "#-ms-keyframes ...")
Interpolation on #keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
Usage:
#include keyframes(foo) {
0% {
color: red;
}
100% {
color: blue;
}
}
A more complex example can be found in Eric Meyer's Sass Animation library.