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;
}
}
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 am declaring variables withing media queries in CSS, but when Angular CSS minifier is merging the declarations together, breaking the style.
Is there a way to configure this behavior?
My CSS is
:root { --grid-max: 94%; }
#media (min-width: 400px) { :root { --grid-max: var(--grid-4); } }
#media (min-width: 500px) { :root { --grid-max: var(--grid-5); } }
#media (min-width: 600px) { :root { --grid-max: var(--grid-6); } }
#media (min-width: 700px) { :root { --grid-max: var(--grid-7); } }
#media (min-width: 800px) { :root { --grid-max: var(--grid-8); } }
#media (min-width: 1200px) { :root { --grid-max: var(--grid-12); } }
The minified version is the following:
:root {
--grid-3:273px;
--grid-4:370px;
--grid-5:468px;
--grid-6:565px;
--grid-7:663px;
--grid-8:760px;
--grid-12:1150px;
--grid-max:94%;
}
The minifier computed the values of the variables (that is not the issue), but it also merged all media queries into a single statement, changing the behavior of the original CSS.
This doesn't actually solve the problem, but it is the workaround I have adopted for now.
Within angular.json it is possible to configure it not to do optimization regarding styles while still optimizing the js. In projects.architect.build.configurations.production.optimization, simply set styles to false and scripts to true.
"optimization": {"scripts": true, "styles": false},
What is the better SASS way to write the code below. I end up writing lots of media queries with dimensions and also repeating classes in SASS - surely there is a nice way to use mixins or includes? Anyone else write media queries better than below?
$strFullWidth:100%;
.aboutWrapper {
.logo{width:$strFullWidth;max-width:620px}
}
// MOBILE
#media only screen and (max-width:850px){
.aboutWrapper {
.logo{width:$strFullWidth;max-width:420px}
}
}
// SMALL MOBILE
#media only screen and (max-width:550px){
.aboutWrapper {
.logo{width:$strFullWidth;max-width:320px}
}
}
I like the queries David Walsh proposes in his blog post. So in your case the mixins could look like:
#mixin mobile {
#media only screen and (max-width:850px) {
#content;
}
}
#mixin smallMobile {
#media only screen and (max-width:550px) {
#content;
}
}
With these mixings, your SCSS code boils down to:
$strFullWidth:100%;
.aboutWrapper {
.logo {
width:$strFullWidth;
max-width:620px;
}
}
#include mobile {
.aboutWrapper .logo { max-width:420px; }
}
#include smallMobile {
.aboutWrapper .logo { max-width:320px; }
}
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;
}
}
}
http://css-tricks.com/media-queries-sass-3-2-and-codekit/
I recently discovered this technique while reading about scss. I've come to enjoy writing lesscss and I would rather not switch. I was curious as to what options lesscss has to accomplishing a similar technique? I really like the idea of writing media queries inside the primary class/id declaration.
#mixin breakpoint($point) {
#if $point == papa-bear {
#media (max-width: 1600px) { #content; }
}
#else if $point == mama-bear {
#media (max-width: 1250px) { #content; }
}
#else if $point == baby-bear {
#media (max-width: 650px) { #content; }
}
}
.page-wrap {
width: 75%;
#include breakpoint(papa-bear) { width: 60%; }
#include breakpoint(mama-bear) { width: 80%; }
#include breakpoint(baby-bear) { width: 95%; }
}
UPDATE
I have found this answer http://blog.scur.pl/2012/06/variable-media-queries-less-css/ my only critism is how can I make it so that the media queries arnt redundant? how would I make this all compile into 1 mediaquery block?
This is how I do my media queries in LESS, utilising query bubbling as outlined in the article you linked to:
#palm : ~"screen and (max-width: 40em)";
#lap : ~"screen and (min-width: 50em)";
#desk : ~"screen and (min-width: 60em)";
.some-class {
color: red;
#media #lap {
color: blue;
}
}
Unfortunately though there is no way to have it all compile down to one media query block. This may also be the case with SASS/SCSS. The only reason this could be a problem is that is increases file size.
However you shouldn't worry about that. Why? The repetition of multiple media query blocks is negated by GZIP (more repetition == better compression). So providing your server is encoding with GZIP (most do, if not you should be able to enable it, it's worthwhile) you will not see any/much increase in file size.
Finally, even discounting GZIP, I still wouldn't want it to compile to one media query block. On any large CSS code base the proximity of having media queries next to the selectors is useful and desirable