I have written many media query in the working process.
Like this:
#mixin fullWidth {
#media screen and (max-width: 1024px) and (min-width: 960px) {
#content;
}
}
And used this mixin many files.
#include laptop {
.test { content: "" }
}
#include laptop {
.text2 {content: "2" }
}
It generated two media query in my CSS file:
#media screen and (max-width: 1024px) and (min-width: 960px) {
.test { content: "" }
}
#media screen and (max-width: 1024px) and (min-width: 960px) {
.test2 { content: "2" }
}
I want to merge similar query
I'm using grunt.
If necessary i will use everything if it possible to solve
How about combing the 2 statements into one #include, like this:
#include laptop {
.test { content: "" }
.text2 {content: "2" }
}
In the case where you're using the #laptop mixin across many files you can use a Grunt plugin like grunt-combine-mq.
Related
how can I solve this problem in the main project because I used this code in all files but before a month I didn't have any issue but after sometime vocode shows me this error
here is the image that shows the error of ) expected scss(css-rparentexpected) and this error is throwing error on vscode problems tab in terminal
this is the second image 👇👇👇
this is the pic in that I am facing issues on working our main project and vs code throwing error but there is no issue when I compile it?
// ----Media query mixin-----------//
#mixin min-mq($min-screen-size) {
#media (min-width: $min-screen-size + "px") {
#content;
}
}
#mixin max-mq($max-screen-size) {
#media (max-width: $max-screen-size +"px") {
#content;
}
}
// ----------------------------For Orientation-----------------------//
#mixin landscape-orientation($max-screen-size, $orientation) {
#media (max-width: $max-screen-size +"px") and (orientation: $orientation) {
#content;
}
}
#mixin btw-mq($min-screen-size, $max-screen-size, $pixel-ratio, $orientation) {
#media only screen and (min-width: $min-screen-size +"px") and (max-width: $max-screen-size +"px") and (-webkit-min-device-pixel-ratio: $pixel-ratio) and (orientation: $orientation) {
#content;
}
}
#mixin btw-sz($min-screen-size, $max-screen-size) {
#media only screen and (min-width: $min-screen-size +"px") and (max-width: $max-screen-size +"px") {
#content;
}
}
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},
Handling media queries with preprocessors is very cool, but I didn't found a way to group same rules to avoid repeated media queries rules like:
Example 1
#media only screen and (max-width: 600px) {
body {
background-color: #f00;
}
}
#media only screen and (max-width: 600px) {
.div1 {
background-color: #0c0;
}
}
#media only screen and (max-width: 600px) {
.div2 {
background-color: #00c;
}
}
I to want to group the same rules into a single one like:
Example 2
#media only screen and (max-width: 600px) {
body {
background-color: #f00;
}
.div1 {
background-color: #0c0;
}
.div2 {
background-color: #00c;
}
}
MY STYLUS CODE
This is how I am handling the media queries in Stylus:
media_queries = {
mobile : "only screen and (max-width: 600px)",
tablet : "only screen and (min-width: 601px) and (max-width: 800px)",
desktop : "only screen and (min-width: 801px)"
}
And I have a function to call the media sizes:
for_breakpoint(breakpoints)
conditions = ()
for breakpoint in breakpoints
push(conditions, media_queries[breakpoint])
conditions = join(", ", conditions)
#media conditions
{block}
After that, I call it inside the rules I want to have a specific media query:
+for_breakpoint(mobile)
.div1
background-color red
But the problem is that i ends having a tons of repeated media queries like the ones on example 1. Is there a way to group them like the example 2?
Use plugin groupCssMediaQueries:
gulp.task('css', function() {
gulp.src('./styl/*.styl')
.pipe(stylus({
use: nib()
}))
.pipe(groupCssMediaQueries())
.pipe(gulp.dest('./public/css/'))
})
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 really enjoyed finding out you could create a media query variable that you can easily reuse and makes your code much more readable.
#tablet: ~"(min-width: 768px) and (max-width: 980px)";
#media #tablet { ... }
I want to know if it's possible to group a media query with a selector. It doesn't appear to work the way I've implemented it, but I thought I'd ask to see if it's even probable.
#tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
aside { ... }
&.homepage,
#media #tablet {
aside { ... }
}
}
I understand that media queries are different from run-of-the-mill selectors because you have to define your selectors inside of the media query, but is there some voodoo LESS way to accomplish grouping like this?
I'm not a 100% certain of the output you are going for, but this LESS only defines the color red once, and applies it to both:
#tablet: ~"(min-width: 768px) and (max-width: 980px)";
body {
aside { color: blue }
&.homepage {
aside { color: red }
}
#media #tablet {
.homepage;
}
}
Yields this CSS:
body aside {
color: #0000ff;
}
body.homepage aside {
color: #ff0000;
}
#media (min-width: 768px) and (max-width: 980px) {
body aside {
color: #ff0000;
}
}