Nested breakpoint-sass with Susy span mixin - css

I use nested breakpoint with Susy. The compiled CSS contain the line: box-sizing: ;
When I don't use nested breakpoint the compiled CSS is correct.
The SASS code:
#include border-box-sizing;
#list {
$map: (
columns: 12,
gutters: 1/3,
math: fluid,
output: float,
last-flow: from,
global-box-sizing: border-box,
gutter-position: after
);
#include layout($map);
#include clearfix;
> li {
background: #BAC7D1;
margin-bottom: 2em;
#include span(3);
#include breakpoint(max-width 1099px) {
#include span(4);// this line make the problem: "box-sizing: ;"
}
&:nth-child(4n+4) {
#include breakpoint(1100px) {
#include span(3 last);
background: blue;
}
}
&:nth-child(3n+3) {
#include breakpoint(max-width 1099px) {
#include span(4 last);
background: greenyellow;
}
}
}
The compiled CSS (with the line: box-sizing: ;):
#gallery-list {
overflow: hidden;
*zoom: 1;
}
#gallery-list > li {
margin-bottom: 2em;
width: 23.40426%;
float: left;
margin-right: 2.12766%;
}
#media (max-width: 68.6875em) {
#gallery-list > li {
box-sizing: ;
width: 31.91489%;
float: left;
margin-right: 2.12766%;
}
}
#media (min-width: 68.75em) {
#gallery-list > li:nth-child(4n+4) {
box-sizing: ;
width: 23.40426%;
float: left;
margin-right: 0;
}
}
#media (max-width: 68.6875em) {
#gallery-list > li:nth-child(3n+3) {
box-sizing: ;
width: 31.91489%;
float: left;
margin-right: 0;
}
}
I've also used nested breakpoints with Susy in another site and it works well. I've also tried the susy-breakpoint mixin the problem remains the same.

Related

How Can I Use Multiple #include in SCSS?

I want to use multiple include in the same SCSS. For example:
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
#include desktop {
padding-top: 80px;
padding-bottom: 80px;
}
#include tablet {
padding-top: 80px;
padding-bottom: 80px;
}
#include mobole {
padding-top: 80px;
padding-bottom: 80px;
}
}
it's very Boring to Multiple #include frequently. Have Any Way to Reduce The Code, I want to use:
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
#include desktop , #include tablet, #include mobole {
padding-top: 80px;
padding-bottom: 80px;
}
}
But It's Not Valid SCSS. Please Tell Me Another Way To Reduce The Code.
As mentioned by #karthick dynamic includes are not supported (yet). In your case I think it would make sense to have a single mixin to handle all media queries – like:
SCSS
// map holding breakpoint values
$breakpoints: (
mobile : 0px,
tablet : 680px,
desktop: 960px
);
// mixin to print out media queries (based on map keys passed)
#mixin media($keys...){
#each $key in $keys {
#media (min-width: map-get($breakpoints, $key)){
#content
}
}
}
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
// pass the key(s) of the media queries you want to print
#include media(mobile, tablet, desktop){
padding-top: 80px;
padding-bottom: 80px;
}
}
CSS Output
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
}
#media (min-width: 0px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
#media (min-width: 680px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
#media (min-width: 960px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
You can use something like this:
SCSS
#mixin phone {
#media /*conditions*/ {
#content
}
}
#mixin tablet {
#media /*conditions*/ {
#content
}
}
#mixin desktop {
#media /*conditions*/ {
#content
}
}
#mixin media($keys...) {
#each $key in $keys {
#if ($key == phone) {
#include phone {
#content
}
} #else if ($key == tablet) {
#include tablet {
#content
}
} #else if ($key == desktop) {
#include desktop {
#content
}
}
}
}
USAGE
#include media(phone, tablet, desktop) {
// your scss code
}
#include media(tablet, desktop) {
// your scss code
}
#include media(phone) {
// your scss code
}
// and so on...

How to inject literal string into scss #mixin

Considering this following scss code:
#mixin homeSlider(
$dim: 150px,
$h1: "h1 { font-size: 4em; margin-top: 0; }"
){
section {
margin-top: -$dim;
}
$h1;
}
#include homeSlider( $dim: 50px, $h1: "h1 { font-size: 3em; margin-top: 0; }" )
I need to know how is it possible to achieve my goal
Try this
#mixin homeSlider($dim, $h1-font-size){
section {
margin-top: -$dim;
h1 {
font-size: $h1-font-size;
margin-top: 0;
}
}
}
#include homeSlider(50px, 3em;) /* $dim = 50px - $h1-font-size = 3em; */

How to overwrite Referencing Parent Selector using Mixin in SCSS

