I want to accomplish this css (and more not posted for brevity) with LESS so I can have more control and auto creation of classes.
Not sure how much LESS can help me with it.
.m-xs {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.m-t-xs{
margin-top: 5px;
}
.m-r-xs{
margin-right: 5px;
}
.m-b-xs{
margin-bottom: 5px;
}
.m-l-xs{
margin-left: 5px;
}
.m-h-xs{
margin-right: 5px;
margin-left: 5px;
}
.m-v-xs{
margin-top: 5px;
margin-bottom: 5px;
}
I want this to be repeated for several sizes (xs, s, m, l, xl, etc) and also other properties like padding.
how can I use less to do this kind of 'autocreate' thing ? is even possible without writing all the classes?
I never used LESS but I see heavy use of it on bootstrap and I think this can be achieved.
I tested few things but looks like it's an advanced scenario because none of the tutorials have it covered.
thanks!
To generate the classes that you've mentioned there you could try parameterised mixins:
.classes (#size) {
.m-#{size} {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.m-t-#{size}{
margin-top: 5px;
}
.m-r-#{size} {
margin-right: 5px;
}
.m-b-#{size} {
margin-bottom: 5px;
}
.m-l-#{size} {
margin-left: 5px;
}
.m-h-#{size} {
margin-right: 5px;
margin-left: 5px;
}
.m-v-#{size} {
margin-top: 5px;
margin-bottom: 5px;
}
}
.classes(xs);
.classes(s);
.classes(m);
.classes(l);
.classes(xl);
Further parameterising as necessary.
Related
Recently started to work with Prettier in VSC and so far so good; the only issue I found is the "diagram" of the ID. How can I adjust the format?. My Prettier: Print Width's value is 120, so is not that.
Exp. (Prettier on)
#mail_user,
#pass_user,
#name_user,
#cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
I'm looking something like:
#mail_user, #pass_user, #name_user, #cardValid {
font-size: 55px;
padding: 20px 14px;
border: 0;
border-radius: 20px;
margin-bottom: 90px;
}
Few lines and just simply like it more. Thx in advance.
Here's the CSS that I have:
.tab {
border: 0;
flex: 1 1 0;
min-height: 48px;
opacity: 1;
text-align: center;
z-index: 0;
}
.tab:not([data-selected]) {
border-radius: 0;
}
.tab[data-selected] {
background-color: $white;
border: 1px solid #eee;
z-index: 2;
}
.tab[data-selected]:first-of-type {
margin-right: -8px;
}
.tab[data-selected]:last-of-type {
margin-left: -8px;
}
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
.tab:first-of-type {
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.tab:last-of-type {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
Having problem with this bit here:
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
I'm trying to select the middle child when it is selected. My stylelint is complaining like so:
Expected "`.tab[data-selected]:not(:first-of-type):not(:last-of-type)`" to have a specificity no more than "0,3,2"
How do I approach this in a better way?
The total specificity of your selector
.tab[data-selected]:not(:first-of-type):not(:last-of-type)
is (0,4,0), which is 1 over the limit of (0,3,2).
You can increase selector-max-specificity to accommodate this selector since the difference is so small.
Or if you'd rather not do that, you can refactor your &[data-selected] CSS rules like this. Apply both negative margins by default, then selectively remove the negative margins from &:first-of-type and &:last-of-type, thereby eliminating the need for the double negation:
&[data-selected] {
background-color: $white;
margin-left: -8px;
margin-right: -8px;
border: 1px solid #eee;
z-index: 2;
&:first-of-type {
margin-left: 0; /* Preserve negative margin-right */
}
&:last-of-type {
margin-right: 0; /* Preserve negative margin-left */
}
}
Note that the margin directions are swapped in the two nested rules since we're trying to preserve the now-existing negative margins instead of adding them where they weren't there before.
I was wondering how to achieve the following CSS with LESS:
.spacingTop {
margin-top: 8px;
}
.spacingRight {
margin-right: 8px;
}
.spacingBottom {
margin-bottom: 8px;
}
.spacingLeft {
margin-left: 8px;
}
Should I do something with Iterations?
What you actually want to do?
Becouse LESS CSS was created to organizate your code. This classes are totally diffrent.
I suggest you to use mixins. For this i will use this following as example :
.margins( #top , #right , #bottom , #left)
{
margin-top: #top;
margin-left: #right;
margin-bottom: #bottom;
margin-left: #left;
}
... and use it later as following
.spacingTop
{
.margins( 15px );
}
Hope it helps! :)
I have this code that works, it is a group of client icons that starts off with a 2 column list on mobile, then gradually moves to a 3 column list and then onto a 4 column list and so on.
I am using the nth child pseudo element to remove the margin on certain numbers depending on the breakpoint i.e :nth-child(2n) on the column breakpoint.
But check my code out I feel it is messy, Does anyone know of a better way to write this?
.list-horiz-images li {
float: left;
margin-right: 7px;
margin-bottom: 7px;
width: 49%;
&:nth-child(2n) {
margin-right: 0px;
}
#include mobilefirst(em(670)) {
width: 32.57%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 0px;
}
}
#include mobilefirst(em(1024)) {
width: 24.44%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 7px;
}
&:nth-child(4n) {
margin-right: 0px;
}
}
#include mobilefirst(em($bp-large)) {
width: 13.666666666%;
&:nth-child(2n) {
margin-right: 7px;
}
&:nth-child(3n) {
margin-right: 7px;
}
&:nth-child(4n) {
margin-right: 7px;
}
}
}
I'm working in the main page of www.recaccesorios.com and I'm struggling with a padding. The vertical distance between two elements is too big and I don't know why is doing that. I'll show you the inspection with Google Chrome:
As you can see, Chrome is telling me that the top padding is 0 or null, but in the image you can see that it isn't true. What is happening?
My horrible CSS (not the whole CSS, I can't put here more than 3000 lines...):
#galeria {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
#galeria > h5 {
text-align: center;
}
#noticias > h5 {
text-align: center;
}
#noticias a {
color:#555;
}
#noticias p {
text-align : justify;
padding-left:12px;
padding-right:12px;
}
#noticias {
height:292px;
}
#vistaPrevia {
position: absolute;
z-index: 6;
top: 40px;
display: none;
}
#galeria > img {
display: block;
margin-left: auto;
margin-right: auto;
}
#galeria > span {
margin-left: 5px;
}
#noticias {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: rgb(222,222,222);
background-color: rgba(222,222,222,0.8);
border: 1px solid #e5e5e5;
border-radius: 4px;
/* padding-bottom: 40px; */
width: 100%;
}
.td-galeria {
padding-right: 6px;
padding-left: 0px;
border-color:transparent;
width:50%;
height:300px;
}
.td-noticias {
padding-left: 6px;
padding-right: 0px;
}
I believe the issue is the reset on line 42 of the CSS file vertical-align: baseline; this seems to be causing your chrome issues.
This solves the issue:
#tablaInicio td {vertical-align:}
But it is strange.
EDIT:
Found out why it is strange; it is a JS script causing the extra height.
The Problem exists in line 42 of Style.css;
remove vertical-align:baseline;
and also correct
#tablaInicio td {vertical-align:}
We need to see your CSS to understand this better. But, I'm guessing you've declared the padding somewhere else in your code.
In your CSS file, change the padding value line to something like this:-
"padding: 0px !important";
the !important message means it will ignore any other values you try to set for padding.
I hope this helps.