I am working with one project and trying to make it responsive.My question is when I put components inside of App.js if there is a class with same name they override each other like that
--ExampleComponent1.js
--ExampleComponent1.scss
.custom-container {
width: 50%
}
--ExampleComponent2.js
--ExampleComponent2.scss
.custom-container {
width: 70%
}
const App = () => {
return(
<ExampleComponent1 />
<ExampleComponent2 />
)
}
It causes custom-container class overrided by examplecomponent2 cuz they both have same class name.
So my question is that i know i can use scss.module but should i use media queries in every seperated scss folder like that ? Is it good to use ? Because i am writing in every scss folder media queries 3 times ( for mobile - for tablet - for desktop ) . It seemed wrong to me. What should i do ? Hope i am clear enough.
#media (min-width: 768px) and (max-width: 1279px) {
.custom-container {
width: 70%;
}
#media (max-width: 767px) {
.custom-container {
width: 100%;
}
You could use BEM (block__element—modifier, e.g. login__form—select) naming conventions or moduled CSS.
Related
I have a CSS variable called --menuWidth. I'm trying to use this variable with an arithmetic operator but I'm having trouble.
I tried the following:
left: calc(var(--menuWidth) + 20px);
But the less processor output says "OperationError: Operation on an invalid type" (at column 2?)
I found this working codepen which actually seems to confirm the syntax above, so I'm assuming this is a LESS issue. If so, how can I fix it?
Here is my file structure:
vars.less
:root {
--menuWidth: 200px;
}
#media screen and (min-width: 1280px) and (max-width: 1919px){
:root {
--menuWidth: 250px;
}
}
#media screen and (min-width: 1920px){
:root {
--menuWidth: 300px;
}
}
layout.less
#headerContainer {
left: calc(var(--menuWidth) + 20px);
}
compiled.less
#import "vars.less";
#import "layout.less";
Updating LESS from 2.7.2 to 3.0.4 fixed the issue.
I've noticed more and more that my stylesheets generally have repeated rules as a normal selector as well as inside a #media ... {} query and generates quite a lot of CSS bloat.
Here's a simple use-case of the problem that I see popping up ad nauseam:
.big-red {
color:red;
font-size: 3em;
... lots of other stuff
}
.dynamic-uber-class {
color:green;
font-size:2em;
}
#media only screen and (min-width: 48em) {
.dynamic-uber-class {
color:red;
font-size: 3em;
... lots of other .big-red duplicated stuff
}
}
I notice that the problem becomes increasingly problematic when I use mixins in less or scss (because it's really easy to add), but what's really needed is mixins in CSS (for which I won't be holding my breath!). That said, I've noticed CSS-Properties, with some support and #apply that has no support.
Has anyone stumbled on a CSS only way of not having this duplication?
I'm aware that with a bit of Javascript I can simply add/remove classes, but I like my sites working properly with javascript disabled (as much as possible).
Edit:
For those struggling to understand the problem, take a real-world example from bootstrap's grid:
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
...
#media (min-width: 768px) {
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
}
If you've ever looked at the generated CSS of bootstrap it is very fat indeed due to the problem.
Why not something like this:
.uber-class, .dynamic-uber-class {
color:red;
font-size: 3em;
... lots of other duplicated stuff
}
#media only screen and (min-width: 48em) {
.dynamic-uber-class {
... only unique styles
}
}
I have a menu bar that slides opened and closed. Its closed state is also what it looks like when the screen is sufficiently small. So, I basically have the same styles twice: once as a class and once as a media query.
Is there any way to avoid this?
Edit ¹:
I want to avoid having a media query style AND a class. It would be nice if there was some clever way of applying the same style via both a class and media query.
Edit ²:
Code example (for illustrative purposes):
menu {
width: 100px;
}
menu.closed { /*triggered via class addition in javascript */
width:10px;
}
#media (max-width:1000px) {
menu { /*notice how this is the same as the closed class*/
width:10px;
}
}
You have achieved the most compact code using pure CSS.
To achieve an even more dry CSS code, you can use a CSS preprocessor.
They are tagged as dynamic-css. Some of them are less, and sass.
Less example:
#small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: #small-menu;
}
#media (max-width:1000px) {
menu {
width: #small-menu;
}
}
Sass example:
$small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: $small-menu;
}
#media (max-width:1000px) {
menu {
width: $small-menu;
}
}
I am trying to extend a simple class
.positionAbsolute {
position: absolute;
}
My issue here is that I can extend it like:
#something:extend(.positionAbsolute) {
something else
}
But from inside the media query itself, If i try from outside no rule is extended at all.
Is this the normal behaviour?, why is doing that?, In such case I will have to create like four equal classes to extend in each media query case, is there some workaround?
Thank you
I'm not sure I understand it right (it's always hard to guess w/o seeing an exact CSS output you need to achieve), but it looks like you need something like:
.positionAbsolute {
position: absolute;
}
#something:extend(.positionAbsolute) {
#media only screen and (min-width: 1024px) {
something: else;
}
}
The other way around is:
.positionAbsolute {
position: absolute;
}
#class-1,
#class-2 {
&:extend(.positionAbsolute);
}
#media only screen and (min-width: 1024px) {
#class-1 {
something: else;
}
#class-2 {
something-even: more else;
}
}
That way you will have to repeat selectors instead of media queries.
I was trying to do this, and was quite disappointed I couldn't put the extend within a media query. Fortunately I was able to use a mixin for what I wanted. This may work for some situations. I can't really tell what you're actually doing with your case.
.centerVertically()
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
border: 2px solid red;
.content
{
display: inline-block;
vertical-align: middle;
}
}
used in media query
#media screen and (min-width: #break_tablet)
{
/* doesn't work
&:before:extend(.centerVertically_wrapper){}
.content:extend(.centerVertically_child){}
*/
.centerVertically();
The best I came up with I turned into a GIST here. Basically, I created an externalized reference mixin for the query and imported all the possible contexts into it. LESS sees through the query when you are referencing a class to extend but it will export it.
Reference:
.narrow {
#media screen and (max-aspect-ratio: 1/1) {
#import "position";
#import "z";
}
}
Export:
#import (reference) "narrow";
.style-1:extend(.position .abs, .narrow .position .rel) {
}
.style-2:extend(.narrow .position .rel) {
}
.style-3:extend(.narrow .z .index-1) {
}
Most of the time, I use LESS variables with preset breakpoints for media queries like this:
#s-max : ~"screen and (max-width: 40em)";
#m-max : ~"screen and (max-width: 50em)";
#l-max : ~"screen and (max-width: 60em)";
USAGE
.some-class {
color: red;
#media #s-max {
color: blue;
}
}
But sometimes, I would like to be able to refer to an arbitrary breakpoint in my .less stylesheet without having to set a new preset value in my separate mixin file.
You can do this in SASS. The mixin looks like this:
#mixin bp-min($canvas) {
#media only screen and (min-width:$canvas) {#content;}
}
USAGE
#include bp-min(750px) {
//responsive styling for min-width of 750px
}
In LESS, I'm imagining the equivalent mixin would look something like this:
.bp-min(#min) {
#media only screen and (min-width:#min)...
}
The only problem is, the lack of the {#content} argument in LESS, which grabs the rest of the styling inputted by the developer. I love SASS, but I can't use it at work.
Does anyone know of a LESS-based solution to this problem?
It is now similar to SASS
As of 1.7.0 (2014-02-27) you can now use #rules in place of the sassy #content.
For example:
.breakpoint-small(#rules) {
#media screen and (min-width: 40em) { #rules(); }
}
ul {
width: 100%;
.breakpoint-small({
width: 50%;
});
}
outputs, as expected:
ul {
width: 100%;
#media screen and (min-width: 40em) {
width: 50%;
}
}
The differences being:
function takes #rules as an argument
additional parenthesis when invoking the function
'.' syntax as opposed to '#include'
This can be combined with an additional argument to provide syntax equivalent to a nice bit of sass:
.breakpoint(#size, #rules) {
#media screen and (min-width: #size) { #rules(); }
}
#large: 60em;
ul {
.breakpoint(#large, {
width: 50%;
});
}
edit: To be honest I prefer a way more simple approach in less:
#break-large: ~"screen and (min-width: 60em)";
ul {
#media #break-large {
width: 50%;
}
}
Source: I too use sass at home and less at work
Using Pattern Matching
I believe this achieves what you want:
LESS
/* generic caller */
.bp-min(#min) {
#media only screen and (min-width:#min) {
.bp-min(#min, set);
}
}
/* define them */
.bp-min(750px, set) {
test: (#min - 300px);
}
.bp-min(400px, set) {
test: (#min - 100px);
}
/* call them */
.bp-min(750px);
.bp-min(400px);
Output CSS
#media only screen and (min-width: 750px) {
test: 450px;
}
#media only screen and (min-width: 400px) {
test: 300px;
}
By defining a set pattern mixin for the various sizes, and then using that pattern within the generic .bp-min(#min) mixin, I believe we have the same abstraction in LESS that you have in SCSS, with slightly more code because I believe SCSS defines and calls in one #include statement, whereas here we need two.
(In addition to the prev. answer) Or something like this:
.bp-min(#canvas) {
#media only screen and
(min-width: #canvas) {.content}
}
// usage:
& { .bp-min(900px); .content() {
color: red;
}}
& { .bp-min(600px); .content() {
color: blue;
}}
// more usage examples:
.class-green {
.bp-min(450px); .content() {
color: green;
}}
& { .bp-min(300px); .content() {
.class-yellow {
color: yellow;
}
.class-aqua {
color: aqua;
}
}}
Replace .content with .- if you prefer shorter stuff.
In my case I needed my variables to reference other variables, so some of these solutions did not work. Here is what I went with.
#bp-xs: ~"screen and (max-width:"#screen-xs-max~")";
#bp-sm: ~"screen and (max-width:"#screen-sm-max~")";
#bp-md: ~"screen and (max-width:"#screen-md-max~")";
#bp-lg: ~"screen and (max-width:"#screen-lg-max~")";
and then use them like so
#media #bp-sm {
...
}