I am trying to use the #container directive for breakpoints. It's working when I directly set the desired breakpoint like this:
#container (max-width: 992px) { // working
span {
background-color: green;
}
}
However, when using variable for 992px it doesn't work. To asure that I used the variable correctly I added another style (max-height) which is working well.
max-height: $tablet; // results in max-height: 992px;
#container (max-width: $tablet) { // not working
span {
background-color: green;
}
}
As Amaury pointed out in the comments, I had to use the following syntax for using the variable:
#container (max-width: #{$tablet}) {
span {
background-color: green;
}
}
Related
I'm trying to update some old LESS style sheets into SCSS but am running into an issue translating media queries.
The LESS variables are as follows:
#lg: ~"(min-width: 1201px)";
#md: ~"(min-width: 993px)";
#sm: ~"(min-width: 769px)";
#xs: ~"(max-width: 768px)";
And are referenced in this manner:
.modal-dialog {
margin: 100px auto;
#media #md {
width: 880px;
}
}
I've translated this into the following SCSS variables:
$lg: "#{min-width: 1201px}";
$md: "#{min-width: 993px}";
$sm: "#{min-width: 769px}";
$xs: "#{max-width: 768px}";
and the following usage:
.modal-dialog {
margin: 100px auto;
#media ($md) {
width: 880px;
}
}
The code in question belongs to a .Vue component and is being compiled using SASS Loader FWIW. The code compiles (no errors) but the actual queries don't seem to be working. Thanks!
In SCSS / SASS the recommended approach to storing full media queries as variables is as follows:
$lg: "(min-width: 1201px)";
.modal-dialog {
margin: 100px auto;
#media #{$lg} {
width: 880px;
}
}
Which compiles to
.modal-dialog {
margin: 100px auto;
}
#media (min-width: 1201px) {
.modal-dialog {
width: 880px;
}
}
I just tried to save me some time, generating some helper css classes for different breakpoints.
What I tried:
#mixin resp { width: 100%; height: auto;}
#mixin table { display: table}
#mixin trow { display: table-row}
#mixin tcell { display: table-cell; }
#mixin gutter1px { padding: 0 1px; }
$tools: resp, table, trow, tcell, gutter1px;
#mixin make-tools($breakpoint) {
#each $tool in $tools {
$i: index($tools, $tool);
.#{$tool}-$breakpoint { #include #{$tool}(); }
}
}
#media (min-width: $screen-xs-min) {
#include make-tools(xs);
}
But this dosent seem to work:
#include #{$tool}();
Has anyone an idea how to archive that, or is it simply not possible?
I would like to change a #mixin variable depending on the viewport size. I taught that I could do it like this:
#mixin site-wrapper {
width:96%;
padding:2%;
}
#media screen and (min-width: 37.5em) {
#mixin site-wrapper {
max-width:$size__site-wrapper;
margin:0 auto;
}
}
But that did not seemed to work. Is this doable in some similar way?
It seems that if I just change the order of the media query and the mixin it works, like this:
#mixin site-wrapper {
width:96%;
padding:2%;
#media screen and (min-width: 37.5em) {
max-width:$size__site-wrapper;
margin:0 auto;
}
}
Using Sass, I have the following mixin:
#mixin ss($property, $value, $value-smallscreen) {
#{$property}: $value;
#media screen and (max-height: $smallscreen-maxheight) {
#{$property}: $value-smallscreen;
}
}
.Header
{
#include ss('height', $RowHeight, $RowHeight-smallscreen);
#include ss('font-size', $HeaderFontsize, $HeaderFontsize-smallscreen);
}
The ‘problem’ that I have is that this generates two #media statements. That is, it generates the following CSS:
.Header {
height: 41px;
font-size: 11pt; }
#media screen and (max-height: 768px) {
.Header {
height: 35px; } }
#media screen and (max-height: 768px) {
.Header {
font-size: 9pt; } }
What I want to know, is there any way to both:
Keep the definitions together, to ensure that the styles are added for both big and small screens, and
Only have one '#media' section.
One of my current projects requires this approach to the SASS structure, and my solution has been to watch the CSS output using a CSS post-processor like Pleeease to watch the CSS files as SASS/Compass outputs them.
This allows live media query packing among other optimization.
I'm doing a code review for sass code and came across using media queries inside the code. Is it a good practice? Are there better alternatives to writing this code?
.col-md-push-8 {
padding-top: 1.5em;
.btn {
&.btn-block {
border: none;
background-color: $footer-button;
margin: 1em 0 .5em;
width: 100%;
padding: 7px 10px;
border-radius: 8px;
&:hover {
background-color: $footer-button-hover;
}
#media (min-width: $screen-md-min) {
color: #025191;
&:hover .media span p.media-heading {
color: #0070ca;
}
}
}
}
}
Note: The code is for illustration purpose only and is not completely shown here.
I think that what your way to do it is perfectly fine if you're using SASS >= 3.2 (was buggy before).
Just one thing that you could do to define your media queries breakpoints more globally is to create a mixin for that purpose that you will re-use on each element you need responsive.
This way when you have to change let's say your min breakpoint, add another or change your media min-width to max-width, you don't have to do it everywhere.
Some little example assuming you have already defined $screen-md-min and $screen-md-mid :
#mixin custom-media($size) {
#if ($size == $small) {
#media (min-width: $screen-md-min) { #content; }
}
#else if ($size == $middle) {
#media (min-width: $screen-md-mid) { #content; }
}
}
And call it like so :
.btn {
&.btn-block {
...
#include custom-media($small) {
color: #025191;
&:hover .media span p.media-heading {
color: #0070ca;
}
}
}
}
There is no difference if you put Media Query inside or outside. It just depends on your preffered style.
Style 1
.some-class {
#media (min-width: 700px) {
background: red;
}
}
Style 2
#media (min-width: 700px) {
.some-class {
background: red;
}
}
Both will compile as:
#media (min-width: 700px) {
.some-class {
background: red;
}
}
Sass handles this fine, but that code is going to produce overly qualified selectors and is hardly concise.
There are a number of patterns for writing “better” CSS and Sass, such as BEM, OOCSS, OOCSS + Sass, and SMACSS.
There's also a bunch of great information on Media Queries in Sass that is probably worth a read.