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
}
Related
I wanna use an extend into a sass mixin
I have created an extend name flex then I use it into the centering item mixin. can I use it like?
//making a extend
%flex{
display:flex;
flex-wrap:wrap;
}
//mixin for centering an item
#mixin center-item(){
#include %flex;
justify-content:center;
align-items:center;
}
Yes. As long as the #mixin is included within a selector and #extend is used instead of #include to extend the silent-class, opposing to your example.
%example {
example: example;
}
#mixin example() {
#extend %example;
}
.example {
#include example();
}
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'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.
This open issue in the Sass queue seems to imply passing arguments to #content is not a feature yet, but Susy 2 seems to be able to do this. Tracking down how it's done is a bit of a rabbit hole though and I haven't figured it out yet. Perhaps someone can shed some light with a straightforward example? I want to create a custom mixin that will inherit a layout passed from susy-breakpoint() using a custom map.
Example: Defining a 4 column layout in a global Sass map, will return a width of 100% when a span of 4 is specified inside susy-breakpoint()'s #content. When a custom layout of 8 cols is passed to directly tosusy-breakpoint() via the $layout argument, the nested span() mixin picks up the new layout. But a custom nested mixin will not pick up the new layout. Why?
#import 'susy';
$susy: (
columns: 4,
);
#mixin inherit-layout($layout: 4) {
columns: $layout;
}
#include susy-breakpoint(30em) {
// nested code uses an 4-column grid from global map
.global-cols {
#include span(4);
#include inherit-layout();
}
}
#include susy-breakpoint(48em, $layout: 8) {
// nested code uses an 8-column grid from $layout
.inherited-cols {
#include span(4);
#include inherit-layout();
}
}
Compiled CSS:
#media (min-width: 30em) {
.global-cols {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
columns: 4;
}
}
#media (min-width: 48em) {
.inherited-cols {
width: 48.71795%;
float: left;
margin-right: 2.5641%;
columns: 4;
}
}
Update:
I've discovered that making the default variable for the inherit-value() mixin the value of columns key on the existing $susy map allows the mixin to grab context. But why? And why doesn't it work with a different map or outside of susy-breakpoint()?
See here: http://sassmeister.com/gist/d86e217aca3aa8337b83
Susy doesn't pass any arguments to the #content — instead, we change the global variable at the start of the content block, and then change it back at the end:
$example: 4;
#mixin local($local) {
$old: $example;
$example: $local !global;
#content
$example: $old !global;
}
// out here, $example == 4
#include local(12) {
// in here, $example == 12
}
Looking at the susy site, how does it hide .secondary when getting at a breakpoint?
Taken from the GutHub source for the site (with other styles removed):
.guides, .tutorial {
.secondary { display: none; } // secondary starts hidden
#include at-breakpoint($break) {
.secondary { display: block; } // secondary becomes visible at breakpoint
}
}
try this:
#include at-breakpoint($break) {
.secondary { display: none; }
}