Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 04 16:25
    nschonni labeled #3037
  • Dec 04 16:25
    nschonni labeled #3037
  • Dec 04 16:25
    nschonni closed #3037
  • Dec 04 16:25
    nschonni commented #3037
  • Dec 04 10:37
    derdeka commented #3037
  • Dec 04 06:54
    michaeljin89757 opened #3037
  • Dec 03 16:42
    986235024 opened #3036
  • Dec 02 18:50
    vielmetti commented #2647
  • Dec 02 18:45
    nrgapple commented #2647
  • Nov 30 17:44
    maviator closed #3035
  • Nov 30 17:43
    maviator opened #3035
  • Nov 30 10:27
    UnleashSpirit commented #2931
  • Nov 30 10:25
    UnleashSpirit commented #2931
  • Nov 30 10:03
    anon987654321 commented #2885
  • Nov 30 10:01
    anon987654321 commented #2916
  • Nov 30 10:01
    anon987654321 commented #2916
  • Nov 30 10:01
    anon987654321 commented #2840
  • Nov 30 09:58
    anon987654321 commented #2840
  • Nov 30 09:57
    anon987654321 commented #2840
  • Nov 30 09:56
    anon987654321 commented #2916
Aubrey Quinn
@aubrey-fowler
Hi all, what do you usually do for long file names for partials? e.g. _main-app-component.sass? or all underscore
The Jared Wilcurt
@TheJaredWilcurt
_mainAppComponents.sass
@aubrey-fowler
but it doesn't matter
you can name them whatever you want
camelCase, PascalCase, kebab-case, or snake_case all are work fine, just be consistent
jbockle
@jbockle
is there a way to simplify writing multiple classes like below in sass?
.text-hover-primary:hover {
  color: $primary;
}

.text-hover-secondary:hover {
  color: $secondary;
}

.text-hover-warning:hover {
  color: $warning;
}

.text-hover-danger:hover {
  color: $danger;
}
The Jared Wilcurt
@TheJaredWilcurt
$states: primary #AAF, secondary #0F0, warning #FA0, danger #F00

@each $state, $color in $states
    .text-hover-#{$state}:hover
        color: $color
The Jared Wilcurt
@TheJaredWilcurt
@jbockle
kjvelarde
@kjvelarde

For real, since I found Vue I have never touched React again, it is such a huge pain in the ass. Your sass is fine. you should ask the Reactiflux discord what's wrong with your react setup.

How about angular ?

The Jared Wilcurt
@TheJaredWilcurt
Same, I maintain an Angualr boilerplate, and everything they're doing is just catch up with Vue. Angular 9 (Ivy) is just now able to compete with Vue 2, and Vue 3 is coming out in the next month or so and will be twice as fast, half the dist size, and half the memory usage. Vue 3 is leaving React, Angular, and Vue 2 in the dust.
Plus the dev tools and the Vue CLI are dope
@kjvelarde
With that said, if Vue 2 had stopped all development a year ago, it would still be the best option today
At this point the only thing I would use instead of it is maybe Svelte if I had to squeeze out the maximum performance for some specific low-end device. But more realistically I would just write in vanilla JS by hand for that, which is what I do for all the libraries I maintain anyway
The Jared Wilcurt
@TheJaredWilcurt
And single file components are just amazing compared to Angular. In Vue I literally just write them out by hand. I have a snippet shortcut, but there's so little boilerplating I barely ever use it. But with angular you have to run a command line tool any time you want to create a new component so it can generate the NINE FILES for you ಠ_ಠ
<template>
  <div>
    <input v-model="name">
    My name is: {{ name }}
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      name: 'Jim'
    };
  }
};
</script>

<style lang="sass" scoped>
@import '_var.sass'

input
    color: $myColor
