Has tilde notation superseded the e function in less? Per the docs e function:
CSS escaping, replaced with ~"value" syntax.
If it has been, how does one do the following with tilde notation? It doesn't seem possible.
e() works
#screen-lg-dim: 1024;
#screen-lg: e(%("only screen and (min-width: %spx)", #screen-lg-dim));
~() does not:
#screen-lg-dim: 1024;
#screen-lg: ~(%("only screen and (min-width: %spx)", #screen-lg-dim));
// error
Related
I want to make a light mode for a website that uses SASS with variables in it. So, here are the variables and smth I tried (but doesn't work):
#media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
$bg: #0d0d0e;
$c0: #ffffff;
$c1: invert(#333);
$c2: #7c7c7c;
$c3: invert(#aaa);
$c4: invert(#eee);
}
#media (prefers-color-scheme: light) {
$bg: #fff;
$c0: #000;
$c1: #505050;
$c2: #66666a;
$c3: #aaa;
$c4: #eee;
}
I have to keep SCSS. Should I try #mixin?
That won't work with Sass variables during runtime since they are being compiled and then statically served. What you can do though is using CSS custom properties aka CSS variables. Those can be changed during runtime with Javascript (more versatile) or use media queries along with the boolean context value prefers-color-scheme. This value is unfortunately set by the user's browser environment and cannot be changed with Javascript.
You can however just switch the colors around with Javascript. With an onClick event you just save the state of current color in a buffer, assign the current color with the alternative color and then set the alternative color to the one saved in the buffer (aka the former current color).
I've tried switching around colors stored in CSS custom properties with a checkbox and the input:checked selector but the changes have only local scoping (thanks, W3C), so they won't do you any good - that is of course unless you want to wrap your whole website in your color switcher element.
The only way with Sass variables would be to recompile the Sass stylesheets when a user switches over the color scheme.
tl;dr: use CSS custom properties and either go with browser defaults in media queries or use a bit of Javascript. Everything else is very hacky.
I'm defining each theme side by side and using them inside #media (prefers-color-scheme).
Even made my self a mixin:
/** Helper to tigth properties to color preferences */
#mixin color-scheme($value: light) {
#media (prefers-color-scheme: $value) {
#content;
}
}
/** Usage */
.element {
/* ... */
#include color-scheme(dark) {
/* ... */
}
}
I tried to use Less mixin but its not working because I'm passing multiple linear values:
.MultiStepGradient(#multigrad) {
background-image: -moz-linear-gradient(#multigrad);
background-image: -webkit-linear-gradient(#multigrad);
background-image: -o-linear-gradient(#multigrad);
background-image: -ms-linear-gradient(#multigrad);
background-image: linear-gradient(#multigrad);
}
.test {
.MultiStepGradient(135deg,#202f7c 0%, #7f3689 52%, #7f3689 100%);
}
Error:
No matching definition was found for .MultiStepGradient(135deg, #202f7c 0%, #7f3689 52%, #7f3689 100%)
Pass it like this, escaping it
.MultiStepGradient(~"135deg,#202f7c 0%, #7f3689 52%, #7f3689 100%")
you could change the mixin to take multiple values if you want to pass it the way you are doing it now
http://lesscss.org/functions/#string-functions-escape
Scroll down a little to see the e section
CSS escaping, replaced with ~"value" syntax.
It expects string as a parameter and return its content as is, but
without quotes. It can be used to output CSS value which is either not
valid CSS syntax, or uses proprietary syntax which Less doesn't
recognize.
I have the following code snippet in my SCSS to modify the CSS according to device size.
.cu-list-project li{
#media (min-width: #screen-md-min) {
width: 60%;
#include project-list;
}
}
But Sass gives the following error:
*error styles/sass/styles.scss (Line 108: Invalid CSS after "...ia (min-width: ": expected expression (e.g. 1px, bold), was
"#screen-md-min) {").
Apparently, "#screen-md-min" is not recognized by Sass. What should I do?
P.S: I know I can change #screen-md-min to 992px but this will not be a best practice. So, I'm looking for a real solution not a workaround. thanks.
Looking at the source code for the bootstrap-sass, you should use $screen-md-min e.g.
#media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
#include responsive-visibility('.visible-md');
}
From line 89 on Github
I'm using Stylus CSS preprocessor and I'm trying to output this specific media query, which is a hack for IE8:
#media (min-width 481px), screen\0
however the above compiles to: #media (min-width 481px), screen 0 as the \ is used for escaping: http://learnboost.github.io/stylus/docs/escape.html - escaping the backslash didn't work either screen\\0
I've tried using the unquote() method in various ways without any luck, as it does not compile at all:
> 846| #media (min-width 481px), unquote('screen\0')
847| .social
848| max-width 401px
849| margin 0 auto
expected "(", got "function unquote"
or
> 846| unquote('#media (min-width 481px), screen\0')
847| .social
848| max-width 401px
849| margin 0 auto
expected ")", got "string '#media (min-width 481px), screen\0'"
How can I get Stylus to output that, correctly?
For now you can store the hack in a variable and then use it in the media query like this:
$ie8mediahack = 'screen\0'
#media (min-width 481px), $ie8mediahack
.social
max-width 401px
margin 0 auto
This would also make it self-commented and not look like an actual hack :)
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.