Is there any way to use
"breakpoint"
for sass within
"Prepros"
?
you can write your breakpoints in different file and can name that file as "_breakpoint.scss"
In your main app.scss you can call you dependent file with import function. So in your app.scss you would write :-
app.scss
#import "_breakpoint.scss";
now you can use breakpoint in this file which you have define in _breakpoint.scss file.
Hope its clear!!
Yes. Here's an example:
#mixin breakpoint($point) {
#if $point == xs {
#media (min-width: 420px) { #content; }
} #else if $point == sm {
#media (min-width: 640px) { #content; }
} #else if $point == md {
#media (min-width: 960px) { #content; }
}
}
...specifying as many as you want. And then using breakpoints is as easy as this:
.my-class {
color: red;
#include breakpoint(md) {
color: blue;
}
}
In this example .my-class colour will be red, unless the viewport is at least 960px wide, in which case .my-class colour will be blue.
I hope this helps.
Related
So I I am trying to style a custom wordpress theme, however the breakpoints I'm using are being applied at all screen sizes, literally just overwriting the styles I've already written. I have never had this problem before, and I have used this exact code on other, non-WordPress sites. In fact I literally copied it over from a site I made in Gatsby.
this is my _breakpoints.scss file
$breakpoints: (
"xs":0,
"sm":30rem,
"md":45rem,
"lg":60rem,
"xl":75rem,
);
#mixin xs {
#media (min-width: map-get($breakpoints, "xs")){
#content;
}
}
#mixin sm {
#media (min-width: map-get($breakpoints, "sm")){
#content;
}
}
#mixin md {
#media (min-width: map-get($breakpoints, "md")){
#content;
}
}
#mixin lg {
#media (min-width: map-get($breakpoints, "lg")){
#content;
}
}
#mixin xl {
#media (min-width: map-get($breakpoints, "xl")){
#content;
}
}
#mixin breakpoint($bp: 0) {
#media (min-width: $bp) {
#content;
}
}
and this is the element I am working on. the element should be hidden until the lg breakpoint (60rem/960px)
.hero-logo-container {
display: none;
#include lg {
display: block;
}
}
I did wonder was it something odd with flexbox, but like I said I've literally just used the exact same _breakpoints .scss on another site and it works fine. I have also thought that this may be some odd quirk of WordPress?
any help you can give me would be appreciated
I have tried hard-coding the file path to the image, in case that was the culprit (rather than using get_theme_file_uri()) but that wasn't it, other styles are just being similarly overridden.
I have recreated what has been built so far in basic HTML, with the same SCSS files and the problem is happening there.
I just can't see what I'm doing wrong...
I would like to write something like this:
$widthXl: 1000px
$widthSm: 500px
#mixin med ($prop, $xl, $sm)
#media (max-width: $widthXl)
&
$prop: $xl
#media (max-width: $widthSm)
&
$prop: $sm
a
#include med(width, 600px, 300px)
b
#include med(color, #000, #888)
And get this:
#media (max-width: 1000px) {
a {width: 600px}
b {color: #000}
}
#media (max-width: 500px) {
a {width: 300px}
b {color: #888}
}
But my code doesn't compile it. Is it possible?
It would be interesting to know whether someone faced the same problem.
If I remove property, code works fine. But I want to create complex solution.
You can use variable "interpolation" like #{$prop}.
My code sample is in scss instead of sass, I like braces. It should compile the same.
$widthXl: 1000px;
$widthSm: 500px;
#mixin med ($prop, $xl, $sm) {
#media (max-width: $widthXl) {
& {
#{$prop}: $xl;
}
}
#media (max-width: $widthSm) {
& {
#{$prop}: $sm
}
}
}
body {
#include med(color, red, blue)
}
Some information can be found in the docs
I am creating an SCSS grid with specific problem - I would like to use one variable name, for instance $pad (for padding values), but that $pad variable would need to be different in different media breakpoints.
Variable value is first set through out mixins that dynamically create breakpoints and set $pad value within them.
// Default value
$pad: 0;
#mixin resolution($breakpointName, someOtherValues) {
#if ($breakpointName == 'mobile') {
#media (min-width: 320px) and (max-width: 520px) {
$pad: 20px;
#content;
}
}
#else {
#media (min-width: 521px) {
$pad: 30px;
#content;
}
}
}
When I start to write code, I would like to use it like this
#include resolution(mobile) {
.test {
padding: $pad;
}
}
Here is the problem. While using libsass (NPM gulp-sass), variable $pad is passed as I intended and it outputs following CSS
// THIS IS OK - gulp-sass
#media (min-width: 320px) and (max-width: 520px) {
.test {
padding: 20px;
}
}
But if I use latest Ruby SASS to compile CSS through NPM gulp-ruby-sass, it outputs only default value for $pad
// THIS IS WRONG - gulp-ruby-sass
#media (min-width: 320px) and (max-width: 520px) {
.test {
padding: 0;
}
}
Where is the problem here? Is it my idea or is it a bug in either libsass or ruby sass?
If my idea is the problem, is there a way to achieve what I wanted somehow?
Ruby Sass is correct. Your value should be 0.
LibSass has a tendency to behind in features and behavior. It is emulating the behavior of Sass 3.3, which freely has access to global variables from within mixins/functions. There isn't a way to do this that will work with both Sass 3.4 and LibSass. The syntax you need to use to be able to access global variables is not backwards compatible.
Either drop down to Sass 3.3 (and live with the deprecated warnings) or forget about being able to use LibSass.
Your mixin will need to look like this for Sass 3.4 to work as desired:
#mixin resolution($breakpointName) {
#if ($breakpointName == 'mobile') {
#media (min-width: 320px) and (max-width: 520px) {
$pad: 20px !global;
#content;
}
}
#else {
#media (min-width: 521px) {
$pad: 30px !global;
#content;
}
}
}
I'm getting errors compiling my Sass files using media query mixins. I followed several tutorials, but it won't compile. I'm using Sass 3.3.0.alpha.67 (Bleeding Edge).
Here's my code
/* Included at the end */
#mixin mobile-only {
#media (max-width : 320px) {
#content;
}
}
/* Included where the rest of my sass is */
body { #include mobile-only {
display: none;
}
}
I'm using Scout to compile and watch for changes. Is there anything else I need to be doing?
Doesn't seem to be an issue anymore. The slightly modified code is explained in this codepen http://codepen.io/danielcgold/pen/RRNrPQ.
#mixin start-desktop-size {
#media (min-width: 1024px) {
#content;
}
}
body {
#include start-desktop-size {
background: red;
}
}
I have a Sass mixin for my media queries based on Twitter Bootstrap's responsive media queries:
#mixin respond-to($media) {
#if $media == handhelds {
/* Landscape phones and down */
#media (max-width: 480px) { #content; }
}
#else if $media == small {
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {#content; }
}
#else if $media == medium {
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { #content; }
}
#else if $media == large {
/* Large desktop */
#media (min-width: 1200px) { #content; }
}
#else {
#media only screen and (max-width: #{$media}px) { #content; }
}
}
And I call them throughout my SCSS file like so:
.link {
color:blue;
#include respond-to(medium) {
color: red;
}
}
However, sometimes I want to style multiple queries with the same styles. Right now I'm doing them like this:
.link {
color:blue; /* this is fine for handheld and small sizes*/
/*now I want to change the styles that are cascading to medium and large*/
#include respond-to(medium) {
color: red;
}
#include respond-to(large) {
color: red;
}
}
but I'm repeating code so I'm wondering if there is a more concise way to write it so I can target multiple queries. Something like this so I don't need to repeat my code (I know this doesn't work):
#include respond-to(medium, large) {
color: red;
}
Any suggestions on the best way to handle this?
A mixin like that leaves you in a position that's not very flexible, and not just because you're using px (see: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/). Simply put, you've made your mixin too specific and not very reusable for other sites.
I'm currently using a collection of 4 mixins to handle the most common media queries: min-width, max-width, between, and outside (I've sampled min-width and between below)
$output-media-width: true !default; // true = all, otherwise use a list of numeric values (eg. 320px 23em)
#mixin media-min-width($bp) {
#if type-of($output-media-width) != list {
#media (min-width: $bp) {
#content;
}
} #else {
$output-bp: find-comparable($bp, $output-media-width);
#if not comparable($output-bp, $bp) {
#debug "Output breakpoint: #{$output-bp}, Chosen minimum width: #{$bp}";
} #else if $output-bp >= $bp {
#content;
}
}
}
#mixin media-between($bp1, $bp2) {
#if type-of($output-media-width) != list {
#media (min-width: $bp1) and (max-width: make-less-than($bp2)) {
#content;
}
} #else {
$output-bp1: find-comparable($bp1, $output-media-width);
$output-bp2: find-comparable($bp2, $output-media-width);
#if not comparable($output-bp1, $bp1) or not comparable($output-bp2, $bp2) {
#debug "Output breakpoints: #{$output-bp1} and #{$output-bp2}, Chosen breakpoints: #{$bp1} and #{$bp2}";
} #else if $output-bp2 >= $bp1 and $output-bp2 < $bp2 {
#content;
}
}
}
#function find-comparable($val, $list) {
#each $item in $list {
#if comparable($val, $item) {
#return $item;
}
}
}
#function make-less-than($val) {
#return if(unit($val) == em, $val - .001, $val - 1);
}
This mixin suite lets me generate a responsive CSS file or a collection of non-responsive CSS files at any width I desire (specifically for devices that don't take kindly to media queries) just by having a variable like this at the top of my file:
$output-media-width: 800px 60em;
A list of sizes lets me use px in those rare cases where em is inappropriate (such as for dealing with images).
// Device widths
$device-x-narrow: 23em; // 320px
$device-narrow: 35em; // 480px
$device-medium: 60em; // 800px
$device-wide: 70em; // 1000px
article.event {
#mixin tableify {
// footer { display: table-row }
footer section { display: table-cell }
footer section + section { padding-left: 2em }
}
#include media-min-width($device-medium) { // 2-col layout still
#main > & { // single event view
#include tableify;
}
}
// sometimes you need a non-standard breakpoint, too...
#include media-min-width(27em) { // narrow devices
section & {
#include tableify;
}
}
#include media-max-width(27em) {
footer section.categories ul {
display: block;
padding-left: 0;
li { display: inline }
li + li { margin-left: 1em }
}
}
}
Despite the fact that #cimmanon answered my question before I posted that I was using Twitter Bootstrap, it had some really interesting ideas in it which I think I'll apply from now on for my Sass projects that use Twitter Bootstrap. Here is what I found worked great:
/* Responsive dimensions */
$handheld-max: 479px;
$small-min: $handheld-max + 1;
$small-max: 767px;
$medium-min: $small-max + 1;
$medium-max: 979px;
$large-min: $medium-max + 1;
$large-max: 1199px;
$xlarge: 1200;
/*Responsive query mixins */
#mixin media-above($min) {
#media (min-width: $min) { #content; }
}
#mixin media-below($max) {
#media (max-width: $max) { #content; }
}
#mixin media-between($min, $max) {
#media (min-width: $min) and (max-width: $max) { #content; }
}
and then call it in my code like so (based on my request in the question):
.link {
color: blue;
#mixin media-above($medium-min){
color: red;
}
}
Using bootstrap-sass variables, I defined such mixins in SASS syntax:
=media-width-below($max)
#media (max-width: $max)
#content
=media-width-between($min, $max)
#media (min-width: $min), (max-width: $max)
#content
=media-width-above($min)
#media (min-width: $min)
#content
=media-xs
+media-width-above($screen-xs-min)
#content
=media-sm
+media-width-above($screen-sm-min)
#content
=media-md
+media-width-above($screen-md-min)
#content
=media-lg
+media-width-above($screen-lg-min)
#content
Those mixins will be useable just like +make-sm-column or .col-md-5 classes. You can just use it like this:
body
+media-xs
background-color: yellow
+media-sm
background-color: blue
+media-md
background-color: red
+media-lg
background-color: green
When you will be making your browser smaller by changing it from large to xs, you'll see colors in this order: green, red, blue, yellow.