</style>
And Vuex is much simpler than NGRX
Vue excels at getting out the way and letting me just build stuff
The Jared Wilcurt
@TheJaredWilcurt
Note the <style lang="sass" scoped> you can do sass, scss, less, or stylus for meta languages. The scoped attribute means the styles will be scoped to this component. Every element in the template will get the same unique data-v-123456 attribute. The styles will output as input[data-v-123456]{color:#F00} to scope them just to this component. So they won't be global, and even child components would not be effected by them.
this approach increases the selector specificity by 1 point, which is the only real downside, and a very minor one. But from this it eliminates the need for things like BEM that use naming conventions as a form of namespaced scoping
Tonni
@HouCoder
Hi there, I have a question, on the release page of node-sass github page, the files listed as freebsd-ia32-57_binding.node I understand the freebsd-ia32- part, but I'm really confused by the number 57, could someone tell me the meaning of 57? thanks!
`
The Jared Wilcurt
@TheJaredWilcurt
That's the ABI (Application Binary Interface). Node's ABI 57 is for Node 8.x.x. https://nodejs.org/en/download/releases/
@HouCoder
Darin Hensley
@dman777

Hello. I need to write a node script that extracts computed sass variables into a file...preferably to css variables. Is it possible to use node-sass to get a computed values of variables?

like obtaining the value of $display-4

$ws-typography: mat-typography-config(
  $font-family: "Roboto",
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(56px, 56px, 400),
  $display-2: mat-typography-level(45px, 48px, 400),
  $display-1: mat-typography-level(34px, 40px, 400),
  $headline: mat-typography-level(24px, 36px, 400),
  $title: mat-typography-level(20px, 30px, 500),
  $subheading-2: mat-typography-level(16px, 24px, 400),
  $subheading-1: mat-typography-level(15px, 23px, 400),
  $body-2: mat-typography-level(14px, 21px, 500),
  $body-1: mat-typography-level(14px, 21px, 400),
  $caption: mat-typography-level(12px, 18px, 400),
  $button: mat-typography-level(14px, 36px, 500),
  $input: mat-typography-level(inherit, 1.125, 400)
);
The Jared Wilcurt
@TheJaredWilcurt
$x: 4

.a
    content: $x

.b
    $x: 5
    content: $x

.c
    content: $x

$x: 6

.d
    content: $x
that results in
.a { content: 4; }
.b { content: 5; }
.c { content: 4; }
.d { content: 6; }
@dman777
does that make sense to you?
The answer is no, because a Sass variable's value will be different depending on it's scope and point in execution.
You could create a Sass file that has classes that output the current value of the variable, then node-sass could process that file to CSS and you could write a Node.js script to read the file to extract the values.
Darin Hensley
@dman777
@TheJaredWilcurt ok, thank you
KGA
@AishGaurav
can anyone help me with a CSS here, I am looping though an array of buttons & want to show the selected button in a different color : https://stackblitz.com/edit/angular-vfxba4?file=src/app/button-overview-example.html
The Jared Wilcurt
@TheJaredWilcurt
@AishGaurav that's a JavaScript question. Not a Sass question. Just change the class if active
The Jared Wilcurt
@TheJaredWilcurt
https://jsfiddle.net/jehxorL0/ Here is an example with Vue
@AishGaurav
iniatse
@iniatse
hi
is there any way to watch a file via the node API?
when I do watch: true it has no effect
even tough it is listed as an option
iniatse
@iniatse
anybody?
The Jared Wilcurt
@TheJaredWilcurt
@iniatse from my understanding Node-Sass does not have a working "Watch" feature. You can combine node-sass with a tool like chokidar or you can try the newer Dart-based version of Sass (https://www.npmjs.com/package/sass)
iniatse
@iniatse
the dart-base version has this?
The Jared Wilcurt
@TheJaredWilcurt
it should have it in the CLI options, https://sass-lang.com/documentation/cli/dart-sass#watch
@iniatse
iniatse
@iniatse
@TheJaredWilcurt I'm using now fs.watch with the node-sass node API
works so far
The Jared Wilcurt
@TheJaredWilcurt
cool. long term though node-sass will not be recieving any updates, and is already missing newer features like @use. npm install sass will be maintained and is currently up-to-date.
iniatse
@iniatse
@TheJaredWilcurt I'm anyway already switching to somepthing else. I just need to support some code that I cannot refactor now right away
The Jared Wilcurt
@TheJaredWilcurt
:+1: