Conditional media query - less

What am I missing in order to only use the media query below when useTablet is set to true?
#useTablet: true;
#tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
.footer{
width: 100%;
#media #tablet when (#useTablet = true){
width: 768px;
}
}
ParseError: Missing closing ')' on line 12, column 31:
11 width: 100%;
12 #media #tablet when (#use = true){
13 width: 768px;

No, Less does not allow to use guards directly in media query (or any other at-rule) statements. It's not a problem though to nest media block in a guarded block and vice-versa. E.g.:
#use-tablet: true;
#tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
.footer {
width: 100%;
& when (#use-tablet) {
#media #tablet {
width: 768px;
}
}
}
In modern Less it's usually more practical to abstract the whole thing via mixin:
// usage
#use-tablet: true;
.footer {
width: 100%;
.tablet({
width: 768px;
});
}
// impl.
.tablet(#style) when (#use-tablet) {
#media only screen
and (min-width: 720px)
and (max-width: 959px)
{#style();}
}

Related

AdminLTE - How to collapse sidebar but not top navbar?

AdminLTE 2.4.3 Demo: https://adminlte.io/themes/AdminLTE/index2.html
I'd like to collapse the left side bar but not the top nav bar when clicking the collapse icon.
I've played around with it but can't seem to find an easy solution for this. Because the collapse function is applied on the <body> tag, I'm not sure how to get around it.
For instance, I'd like it to collapse like this:
Add these styles
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
z-index: 1001;
position: relative;
color: white;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
display: none;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
display: block;
}
}

Logical not for media queries selector

Can I do negation of media query selector?
Something like:
#media ($mat-xsmall):not() {
nav {
// taken from md-card-image styles
margin-top: -24px !important;
width: calc(100% + 48px);
margin: 0 -24px 16px;
}
}

How to disable Bootstrap 3 mobile responsive?

I was commenting these code at bootstrap.css and my page is now not responsive. But my navbar still responsive. how to disable that?
/*#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}*/
Follow Bootstrap's official doc.
Bootstrap made a non-responsive.css template to disable responsiveness for your template. Take a look at this documentation: http://getbootstrap.com/getting-started/#disable-responsive
Example: http://getbootstrap.com/examples/non-responsive
But I see you want to do it your own way, so you could try this:
#media (min-width: 768px) {
.container, .navbar {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container, .navbar {
width: 970px !important;
}
}
#media (min-width: 1200px) {
.container, .navbar {
width: 1170px !important;
}
}
Note that the code above will only apply to the classes container and navbar. There are other components/classes that should have static widths and heights. So I would recommend you to take a look at the example above.

width depending on responsive classes

I could use media queries to specify a certain width for the different display styles (xs,sm,md,lg) but then I would have to repeat the widths that are part of the bootstrap media queries
#media (min-width: 768px) {
img {
width: 20%;
}
}
Question is: Can I maybe do this more DRY - without repeating the numbers?
My first thought was:
img.visible-xs {
width: 20%;
}
But apparently that class does not apply.
Any idea how to do this without using another set of media queries?
This can be done with less/sass mixins. E.g. with less just define
#screen-xs: ~"only screen and (max-width: 767px)";
#screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)";
#screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
#screen-lg: ~"only screen and (min-width: 1200px)";
and then you can use it like this
img {
#media #screen-xs {
width: 20%;
}
}

Splitting up a list of variables in Sass

In Sass is there a way to split up a list of variables / classes with hyphens?
It's a fuzzy question title so it's probably best I show what I'm trying to achieve.
In the below example I'm trying to create some utility classes that I can apply to HTML elements to help with vertical rhythm.
For example I may want to give an element a small margin that is consistent with my vertical rhythm strategy and so I'll add the class .m-t-s (which stands for margin-top-small).
I then want to output versions of those utility classes against for each media query I have for fine grain control e.g. I may want a class .m-t-s-768 which will add a small top margin when there is a minimum viewport width of 768px.
I have achieved this below, but it is a very long-winded and repetitive way of doing it. Can anyone suggest a more concise way?
Variables
––––––––––
$mediaQueries-px:
640,
768,
1024
;
$s: 20px; /* FYI I've simplified these examples for the sake of demonstration, normally I use something like ($baseLineHeight / 1.5) + rem */
$m: 50px;
$l: 60px;
Creating the classes
–––––––––––––––––––––
.m-t-s {
margin-top: $s;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-s-#{$mediaQuery} {
margin-top: $s;
}
}
}
.m-t-m {
margin-top: $m;
}
/* Create versions for each defined media query */
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16px)) {
.m-t-m-#{$mediaQuery} {
margin-top: $m;
}
}
}
This repeats for .m-t-l too (margin top large), and then it continues for padding classes (e.g. .p-t-s and so on), so it gets to be a pretty long list of utility classes.
To programatically generate that output, you need another list and an inner loop:
$mediaQueries-px:
640,
768,
1024
;
$s: 20px;
$m: 50px;
$l: 60px;
$sizes: s $s, m $m, l $l;
#each $size in $sizes {
.m-t-#{nth($size, 1)} {
margin-top: nth($size, 2);
}
}
#each $mediaQuery in $mediaQueries-px {
#media screen and (min-width: ($mediaQuery / 16 * 1em)) { // modified for compilation purposes
#each $size in $sizes {
.m-t-#{nth($size, 1)}-#{$mediaQuery} {
margin-top: nth($size, 2);
}
}
}
}
Output:
.m-t-s {
margin-top: 20px;
}
.m-t-m {
margin-top: 50px;
}
.m-t-l {
margin-top: 60px;
}
#media screen and (min-width: 40em) {
.m-t-s-640 {
margin-top: 20px;
}
.m-t-m-640 {
margin-top: 50px;
}
.m-t-l-640 {
margin-top: 60px;
}
}
#media screen and (min-width: 48em) {
.m-t-s-768 {
margin-top: 20px;
}
.m-t-m-768 {
margin-top: 50px;
}
.m-t-l-768 {
margin-top: 60px;
}
}
#media screen and (min-width: 64em) {
.m-t-s-1024 {
margin-top: 20px;
}
.m-t-m-1024 {
margin-top: 50px;
}
.m-t-l-1024 {
margin-top: 60px;
}
}