How can I define multiple SASS/SCSS variables at a time? - variables

In-stead of defining multiple variables separately like:
$logo_text_color: $white
$menu_link_color: $white
$menu_icon_color: $white
Is there any way to define them together at a time; something like this?
$logo_text_color, $menu_icon_color, $menu_link_color: $white


Finally I have found a solution...
SASS:
=els($a: 1, $b: 2, $c: 3)
height: $a + px
width: #{$b}px
content: abc
.cool
+els
.things
+els($a: 100)
.stuff
+els($c: 29)
.other
+els($c: 29, $b: 54)
CSS:
.cool {
height: 1px;
width: 2px;
content: abc;
}
.things {
height: 100px;
width: 2px;
content: abc;
}
.stuff {
height: 1px;
width: 2px;
content: abc;
}
.other {
height: 1px;
width: 54px;
content: abc;
}

Related

What does "$root: &" mean in sass?

I'm trying to understand sass files of Splide ( https://splidejs.com/ ).
In many files there are codes like this one
.splide {
$root: &;
&--ttb {
> #{$root}__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
#{$root}__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
What the $root: &; means?

In your snippet, $root is just the name of the variable.
You could give it another name, like $foo.
$root: & is equivalent here to $root: .splide as & in sass refers to the parent selector.
It means that:
.splide {
$root: &;
&--ttb {
> #{$root}__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
#{$root}__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
Is equivalent to:
.splide {
&--ttb {
> .splide__pagination {
display: flex;
right: 1em;
bottom: 50%;
left: auto;
flex-direction: column;
transform: translate(0, 50%);
.splide__pagination__page {
width: $indicator-height;
height: $indicator-width;
}
}
}
}
And will compile to:
.splide--ttb > .splide__pagination {}
.splide--ttb > .splide__pagination .splide__pagination__page {}

How to pass dynamic content to Vue v-bind:style on #mousemove method

<div
class="BgContainer"
#mousemove="mouseMove"
v-bind:style="{
transform: 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)',
}"
>
I am trying to update a transform: matrix3d() style on mouseMove function
methods: {
mouseMove(event) {
console.log(event.clientX, event.clientY)
},
},
trying to learn Vue (Nuxt.js) and I am wondering what would be the best way to update this transform based on mouse position and update the transform on mouseMove. How can I achieve something like this where newX and newY are dynamic based on mouse position?
v-bind:style="{
transform: 'matrix3d(1.025,0,0,"newX",0,1.025,0,"newY",0,0,1,0,0,0,0,1)',
}"
EDIT - whole vue file
<template>
<div class="prop_scroller">
<div
class="BgContainer"
#mousemove="mouseMove"
v-bind:style="{
transform:
'matrix3d(1.025,0,0,' +
newX+
',0,1.025,0,' +
newY +
',0,0,1,0,0,0,0,1)',
}"
>
<i class="sacbg"> </i>
<div class="after"></div>
</div>
</div>
</template>
<script>
import VanillaTilt from 'vanilla-tilt'
export default {
data: function () {
newX: 0
newY: 0
},
mounted: function () {
// VanillaTilt.init(this.$refs.bg)
console.log(this.$refs)
},
methods: {
mouseMove(event) {
console.log(event.clientX, event.clientY)
},
},
}
</script>
<style lang="scss" scoped>
.prop_scroller {
position: absolute;
top: -50px;
right: -70px;
bottom: -60px;
left: -50px;
overflow: scroll;
}
.js-tilt-glare-inner {
backface-visibility: hidden;
}
.BgContainer {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
// object-fit: cover;
z-index: 300;
backface-visibility: hidden;
transform-style: preserve-3d;
top: 0;
right: 0;
bottom: 0;
left: 0;
i {
position: absolute !important;
top: -70px !important;
right: -70px !important;
bottom: -60px !important;
left: -60px !important;
background-size: cover;
background-position: center;
background-image: url('~static/mural-bg.jpg');
}
.MuralBg {
// animation: 1s appear;
margin: auto;
width: 100vw;
height: auto;
}
.after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 33, 42, 0.2);
animation: 1.2s fadeBgOut;
}
}
#keyframes fadeBgOut {
0% {
background-color: rgba(26, 33, 42, 0.8);
}
100% {
background-color: rgba(26, 33, 42, 0.2);
}
}
</style>

