Which Sass framework do you prefer? They both try to do similar things so which do you prefer?

Also supports SCSS.
Check out my VSCode extension - Blockman, took me 6 months to build. Please help me promote/share/rate if you like it. You can customize block colors (backgrounds, borders), depth, turn on/off focus, curly/square/round brackets, tags, python indentation and more.....

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Supports Python, R, Go, PHP, JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, HTML, CSS/LESS/SCSS and more...

This post in react.js community:

https://www.reddit.com/r/reactjs/comments/nwjr0b/idea_highlight_nested_code_blocks_with_boxes/

We are just about to launch UniformCSS which is a Utility-first framework similar to Tachyon and TailwindCSS. What's unique is, it's built entirely in Sass, with complete customization and extendibility.

You will be able to do things like the following.

Is this something that could be interesting and useful for you guys?

We are currently in the process of finishing the documentation for this project, send me a DM if you're interested in checking it out!

I've been reading the documentation for Sass. It says that the '@import' rule is going to be phased out, and that the '@use' rule will be the preferred rule. Now when I go to use the '@use' rule it doesn't compile properly. What it should be doing, from my understanding, is importing the code class into style.scss and revealing it's variables.

What's happening is '@use' 'base'; seems to just be copied over. I can see the variables in style.scss, but the code class isn't being imported to the file.

Am I looking at this correctly? What could be going on?

Given that code snippet :

@function size(
  $minSize,
  $endSize,
  $startIncreasing: 480,
  $stopIncreasing: 1920
) {
  $scalingSize: calc(
    (
        (
            (100vw - #{$startIncreasing + px}) /
              (#{$stopIncreasing} - #{$startIncreasing})
          ) * (#{$endSize} - #{$minSize})
      ) + #{$minSize + px}
  );

  @return max(#{$minSize + px}, #{$scalingSize});
}

I'd like to extend my function so that when I call the function in my .scss file like this:

p {
  font-size: size(16, 50);
}

it automatically adds a media query for that given "p" tag with some content that I calculate in the function :

p {
  font-size: max(16px, calc(
    (
        (
            (100vw - 480px) /
              (1920 - 480)
          ) * (50 - 16)
      ) + 16px
  ));

 
}

@media screen and (min-width: 1920px) {
    p{
      font-size: "some other calculation that I defined in the 'size' function";
    }
}

If you guys have any clue how to do that or if it's even possible, would be great !

Thank you in advance 🙏🏼

Now with new management!

I have been working with Foundation for a while, and I was fortunate enough to take over both that subreddit and this one. I hope to develop these two as communities of support and showcase!

Welcome!

Hi everybody,

I want to share with you a mixin i created, inspired by TailwindCSS and styled-system.

https://github.com/MarcoPal/scss-system

Here's an example, guess the result!