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?
Related
I'm trying to create a dynamic css property using SASS by using mixins.
#mixin setProperty($property,$value,$unit:null){
#{$property} :$value$unit;
}
.class{
#include setProperty(position,relative);
}
This creates an output
.class {
position: relative;
}
I'm fine with this. But when i create some property for margin or padding we should include PX. So i tried something like this
.class{
#include setProperty(margin,10,px);
}
which creates output with a space in the middle as follows. How do i get rid of these space.
.class{
margin: 10 px
}
You should use interpolation to concatenate the values instead of adding, you can try this:
#mixin setProperty($property,$value,$unit:null){
#{$property} :#{$value}$unit;
}
When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.
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 a bit new to Foundation and SCSS. I'm trying out the grid Mixin in the example like so:
/* Each individual part that can be added in */
#import "foundation/components/global";
#import "foundation/components/grid";
// #import "foundation/components/visibility";
#import "foundation/components/block-grid";
#masthead { #include grid-row; #include panel;
& > hgroup { #include grid-column(4); }
& > section { #include grid-column(8); }
}
The problem is the generated CSS has the masthead, hgroup, section classes as expected, but there's also all the usual .small-1, .large-2 grid classes etc.
Is there a way to tell SASS not to generate these "extra" classes?
Got the answer in: How can one import only variables and mixins from Scss stylehsheets?
Basically look for "$include-html*" in foundation/scss/foundation/components/_grid.scss, set to false, and that should turn off the "extra" classes.
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.
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);
}
}