I have a design where I need to be able to change colours on a page depending on the input in the cms.
To do this I'm adding one class to a containing div and I'll change the colours according to that surrounding class.
There's going to be a set amount of colours. (8, I think. It's not been decided yet.)
My idea was to use a mixin to accomplish this. eg.
Example HTML
<div class="color-1>
<h1 class="h1">My Title</h1>
</div>
Example LESS Mixin
.color() {
#color_1: red;
.color-1 & {
color: #color_1;
}
#color_2: blue;
.color-2 & {
color: #color_2;
}
//etc.....
//I have a similar mixin for background-color -> .bg-color();
}
Example LESS
.h1 {
.color();
background-color: #fff;
#media screen and (min-width: 960px) {
color: #fff;
.bg-color();
}
}
Problem
The problem is that the specificity for the mobile version is higher than the desktop one.
Example rendered CSS
//Could be color-2, color-3 etc. depending on class, doesn't matter for this example
.color-1 .h1 { //This would override the media query below due to 2 classes
color:red;
}
.h1 {
#media screen and (min-width: 960px) {
color: #fff;
background:color: red;
}
}
This issue will effect the rest of the page. Is there a better way to accomplish what I'm looking for without sticking important tags everywhere?
________________Edit________________
For clarity, the site I'm building will allow logged in users of a certain tier to change the main colour of their personal page, I still need the client to decide on how many colours but I think it will be around 8. Instead of writing out each of those, or having a separate stylesheet for each one (Maintaining that would be horrible) I decided to create a Mixin for it. There will be mutiple background colours and text colours that need to change, and due to the design they will need the change to different colours at mobile desktop and tablet.
Thinking of the nature of CSS something must be amiss with your code as the browser will always take the last value you give to a certain selector.
For example the following h1 would be red:
<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }
And it will change it's color when you give it a different value inside a mediaquery if the mediaquery is matched. So in the example below the h1 will be green when the viewport exceeds 399px in width:
<h1 class="foo">Headline</h1>
.foo { color: blue; }
.foo { color: red; }
#media all and (min-width: 400px) {
.foo { color: green; }
}
What's confusing me is the difference between your LESS code and what's in the outpout CSS. I'd suggest you have a second look at your selectors and/or variables. Indentation can be quite confusing as well, so may be you should opt for a mobile-first LESS file and then create others for mediaqueries (and import those in a main less file keeping the order intact).
Related
I have a simple SASS code that may be working like when the user has on his device set preferred color scheme dark the parameters from %dark-theme will extend to <body> and also when the user has preferred color scheme light the %light-theme will be extended instead of %dark-theme to <body>.
The same parameters which are used in %dark-theme and %light-theme may be extended on <body> when <body> have set id to #switched-dark-mode or #switched-light-mode. This IDs are set by Javascript after user switch the theme color.
Is there any solution to how I can make my SCSS clear and parameters which are used in #extends write only one time and use them in media query and also in ID selector?
MY CODE:
%dark-theme {
background: black;
color: white;
}
%light-theme {
background: white;
color: black;
}
#media (prefers-color-scheme: dark) {
body {
#extend %dark-theme;
}
}
#media (prefers-color-scheme: light) {
body {
#extend %light-theme;
}
}
body {
&#switched-dark-mode {
#extend %dark-theme;
}
&#switched-light-mode {
#extend %light-theme;
}
}
Unfortunately you cannot specify multiple selectors when using #media queries in SCSS (or at least to my knowledge). What you have already is a good solution.
One workaround you could try would be to use the "prefers-color-scheme" query in JavaScript when you load the page to apply the appropriate ID on the body element, which would allow you to remove the two #media queries from your SCSS code.
That means you could just move the styles defined in %dark-theme and %light-theme into the appropriate body selector.
Check out this post for reference and other solutions:
How to override css prefers-color-scheme setting
With the LESS preprocessor, you can nest CSS code inside other CSS code, like this:
.Element {
.AnotherElement {
background-color: #FFF;
}
.YetAnotherElement {
background-color: #000;
}
}
This would make the background of .Element .AnotherElement white, and it makes .Element .YetAnotherElement have a background color of black. It does it all without writing it out like:
.Element .AnotherElement {
background-color: #FFF;
}
.Element .YetAnotherElement {
background-color: #000;
}
Does the first example coincide with CSS syntax, or do I have to use the LESS preprocessor?
Nesting is a feature of LESS and SASS, not native to CSS.
This is one of the most common uses for CSS preprocessors, but they offer a lot more too.
No, css doesn't support this syntax, in your css example the "Element" and "AnotherElement" will to receive this properties, AnotherElement will not inherit properties of Element.
I did a little research on this but wasn't able to find what I needed, as I probably don't understand the answers.
I need to be able to define a base color for two specific pages.
Page one uses #brand-color
Page two also uses #brand-color.
Page two has a different body class. I need to make suer that #brand-color on .page-2 is different than on page 1.
I'm not quite sure how to do this, or if it's even possible.
All of the styles are already in the sheet for page 1, I really only need to change he brand-color for it all to update on page 2, I'd prefer to do that then to go through all the css and add extra declarations and duplicates for page 2.
Is this possible?
I don't think this is possible, but you can do something like this:
#brand-primary: #ff0000;
body{
&.page-2{
#brand-primary: #00ff00;
.yourclass{
color: #brand-primary;
}
}
.yourclass{
color: #brand-primary;
}
}
so .yourclass has a different color on body.page-2 but this is only possible within the scope.
but in this case it probably makes more sense to define a second variable.
You should use mixin with changing selector order technique instead of variable.
#brand-color-1: #ff0000;
#brand-color-2: #00ff00;
.brand-color() {
color: #brand-color-1;
.page-2 & {
color: #brand-color-2;
}
}
.my-brand-header {
.brand-color();
}
will be compiled to css:
.my-brand-header {
color: #ff0000;
}
.page-2 .my-brand-header {
color: #00ff00;
}
I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.
To clarify:
Right now, most likely due to readability, CSS is written somewhat like so:
element {
text-decoration: underline;
}
#selector {
font-size: 50px;
color: red;
text-decoration: underline;
}
.selector-two {
color: red;
}
In this example, properties are assigned to selectors to give them a certain style. Also, certain properties are assigned multiple times to different selectors. Would there be a difference in performance or size of the stylesheet if it was written like so:
element, #selector { text-decoration: underline; }
#selector, .selector-two { color: red; }
#selector { font-size: 50px; }
Of course this wouldn't make it easy to see in the CSS which styles are applied to certain elements, but would there be any benefits if you can minify your CSS code to look this?
CSS speed optimisation is a complete waste of time.
Browsers can parse that stuff ridiculously quickly.
You'd be better off focusing on reducing the file size of your collateral, i.e. your images, css files, html, javascript, etc.