Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 03 23:56

    nex3 on color-4

    [WIP] Color spaces (compare)

  • Oct 03 23:01

    nex3 on floating-point.integrate

    (compare)

  • Oct 03 23:01

    nex3 on main

    [Floating Point] Integrate the … (compare)

  • Oct 03 23:01
    nex3 closed #3408
  • Oct 03 22:37
    nex3 synchronize #3408
  • Oct 03 22:37

    nex3 on floating-point.integrate

    Code review (compare)

  • Oct 03 22:16
    nex3 edited #3408
  • Oct 03 22:14
    nex3 synchronize #3408
  • Oct 03 22:14

    nex3 on floating-point.integrate

    [Floating Point] Integrate the … (compare)

  • Oct 03 22:09

    nex3 on floating-point.integrate

    [Floating Point] Integrate the … (compare)

  • Oct 03 22:09
    nex3 review_requested #3408
  • Oct 03 22:09
    nex3 opened #3408
  • Oct 01 01:12

    nex3 on color-4

    [WIP] Color spaces (compare)

  • Oct 01 00:33

    nex3 on color-4

    [WIP] Color spaces (compare)

  • Sep 28 23:38

    nex3 on color-4

    [WIP] (compare)

  • Sep 28 21:59

    nex3 on poc.isolates

    [PROOF OF CONCEPT] Fix a few bu… (compare)

  • Sep 27 21:07

    nex3 on poc.isolates

    [PROOF OF CONCEPT] Run each com… (compare)

  • Sep 23 21:04

    nex3 on main

    Fix typo in variable name (#339… (compare)

  • Sep 23 21:04
    nex3 closed #3396
  • Sep 22 22:52

    sassbot on 1.55.0

    (compare)

artart37
@artart37
P.S. Sorry for the late response.
The Jared Wilcurt
@TheJaredWilcurt
Sass was created in 2006 by Hampton Catlin. He wrote it in Ruby. Over time new people... ya know what,I have slides for this. https://docs.google.com/presentation/d/1Zg9987Po-9Ds_WGuHwuF9OeeMedhEISAtDhwWcIhiBg/edit#slide=id.g3b52de659a_1_46
The Jared Wilcurt
@TheJaredWilcurt
dart-sass is an a Sass interpreter written in Dart. If you write code in dart, you can pull it in as a library. However most people use Node as part of their frontend development. most do an npm install sass to use the JS version of dart-sass.
artart37
@artart37
Thank you, @TheJaredWilcurt . I am now reading "JUMP START SASS" by HUGO GIRAUDEL & MIRIAM SUZANNE, but will have a look at your slides as well.
The Jared Wilcurt
@TheJaredWilcurt
Miriam is cool
I was just referring to the slides in that deck related to the history of Sass. not the whole slide deck
13-22
artart37
@artart37
Thank you, @TheJaredWilcurt , already sent the request.
The Jared Wilcurt
@TheJaredWilcurt
what request
artart37
@artart37
Screenshot_1.png
It says that I do not have access to the file.
sorry, thought I sent the public link before. that should work
artart37
@artart37
Thank you, much appreciated. Will indeed examine: )
The Jared Wilcurt
@TheJaredWilcurt
nope, sent the wrong link again
artart37
@artart37
Last question. So as far as I am working on a JavaScript project and install Sass from npm, I don't need to be concerned with Dart Sass, right?
okay... NOW it should work
artart37
@artart37
It does, 27 slides
Thank you!
The Jared Wilcurt
@TheJaredWilcurt
correct. Dart-Sass is just where the new features are written, then, it is automatically converted to JS and published under the sass Node module. you can look at the documentation for how to use it. or if you use Gulp there is Gulp-Sass, or webpack has the Sass-Loader, etc.
artart37
@artart37
Fantastic! Thank you so very much, @TheJaredWilcurt , for clarifying & answering my questions ! Awesome!
The Jared Wilcurt
@TheJaredWilcurt
27 has the "History" slides. 30 is the newer sliders. I removed the history part because most people weren't interested in it during my talks and it slowed the pacing
artart37
@artart37
Noticed that : Will try to absorb all the info and share: )
The Jared Wilcurt
@TheJaredWilcurt
:thumbsup:
artart37
@artart37
Thank you, again. I have been using Sass for a while but at existing projects - never took the time to understand it:D. Now trying to understand it in its core to be able to set up styling for one of my projects in a good way.
Abdelrahman Abdelfattah
@blackPeppper
hi
The Jared Wilcurt
@TheJaredWilcurt
:sunrise:
yo
Abdelrahman Abdelfattah
@blackPeppper
Hi i want some new features like documentation (you can use docusarus)
new features like conditional import, autoprefixer , JIT complier , official Vscode extensions with full intellisense
and a variable will called compress takes a Boolean and at compile every class has the same property take it like extend at rule it's very useful for components
@apply directive like in tailwind
1 reply
The Jared Wilcurt
@TheJaredWilcurt
@spicestudio I'm not sure what you are asking. Is there a specific question you have? It sounds like you just want various tooling, which isn't really related to Sass directly
Abdelrahman Abdelfattah
@blackPeppper
i want to use range and add auto in my map
The Jared Wilcurt
@TheJaredWilcurt
@spicestudio I'm not sure what you're asking again. I can see your Sass Map, and it contains an "auto": auto and many other values, but I don't know what your goal is. https://www.sassmeister.com/gist/d9b02802323a103c2148e77961821f23?token=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&scope=gist,read:user
perhaps you should write out the CSS you are trying to produce first and then work your Sass toward that
Abdelrahman Abdelfattah
@blackPeppper
$preset-color: (
  pink: (
    50    : $pink-50,
    100   : $pink-100,
    200   : $pink-200,
    300   : $pink-300,
    400   : $pink-400,
    500   : $pink-500,
    600   : $pink-600,
    700   : $pink-700,
    800   : $pink-800,
    900   : $pink-900,
  ),
);

