SCSS variables don't seem to work when used in a container query. For example this code works just fine:
.parent {
container-type: inline-size;
background: yellow;
}
#container (max-width: 800px) {
.child {
background:green;
}
}
See pen: https://codepen.io/pwkip/pen/jOprKya
But when I try to use a sass-variable to define the breakpoint, it fails.
$width: 800px;
.parent {
container-type: inline-size;
background: yellow;
}
#container (max-width: $width) {
.child {
background:green;
}
}
See pen: https://codepen.io/pwkip/pen/BaPzVZW
What's the problem here? Any workaround?
I cannot find the definitive sass lang entry, but hash and curly brace is often used in #media queries.
#container (max-width: #{$width}) {
.child {
background:green;
}
}
In Brave it works in that codepen; and so do the following:
#container (max-width: ${width} ) {
As "A Boston" already pointed out the issue seems to be that you don't use the hash syntax like in his first example.
I use https://www.sassmeister.com/ quite often to check what it compiles to.
In your Codepen you forgot to add a semicolon after
$width: 800px;
^
According to: https://developer.mozilla.org/en-US/docs/Web/CSS/#container
#container queries are not supported for Firefox yet. Only Firefox Nightly supports it.
I've tested it in Chrome and it worked with the tweaks. Make sure your browser version is supported. My current Safari version did not work either (due to the version mismatch).
Let's assume I have something like the following:
<v-app>
<div :class="getCustomCss">Blah</div>
<v-app>
getCustomCss() {
return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
}
<style>
.whenThemeIsDark {
border:1px solid white;
}
.whenThemeIsLight {
border:1px solid black;
}
</style>
What would be the best way to change the color of the divs border when toggling between light/dark themes?
Do I sit and watch the $this.vuetify.theme.dark property and manually change the border from the myDarkClass to myWhiteClass similar to what's shown above? Or do I somehow use the customProperties feature in the theme/options to do this (and how?). Or is there a better way of doing this I'm unaware of?
This is a simple example which only requests the css to change in one spot, but a real application may have tons of custom css on different pages that would keep needing checks like this. I could easily see that getting messy if there are watchers/checks everywhere.
I have read the https://vuetifyjs.com/en/customization/theme page and I have a feeling the Custom Properties section may be the key, but I'm not quite getting how to translate my example to their example.
A css class of theme--light or theme--dark is applied to the v-app v-application which will identify which theme is active for you without additional watchers.
Using your simplified example:
<style>
.v-application.theme--light {
border:1px solid white;
}
.v-application.theme--dark{
border:1px solid black;
}
</style>
My content in slick is not loading properly. However, if I click or change the window size of the browser it works fine. How can I fix the same?
I have added the below CSS but still not working.
.slider-container {
overflow: hidden;
}
.slick-slide: nth-of-child(n+1) {
display: none;
}
.slick-initialized,
.slick-slide:first-child {
display: block;
}
The issue is fixed since the tags were not closed properly.
Is there an easy way to use "#-moz-document url-prefix()" to target Firefox in SCSS documents.
I have tried the following, but the parent reference "&" does not work in this context.
#nav li{
display: table-cell;
#-moz-document url-prefix(){
& {
display: inline-block;
}
}
}
I run into little issues like that from time to time. I mainly use this technique to fix IE8. Here's my fix:
First I install: https://github.com/rafaelp/css_browser_selector
This gives me browser and rendering classes for each browser:
<html class="gecko firefox firefox26 mac">
Then in my SCSS, I can do this:
.foo{
display: block;
.firefox & {
display; none;
}
}
This example hides .foo in Firefox. Using a & after the selector looks back up the tree. Isn't SASS awesome?!?!?
Alternatively, install the script and create a separate firefox.scss and just start it like so:
.firefox {
// Do stuff here
}
As a rule, feature-detection using something like Modernizr is easier than playing to specific browsers, but sometimes you need to address various browser issues.
In Sass, I can't quite discern the difference between using #include with a mixin and using #extend with a placeholder class. Don't they amount to the same thing?
Extends do not allow customization, but they produce very efficient CSS.
%button
background-color: lightgrey
&:hover, &:active
background-color: white
a
#extend %button
button
#extend %button
Result:
a, button {
background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
background-color: white;
}
With mixins, you get duplicated CSS, but you can use arguments to modify the result for each usage.
=button($main-color: lightgrey, $active-color: white)
background-color: $main-color
border: 1px solid black
border-radius: 0.2em
&:hover, &:active
background-color: $active-color
a
+button
button
+button(pink, red)
Results in:
a {
background-color: lightgrey;
border: 1px solid black;
border-radius: 0.2em;
}
a:hover, a:active {
background-color: white;
}
button {
background-color: pink;
border: 1px solid black;
border-radius: 0.2em;
}
button:hover, button:active {
background-color: red;
}
Please follow this consecutive set of code examples to see how you can make your code cleaner and more maintainable by using extends and mixins effectively: http://thecodingdesigner.com/posts/balancing
Note that SASS unfortunately does not allow using extends inside media queries (and corresponding example from the above link is wrong). In the situation where you need to extend based on media queries, use a mixin:
=active
display: block
background-color: pink
%active
+active
#main-menu
#extend %active // Active by default
#secondary-menu
#media (min-width: 20em)
+active // Active only on wide screens
Result:
#main-menu {
display: block;
background-color: pink;
}
#media (min-width: 20em) {
#secondary-menu {
display: block;
background-color: pink;
}
}
Duplication is inevitable in this case, but you shouldn't care too much about it because web server's gzip compression will take care of it.
PS Note that you can declare placeholder classes within media queries.
Update 2014-12-28: Extends produce more compact CSS than mixins do, but this benefit is diminished when CSS is gzipped. If your server serves gzipped CSS (it really should!), then extends give you almost no benefit. So you can always use mixins! More on this here: http://www.sitepoint.com/sass-extend-nobody-told-you/
A good approach is to use both - create a mixin that will allow you lots of customisation and then make extends for common configurations of that mixin. For example (SCSS Syntax):
#mixin my-button($size: 15, $color: red) {
#include inline-block;
#include border-radius(5px);
font-size: $size + px;
background-color: $color;
}
%button {
#include my-button;
}
%alt-button {
#include my-button(15, green);
}
%big-button {
#include my-button(25);
}
This saves you from calling the my-button mixin over and over. It also means you don't have to remember the settings for common buttons but you still have the ability to make a super unique, one-off button should you choose.
I take this example from a blog post I wrote not long ago. Hope this helps.
In my opinion extends are pure evil and should be avoided. Here is why:
given the scss:
%mystyle {color: blue;}
.mystyle-class {#extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {#extend %mystyle}
The following css will be generated:
.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
color: blue;
}
When a browser doesn’t understand a selector, it invalidates the entire line of selectors. This means that your precious mystyle-class is no longer blue (for many browsers).
What does this really mean? If at any time you use an extend where a browser may not understand the selector every other use of the extend will be invalidated.
This behavior also allows for evil nesting:
%mystyle {color: blue;}
#mixin mystyle-mixin {#extend %mystyle; height: 0;}
::-webkit-input-placeholder {#include mystyle-mixin}
//you thought nesting in a mixin would make it safe?
.mystyle-class {#extend %mystyle;}
Result:
::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
color: blue;
}
::-webkit-input-placeholder {
height: 0;
}
Tl;dr: #extend is perfectly ok for as long as you never use it with any browser spesific selectors. If you do, it will suddenly tear down the styles wherever you have used it. Try to rely on mixins instead!
Use mixins if it accepts a parameter, where the compiled output will change depending on what you pass into it.
#include opacity(0.1);
Use extend (with placeholder) for any static repeatable blocks of styles.
color: blue;
font-weight: bold;
font-size: 2em;
I totally agree with the previous answer by d4nyll. There is a text about extend option and while I was researching this theme I found a lot of complaints about extend, so just have in mind that and if there is a possibility to use mixin instead of extend, just skip extend.