I'm trying to do something like:
$media_not_desktop: '#media only screen and (max-width: 959px)';
then
.wrap {
color: #fff;
$media_not_desktop {
color: #555;
}
}
but I'm getting a syntax error. How would you do this?
You can do this in sass 3.2, currently available as an alpha release
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 under Variables as full query.
The syntax is a little different but essentially the same functionality.
I believe this is currently not a possible with Sass. There's an open issue with a patch on the Sass bug tracker, though.
Related
We're introducing a dark theme for our site that can be turned on and off on the fly, so we're using CSS custom properties. The problem is that we still have to support IE 11. IE just isn't getting the dark theme, it'll stay on the light theme, that's fine, but it means we have to duplicate all of our color properties now:
.some-icon {
color: #some-font-color;
color: var(--some-font-color);
fill: #some-font-color;
fill: var(--some-font-color);
}
This is because IE 11 will ignore the CSS custom properties and still use the first one it finds. Is there a way to use a LESS mixin or something else to automatically generate those duplicate values for us? Just a minor thing but it would save us some annoyance.
(Side note: I know there are polyfills to make CSS variables work in IE 11, we chose not to use one. We barely support it as is, no need to add a polyfill for this.)
You can use a mixin to output multiple values as such:
#red: red --red;
.color(#val) {
#val1: extract(#val, 1);
#val2: extract(#val, 2);
color: #val1;
color: var(~'#{val2}');
}
p {
.color(#red);
}
Output will be:
p {
color: red;
color: var(--red);
}
Current Bootstrap Version 3.3.7
Are all media queries for bootstrap-sass deprecated, I tried running one media query and kept getting errors below.
How can I use media queries in bootstrap-sass?
See Image Below
See Error Below
My style.scss file
#media (min-width: #screen-lg-min) {
.navbar{
height: $navbar-height * 2;
}
}
Variables in SASS are marked with a $ sign, not #. So the line should look like this:
#media (min-width: $screen-lg-min) {
.navbar{
height: $navbar-height * 2;
}
}
I'm a semantic-ui newbie, usually I use bootstrap 3.0 and i really like the "visible-xs" feature, someone have a workaround for this on semantic-ui ?
Basically, it's just
.visible-xs { display: none !important; }
#media (max-width: 767px) {
.visible-xs { display: block !important; }
}
Just add it somewhere to the CSS.
You can use container's visibility for that:
http://semantic-ui.com/elements/container.html#/introduction
But be carefully, they only works for containers not individual elements.
If you want to use it like Bootstrap on particular elements, you can use some of this snippets:
https://github.com/Semantic-Org/Semantic-UI/issues/1114
And this is actually the discussion to allow that support on semantic ;)
I've made the following two Mixins:
.responsive_color(#color, #response_color, #speed: 0.1s){
color: #color;
.transition(color, #speed);
&:hover, &:active, &:focus{
color: #response_color;
}
}
.responsive_background(#color, #response_color, #speed: 0.1s){
background-color: #color;
.transition(background-color, #speed);
&:hover, &:active, &:focus{
background-color: #response_color;
}
}
Since these two are nearly identical I want to combine them into something like this:
.responsive(#property, #color, #response_color, #speed: 0.1s){
#property: #color;
.transition(#property, #speed);
&:hover, &:active, &:focus{
#property: #response_color;
}
}
While this doesn't cause errors in the LESS parser (PHP class) it is simply ignored.
I've also tried #{property} and '#{property}' but both of these cause errors.
Does anyone know how I can output #property to be properly parsed?
Or am I trying to do something that isn't possible?
Just a quick update. Now the feature is there:
Properties can be interpolated, e.g. #{prefix}-property: value;
— Less.js 1.6.0 changelog
So if you're using Less 1.6 or later, now you can actually do it like this:
#{property}: #response_color;
More info in this great SO answer.
A similar question has been answered here that may help you. That particular feature isn't in the LESS.js framework (yet), but you can possibly get around it with a little hack, outlined here:
How to pass a property name as an argument to a mixin in less
I am using Mindscape workbench and .dotless. When I code the following it works good:
#base: #f04615;
#logo {
color: saturate(#base, 5%);
background-color: darken(#base, 10%);
}
gives me:
#logo {
background-color: #C5360D;
}
However the following gives nothing and it seems like Mindscape does not even recognize fade:
#logo {
background-color: fade(#base, 10%);
}
Has anyone else had some similar problems?
Sounds like the version of less mindscape is following does not support the colour fade() functionality.
Can you please check you're using the latest version of the Web Workbench? In my version (latest version on the Visual Studio Gallery) this compiles perfectly to:
#logo {
background-color: rgba(240, 70, 21, 0.1);
}
We typically ship an update a few days after each new release of LESS (or Sass, or CoffeeScript comilers). Inside Visual Studio go to Tools -> Extension Manager and then check the "Updates" tab. It can take a few moments to check for updates so give it a moment.
If you still have problems after updating please let me know or post on our forum and we can help get you sorted.
I hope that helps.