@mixin useShades($shade-end: 600,$shade-start: 100 ) {
  @each $color, $shades in $preset-color {
    @each $shade, $val in $shades {
      @if ($shade >= $shade-start and $shade <= $shade-end) {
        .text-#{"" + $color}-#{$shade} {
          color: #{$val};
        }
        .bg-#{"" + $color}-#{$shade} {
          background-color: #{$val};
        }
      }
    }
  }
}
i mean i want make a range
but add auto value
The Jared Wilcurt
@TheJaredWilcurt
@mixin useShades($shade-end: 600, $shade-start: 100, $auto: true) {
  @if ($auto) {
    .auto {
      auto: 'auto'
    }
  }
  @each $color, $shades in $preset-color {
    @each $shade, $val in $shades {
      @if ($shade >= $shade-start and $shade <= $shade-end) {
        .text-#{"" + $color}-#{$shade} {
          color: #{$val};
        }
        .bg-#{"" + $color}-#{$shade} {
          background-color: #{$val};
        }
      }
    }
  }
}
Is that what you mean?
Abdelrahman Abdelfattah
@blackPeppper
like this
.py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

.py-2 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-3 {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.py-4 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-5 {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.py-8 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-9 {
  padding-top: 2.625rem;
  padding-bottom: 2.625rem;
}

.py-10 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-11 {
  padding-top: 3.375rem;
  padding-bottom: 3.375rem;
}

.py-12 {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}
i want to add range for making the classes
and i want the auto
or any value is not a number
i already maked a map with range but i couldn't add the auto value
I think that is what you want
Actually you could probably simplify these 3 in that example
    $className: map.get($sectionMap, class);
    $properties: map.get($sectionMap, property);
    $values: map.get($sectionMap, values);
Abdelrahman Abdelfattah
@blackPeppper
‪_basket.scss - fruitUI - Visual Studio Code‬ 28_06_2022 10_05_04 ص.png
should convert
form using mixins to use css-load
as conditional import
if i replaced the css-load to regular @import the error goes
The Jared Wilcurt
@TheJaredWilcurt
That's because @import is the old way of doing things, when everything was globally scoped, if you use the new way, variables are scoped. I don't know which file needs access to that variable, but you'll need to provide it to it some how.
Abdelrahman Abdelfattah
@blackPeppper
every file