I have CSS like that:
.class1 {
display: block;
color: red;
}
.class2 {
display: block;
color: blue
}
#media(max-width:800px) {
.class1-mobile {
display: block;
color: red;
}
.class2-mobile {
display: block;
color: blue
}
}
#media(min-width:800px) {
.class1-desktop {
display: block;
color: red;
}
.class2-desktop {
display: block;
color: blue
}
}
All the properties and their values are the same and the only difference is in class names and media queries. So I'd like to know if there is a way not to duplicate them.
here is a simplified way of doing your media queries using non-mobile first approach (max-width)
.class {
display: block;
/* optional because div is already block element*/
}
.class1 {
color: blue
}
.class2 {
color: red
}
#media(max-width:800px) {
.class1 {
color: red;
}
.class2 {
color: blue
}
}
<div class="class class1">red</div>
<div class="class class2">blue</div>
Use one class.
You can use the same class on multiple elements and You can use multiple
classes on the same element.
Related
Imagine a CSS file like this:
.foo {
display: block;
color: red;
background: #fffe;
}
.hide {
display: none;
}
Is there a tool that can strip this down to just color properties for theming purposes, like this?
.foo {
color: red;
background: #fffe;
}
I have some markup that looks about like this -
<div class="card">
<div class="card__icon">Icon</div>
<div class="card__text">Text</div>
</div>
Which I am styling with a little LESS like so -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
}
This works great - however the parent is getting toggled a class .current on it and I was trying to change one of the childrens styles using the same methods, but could not seem to get it working. I was trying this -
.card {
&__icon {
font-size: 1.75em;
#media (min-width: 992px) {
font-size: 2em;
}
}
&__text {
font-size: 1em;
}
&.current {
// this is not working
&__text {
color: red;
}
}
}
I can change the &__text inside the &.current to .card__text and it works fine - however I was wondering if there was a way I could keep the &__text syntax inside the &.current with using LESS. Thanks!
According to the documentation, the parent selector & expands to the whole parent nested rule, taking each nested rule parent as is and inserting it in place of `&, so in your case
.card {
&.current {
&__text {
color: red;
}
}
}
compiles to
.card.current__text {
color: red;
}
which is not what we want, because class current__text does not exist. To avoid that you may rearrange the class selectors in your less rules like so:
.card {
.current & {
&__text {
color: red;
}
}
}
which compiles to:
.current .card__text {
color: red;
}
A working example can be found in this codepen
Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
I would like to do the following thing and I am wondering about the best way to go about.
I have a div which is each 20% of the container's width (5 blocks). I would like to give a different background color to each block but only using one CSS class. What is the best way to do it?
In the past, I used to create 5 different classes where only the bg color is different (as everything else is the same - 20% width and same height) but I think there is a better way to do it.
Is it possible to create a class in the CSS that handles the different bg colors for each container?
I am not very sure if it will work, but but can try this - have a same class for all the divs (as you are already having - say, the class is 'myDiv'). Then In css -
.myDiv:nth-child(1){
background-color: red;
}
.myDiv:nth-child(2){
background-color: blue;
}
.myDiv:nth-child(3){
background-color: yellow;
}
and so on..
Hope this helps :)
See http://www.w3.org/TR/css3-selectors/
in this link see css3 selector for li,div and ...
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
/* Alternate division enter code herecolours in CSS */
.mydiv:nth-child(1) { color: navy; }
.mydiv:nth-child(2) { color: green; }
.mydiv:nth-child(3) { color: maroon; }
.mydiv:nth-child(4) { color: purple; }
Play around with :nth-child or adjacent sibling selectors
Like so
.parent { width: 100%; }
.parent > div { width: 20%; float: left; }
.parent > div:nth-child(1) { background-color: black; }
.parent > div:nth-child(2) { background-color: blue; }
.parent > div:nth-child(3) { background-color: purple; }
.parent > div:nth-child(4) { background-color: orange; }
.parent > div:nth-child(5) { background-color: yellow; }
Example here