I had a common used component and its scss is like this:
.component {
margin-right: 12px;
&.specified-use-case {
margin-right: 30px;
&:nth-child(odd) {
margin-right: 70px
}
}
}
Now I want everything has same style in mobile view
.component {
margin-right: 12px;
// some predefined mixin
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&.specified-use-case {
margin-right: 30px;
&:nth-child(odd) {
margin-right: 70px
}
}
}
But this can't change style for "specified-use-case" in mobile view. In order to do it I have to
.component {
margin-right: 12px;
// some predefined mixin
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&.specified-use-case {
margin-right: 30px;
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
&:nth-child(odd) {
margin-right: 70px
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
}
}
}
Which just doesn't seem right to me. Is there a better way to define mobile view css just for once?
According to CSS' specificity rules (try this calculator) you unfortunately need to repeat yourself. What your SCSS interpreter does is just compiling what you've written to standard CSS, which will look something akin to:
.component {
margin-right:12px
}
#media (max-width:768px) {
.component {
margin-right:0px;
margin-bottom:14px
}
}
.component.specified-use-case {
margin-right:30px
}
#media (max-width:768px) {
.component.specified-use-case {
margin-right:0px;
margin-bottom:14px
}
}
.component.specified-use-case:nth-child(odd) {
margin-right:70px
}
#media (max-width:768px) {
.component.specified-use-case:nth-child(odd) {
margin-right:0px;
margin-bottom:14px
}
}
As you can see, you're overriding each class with a #media ruleset just after it has been declared. And since I'm a big proponent to never use !important (because you'll open a pandoras box), the only way you can shorten your SCSS is doing:
.component {
margin-right: 12px;
// some predefined mixin
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px; // only need to define margin-bottom once, here.
}
&.specified-use-case {
margin-right: 30px;
#include viewport(mobile) {
margin-right: 0px;
//margin-bottom: 14px;, remove this
}
&:nth-child(odd) {
margin-right: 70px
#include viewport(mobile) {
margin-right: 0px;
//margin-bottom: 14px;, remove this
}
}
}
}
Hope this helps!
You can put the rules inside of the media query:
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
&.specified-use-case {
margin-right: 0px;
margin-bottom: 14px;
}
}
seems like sass is wrong because you specify margins above a breakpoint, try this:
.component {
margin-right: 12px;
&.specified-use-case {
margin-right: 30px;
&:nth-child(odd) {
margin-right: 70px
}
}
// some predefined mixin
#include viewport(mobile) {
margin-right: 0px;
margin-bottom: 14px;
}
}

How to change the number of automatic columns across media queries in Neat

Bourbon Neat allows you to use the span-column() mixin along with the omega() mixin to create automatic columns similar to foundation 5's block grids. However, these seem to fail miserably when sharing styles across media queries. Take a look at the example below:
.blocks {
#include media($iphone) {
#include span-column(4);
#include omega(3n);
}
#include media($ipad) {
#include span-column(3);
#include omega(4n);
}
}
It uses the nth-child position to remove the margin from the last item in the row, but when the media query happens it doesn't overwrite the other CSS if you are changing the omega. So the first media query will work as expected. Then when the $ipad query is triggered the nth-child(3n) remains in the CSS therefore breaking the $ipad query. Is there any way to get around this?
Compiled CSS:
.block-grid > li {
float: left;
display: block;
margin-right: 2.68967%;
width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
.block-grid > li:nth-child(2n) { margin-right: 0; }
.block-grid > li:nth-child(2n+1) { clear: left; }
#media screen and (min-width: 1024px) {
.block-grid > li {
float: left;
display: block;
margin-right: 2.68967%;
width: 31.54022%;
}
.block-grid > li:last-child { margin-right: 0; }
.block-grid > li:nth-child(3n) { margin-right: 0; }
.block-grid > li:nth-child(3n+1) { clear: left; }
}
There is an 'omega reset' mixin that will deal with this: http://joshfry.me/notes/omega-reset-for-bourbon-neat/
Which does this:
#mixin omega-reset($nth) {
&:nth-child(#{$nth}) { margin-right: flex-gutter(); }
&:nth-child(#{$nth}+1) { clear: none }
}
So, to fix the code in the original question, put the omega-reset mixin in the proper place, and do this:
.blocks {
#include media($iphone) {
#include span-column(4);
#include omega(3n);
}
#include media($ipad) {
#include span-column(3);
#include omega-reset(3n); //added to reset previous omega value
#include omega(4n);
}
}
How you approach this with Bourbon/Neat is going to have to depend on how the #media mixin works. Your desired output is going to need to look something like this:
.block-grid > li {
float: left;
display: block;
margin-right: 2.68967%;
width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
#media (max-width: 1024px) {
.block-grid > li:nth-child(2n) { margin-right: 0; }
.block-grid > li:nth-child(2n+1) { clear: left; }
}
So, if $ipad is just a pixel value, the absolute simplest way to accomplish this is by writing out your media query by hand using that variable:
.block-grid > li {
#include media($iphone) {
#include span-column(4);
}
#media (max-width: $ipad) {
#include omega(3n);
}
#include media($ipad) {
#include span-column(3);
#include omega(4n);
}
}
If it's the result of the new-breakpoint() function, then you'll just need to create another media query context using max-width (I'm just going by what I can glean from looking at the source/examples, so you'll have to forgive me if this isn't quite right):
$smaller-than-ipad: new-breakpoint(max-width 500px 12); // 12 = total columns, optional
.block-grid > li {
#include media($iphone) {
#include span-column(4);
}
#include media($smaller-than-ipad) {
#include omega(3n);
}
#include media($ipad) {
#include span-column(3);
#include omega(4n);
}
}

Is there a replace function/script in Sass to swap CSS properties?

I'm working on a right-to-left solution in Sass.
So for example, if the original style is:
#foo {
float: left;
padding-left: 10px;
}
...the function/script will run through looking for floats and padding-lefts and replace the styles with:
#foo {
float: right;
padding-right: 10px;
}
I already have a solution using mixins, like this:
#mixin float($origin: left) {
#if $origin == left {
#if $rtl { float: right; }
#else { float: left; }
} #else {
#if $rtl { float: left; }
#else { float: right; }
}
}
#mixin padding-left($value) {
padding-right: $value;
}
#foo {
#include float(left);
#include padding-left(10px);
}
...but is there a way to do this without having to replace all reversible properties with includes?
You could use a variable so you can set the direction in one place, but Sass doesn't have the ability to alter existing CSS based on rules you set.
$direc: left;
div {
float: $direc;
padding-#{$direc}: 10px;
}

Resources