Try out with string template literals :
v-bind:style="{
transform: `matrix3d(1.025,0,0,${newX},0,1.025,0,${newY},0,0,1,0,0,0,0,1)`,
}"
or by concatenation :
v-bind:style="{
transform: 'matrix3d(1.025,0,0,'+newX+',0,1.025,0,'+newY+',0,0,1,0,0,0,0,1)',
}"
and your data property should be a function that returns an object :
<script>
import VanillaTilt from 'vanilla-tilt'
export default {
data: function () {
return {
newX: 0
newY: 0
}
},
mounted: function () {
// VanillaTilt.init(this.$refs.bg)
console.log(this.$refs)
},
methods: {
mouseMove(event) {
console.log(event.clientX, event.clientY)
this.newX=event.clientX;
this.newY=event.clientY;
},
},
}
</script>

How to Remove Numbers in Steps in PrimeNG?

I am using PrimeNG Steps. How to remove the numbers in steps?
I tried using the Default CSS Property.

component has no option for this ,but you can use css to hide the innerHtml by after pseudo-element
style.scss (global style)
p-steps{
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps .ui-steps-item .ui-steps-number {
color: #ccc !important;
}
}
demo 🚀
the style above will change the style for all p-steps components but you can use custom styleClass like this
template
<p-steps styleClass="dot-theme" [model]="items"
[(activeIndex)]="activeIndex" [readonly]="false">
</p-steps>
style.scss
.dot-theme {
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor ;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps-number {
color: #ccc !important;
}
}
demo 🌟

You can simply hide the text setting it's colour to transparent:
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
color: transparent;
}

Sass - using different variables in #each [duplicate]

This question already has answers here:
Creating or referencing variables dynamically in Sass
(7 answers)
Closed 7 years ago.
I have widths of different planets
$mercury-width: 20px;
$venus-width: 30px;
$earth-width: 20px;
and their names:
`
$planets: mercury, venus, earth;
#each $planet in $planets {
.#{$planet} {
width: #{$planet}-width;
}
}
it doesn't work.
expected result:
.mercury {
width: 20px;
}
etc.
How can I do that?

How about this:
$planets-width: (mercury: 20px, venus: 30px, earth: 20px);
#each $name, $width in $planets-width {
.#{$name} {
width: $width;
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
}
If you want both color and size you can use nested maps:
$planets-map: (mercury: (width : 20px, color: red), venus: (width : 30px, color : purple), earth:( width: 20px, color: blue));
#each $name, $properties in $planets-map {
.#{$name} {
width: map-get($properties, width);
color: map-get($properties, color);
}
}
Result:
/* line 3, ../scss/test.scss */
.mercury {
width: 20px;
color: red;
}
/* line 3, ../scss/test.scss */
.venus {
width: 30px;
color: purple;
}
/* line 3, ../scss/test.scss */
.earth {
width: 20px;
color: blue;
}

can't get grunt-contrib less to import properly

I have the following less
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
**.opacity(.6);**
}
and the following in my grunt file...
less: {
development: {
options: {
paths: ["default/less","default/less/bootstrap"]
},
files: {
"css/less.css": ['less/*.less']
}
}
}
and opacity declared in default/less/bootstrap/mixins.less
.opacity(#opacity) {
opacity: #opacity;
// IE8 filter
#opacity-ie: (#opacity * 100);
filter: ~"alpha(opacity=#{opacity-ie})";
}
but when I run grunt I get...
Running "less:development" (less) task
>> NameError: .opacity is undefined in less/sigature.less on line 61, column 5:
>> 60 position: absolute;
>> 61 .opacity(.6);
>> 62 }
Warning: Error compiling less/signature.less Us
--force to continue.

the problem is that you need to include mixins.less like this:
#import "bootstrap/mixins.less"; //I don't know you folder organizations
//..code...
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
.opacity(.6);
}

The previous answer put me down the right path. Instead of building all I needed to point at an individual Less file that contained the import. This appears to make it work.