Make one variable double the value of the other with SASS - sass

Im using SASS. I need on value to be double another value so the logic is this:
.one {
padding: 'value';
}
.two {
padding: 'value times 2';
}
So it could be this:
.one {
padding: 2px;
}
.two {
padding: 4px;
}
Or this:
.one {
padding: 10px;
}
.two {
padding: 20px;
}
How can I write this?


If you want a value you can reuse, you need a variable.
$my-padding: 1em;
.one {
padding: $my-padding;
}
.two {
padding: $my-padding * 2;
}

Related

CSS margin loop incrementing by X amount each time

I wonder if it is possible to do this with SCSS? Incrementing by X each time.
It is tricky because the -s or -md needs to be updated instead of the number.
#for $i from 1 through 6 {
.u-marg-t-#{$i} {
margin-top: 0px + ($i * 8);
}
}
Aside from this not even counting correctly, is a #for the best approach, here?
Plain CSS output
.u-marg-t {
&-xs {
margin-top: 8px;
}
&-sm {
margin-top: 16px;
}
&-md {
margin-top: 24px;
}
&-lg {
margin-top: 32px;
}
&-xl {
margin-top: 43px;
}
&-xxl {
margin-top: 50px;
}
}
.u-marg-b {
&-xs {
margin-bottom: 8px;
}
&-sm {
margin-bottom: 16px;
}
&-md {
margin-bottom: 24px;
}
&-lg {
margin-bottom: 32px;
}
&-xl {
margin-bottom: 43px;
}
&-xxl {
margin-bottom: 50px;
}
}

You could use a list with the suffixes you want to use and iterate through inside your for loop. Here's an example:
$sizes: xs, sm, md, lg, xl, xxl;
#for $i from 1 through 6 {
.u-marg-t-{
&#{nth($sizes, $i)} {
margin-top: 0px + ($i * 8);
}
}
}
$sizes is your list with the suffixes. Inside the loop I used the function nth($list, $i) to get the item at position $i in your list.

How to use last:child?

I'm working with sass, and my code doesn't work.
I would like to take off the last ":after" (pipe) but I can't.
Thank You
.l-footer-top {
.nav {
a {
color: $green;
padding: 0rem 0.5rem;
text-transform: uppercase;
&:after {
content: '\00007C';
color: theme-color('primary');
}
&:last-child:after a {
content: none;
}
}
}
}

Try something like this:
.l-footer-top {
.nav-item {
a {
color: $green;
padding: 0rem 0.5rem;
text-transform: uppercase;
&::after {
content: '\00007C';
color: theme-color('primary');
}
}
&:last-child a::after{
content:none
}
}
}
Your last-child is a <li> not an <a>

How to remove the duplicated of selectors using SASS

ul,
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.default,
ol.default {
padding-left: 1.5em;
margin-bottom: 0.75em;
}
ul.default {
list-style-type: decimal;
}
ol.default {
list-style-type: disc;
}
As you can see, code above has so many duplicated CSS selector how to remove these duplications using SCSS correctly?

You can use & and do like:
ul, ol {
list-style-type: none;
margin: 0;
padding: 0;
&.default {
padding-left: 1.5em;
margin-bottom: 0.75em;
}
}
ul.default {
list-style-type: decimal;
}
ol.default {
list-style-type: disc;
}

Appending to class name via nesting with attribute selector

I have the following sass:
.list {
&__button{
cursor:pointer;
display: block;
padding: 4px;
border:1px solid $color4;
outline: none;
&__square {
border: 1px solid $color1;
width:12px;
height:12px;
}
&__text {
padding-right: 5px;
color: red;
}
}
&__button[state-selected="true"] {
.list__button__text {
color : $color1;
}
}
}
I have to use the full name of the class to get this part to work:
&__button[state-selected="true"] {
.list__button__text {
color : $color1;
}
}
Is there any way to simplify this part? Something like:
&__button[state-selected="true"] {
&__text {
color : $color1;
}
}
But this gives an error: Invalid parent selector for "&__text": ".list__button[state-selected="true"]".

Using SASS to extend selectors with elements

I'm working on an SCSS stylesheet, and I have a rule that looks something like this:
.footer-link-row {
color: red;
ul& {
padding: 0;
}
}
I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?
--Added--
To clarify, the eventual CSS I want out of this is:
.footer-link-row {
color: red;
}
ul.footer-link-row {
padding: 0;
}

You want something like the following:
ul {
padding: 0;
.footer-link-row {
color: red;
}
}
The ampersand is used to require that both selectors match
a { text-decoration: none;
&:hover { border-width: 1px }
}
// compiles to
a {
text-decoration: none;
}
a:hover {
border-width: 1px;
}
If you want the ul.footer-link-row try
ul {
&.footer-link-row {
padding: 0;
}
.footer-link-row {
color: red;
}
}
Your clarification indicates that you need two scopes.
ul {
&.footer-link-row {
padding: 0;
}
}
.footer-link-row {
color: red;
}

Resources