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...
Related
Currently I'm trying to change the padding of my landing page text, so it pushes my smooth scroll button to the bottom of the page. However the queries work up until (min-width: 600px), and they dont change higher.
Mixins Partial
#mixin for-phone-only {
#media (max-width: 599px) {
#content;
}
}
#mixin for-tablet-portrait {
#media (min-width: 600px) {
#content;
}
}
#mixin for-tablet-landscape {
#media (min-width: 899px) {
#content;
}
}
#mixin for-desktop-up {
#media (min-width: 1200px) {
#content;
}
}
Landing Page Partial
.welcomeTitle {
font-family: $landing-font;
font-size: $landing-header-size-l;
text-shadow: 1px 1px 15px #000;
padding-top: 20%;
#include for-phone-only {
font-size: $landing-header-size-sm;
}
}
.welcomeText {
#include for-desktop-up {
padding: 0 20% 21.5% 20%;
font-size: $landing-text-size-l;
}
#include for-tablet-landscape {
padding: 0 20% 20% 20%;
}
#include for-tablet-portrait {
padding: 0 20% 60% 20%;
}
#include for-phone-only {
padding: 0 20% 50% 20%;
}
}
So it applies the tablet portrait query, but when the width goes above 899px, it dose not apply the tablet landscape, or when it goes above 1200px, it dosent apply the desktop query.
Thanks :D
I'm looking for a way to generate responsive utility classes in SASS. I had this CSS
.text-left { text-align: left; }
.text-right { text-align: right; }
#media (min-width: 480px) {
.text-left-sm { text-align: left; }
.text-right-sm { text-align: right; }
}
#media (min-width: 800px) {
.text-left-md { text-align: left; }
.text-right-md { text-align: right; }
}
and I would like to add some more, but I don't want to repeat myself. It would be best if SASS could generate all those responsive (media query) variants for me. So far I was able to write a mixin that I could call with suffix param and get what I want
#mixin textalign($suffix: "") {
.text-left#{$suffix} { text-align: left; }
.text-right#{$suffix} { text-align: right; }
}
#include textalign();
#media (min-width: 480px) {
#include textalign("-sm");
}
#media (min-width: 600px) {
#include textalign("-lg");
}
but I would like to go one step further and be able to do something like this
/* Unfortunatelly this doesn't work */
#include generate-responsive() {
.text-left { text-align: left; }
.text-right { text-align: right; }
}
Is there a way to achieve something like this? Having a general purpose mixin that I can use to generate all kind of utility classes?
I don't think you can accomplish your goal when nesting your selector in the #include, but you can do it when nesting the #include inside the selector.
SCSS input:
#mixin generate-responsive() {
// Create a list of sizes and widths
$sizes: (
sm: "480px",
md: "600px",
lg: "800px"
);
// Base style, without a suffix
#content;
// Responsive styles
// Loop over each size
#each $suffix, $width in $sizes {
#media (min-width: $width) {
&-#{$suffix} { #content; }
}
}
}
.text-left {
#include generate-responsive() {
text-align: left;
}
}
// You'll have to include the mixin for every class
.text-right {
#include generate-responsive() {
text-align: right;
}
}
CSS output:
.text-left {
text-align: left;
}
#media (min-width: 480px) {
.text-left-sm {
text-align: left;
}
}
#media (min-width: 600px) {
.text-left-md {
text-align: left;
}
}
#media (min-width: 800px) {
.text-left-lg {
text-align: left;
}
}
.text-right {
text-align: right;
// Etc...
How can I define multiple names for the same mixin, with support for content blocks?
Definition
#mixin desktop-breakpoint {
#media only screen and (min-width: 769px) {
#content;
}
}
#mixin large-breakpoint {
#include desktop-breakpoint;
}
Usage
.my-class {
font-size: small;
#include desktop-breakpoint {
font-size: big;
}
}
.my-other-class {
color: red;
#include large-breakpoint {
color: blue;
}
}
Error message
Mixin "large-breakpoint" does not accept a content block.
You're not passing any #content when using #include desktop-breakpoint in your large-breakpoint mixin. Doing this will fix your compilation error:
#mixin large-breakpoint {
// Remember to pass content received by mixin to #include
#include desktop-breakpoint {
#content;
}
}
Then your CSS will be compiled properly, as intended:
.my-class {
font-size: small;
}
#media only screen and (min-width: 769px) {
.my-class {
font-size: big;
}
}
.my-other-class {
color: red;
}
#media only screen and (min-width: 769px) {
.my-other-class {
color: blue;
}
}
See proof-of-concept example based on your modified code: https://www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527
Im working with SCSS and I want to structure the code proberly..
In LESS it wasnt a problem, but would you say it is okay to structure the code like below..
imagine that button has its own file.
#mixin button-basic {
.button {
font-size: 14px;
}
}
#mixin button-max-480 {
.button {
color: red;
}
}
#mixin button-max-767 {
.button {
color: green;
}
}
#mixin button-max-959 {
.button {
color: blue;
}
}
#mixin button-min-960 {
.button {
font-size: 34px;
color: purple;
}
}
#media print, screen {
#include button-basic();
}
in my media-query file.. (imagine having multiple includes within each media Query type.)
#media (min-width: 960px) {
#include button-min-960();
}
#media (max-width: 959px) {
#include button-max-959();
}
#media (max-width: 767px) {
#include button-max-767();
}
#media only screen and (max-width:480px) {
#include button-max-480();
}
You could work with #mixins but I would not recommend this approach because this gets really confusing.
I suggest using modifier classes for each variation and use your media-query inside your declaration.
.button {
&--red {
color: red;
}
&--green {
color: green;
}
&--blue {
color: blue;
}
#media (min-width: 768px) {
font-size: 1.125rem;
}
#media (min-width: 960px) {
font-size: 1.25rem;
}
}
This way you have a really clean code base and can split up each component / module into it's own file.
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.