scss help I need help understanding something with functions

I have 4 files. all partials and I do this in my

// _mixins.scss
@mixin button-style($style) {
  background-color: map-get($style, background);
  color: map-get($style, color);
  padding: map-get($style, padding, 1rem); // Default padding if not defined
  width: map-get($style, width, auto); // Default width if not defined
  height: map-get($style, height, auto); // Default height if not defined
  border: map-get($style, border, none); // Ensure no border is applied if not defined
  cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
  border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}

// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
 
$button-styles: (
  nav-button: (
    background: c.$primary-color,
    color: c.$secondary-color, 
    width: 100%,
    height: 100%,
  ),
);

.nav-button {
  @include m.button-style(map-get($button-styles, nav-button));
}

 // _breakpoints.scss
$breakpoints: (
    'xs': 0,
    'sm': 576px,
    'md': 768px,
    'lg': 992px,
    'xl': 1200px
  );
  
  @mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  }

@use './abstracts/index' as  *;
@use './components/index' as *;
@use './layout/index' as *;
@use './base/index' as *;

// _mixins.scss
@mixin button-style($style) {
  background-color: map-get($style, background);
  color: map-get($style, color);
  padding: map-get($style, padding, 1rem); // Default padding if not defined
  width: map-get($style, width, auto); // Default width if not defined
  height: map-get($style, height, auto); // Default height if not defined
  border: map-get($style, border, none); // Ensure no border is applied if not defined
  cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
  border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}

// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
 
$button-styles: (
  nav-button: (
    background: c.$primary-color,
    color: c.$secondary-color, 
    width: 100%,
    height: 100%,
  ),
);

.nav-button {
  @include m.button-style(map-get($button-styles, nav-button));
}

 // _breakpoints.scss
$breakpoints: (
    'xs': 0,
    'sm': 576px,
    'md': 768px,
    'lg': 992px,
    'xl': 1200px
  );
  
  @mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  }

@use './abstracts/index' as  *;
@use './components/index' as *;
@use './layout/index' as *;
@use './base/index' as *;

how do you make everything thing work for the button

78 Replies

althepal78OP•6d ago

as you can see there are different files just // to tell you them they are in folders as well

ἔρως•6d ago

https://sass-lang.com/documentation/at-rules/use/

⚠️ Heads up! A stylesheet’s @use rules must come before any rules other than @forward, including style rules. However, you can declare variables before @use rules to use when configuring modules.

althepal78OP•6d ago

I am confused at what this means

ἔρως•6d ago

you have to move all those @use to the top no exceptions all of them

althepal78OP•6d ago

the at use is in the main file my mistake

ἔρως•6d ago

althepal78OP•6d ago

// main or styles.scss @use './abstracts/index' as *; @use './components/index' as *; @use './layout/index' as *; @use './base/index' as *; that what it suppose to say i messed up by not -addint the comment

ἔρως•6d ago

ah, i see your mistake you are trying to use @use as an @import

althepal78OP•6d ago

by the way this is chatgpt's mistake I was trying to learn this and only a few of this works well you not suppose to use @import anymore i thought

ἔρως•6d ago

yeah, you are asking an hallucinating chunk of math to output something that it has limited training data for despite the shitty decision made by the project, you can use it until version 3.0

althepal78OP•6d ago

you must be an expert because I don't understand what that meant lol

ἔρως•6d ago

it's still in version 1.x im saying that chatgpt is bad at stuff it doesnt have in it's data if it didnt steal, it wont know about it

althepal78OP•6d ago

yeah I asked for the most modern version of scss so I can learn a little more but it seems I might not need something else lol I might need something else

ἔρως•6d ago

honestly, for this, i would stick with @import

althepal78OP•6d ago

LOL I thought it would be deprecated or something and wouldn't work properly

ἔρως•6d ago

you can use @use, but it is not a replacement for @import

althepal78OP•6d ago

I thought it was when you use @forward in an index file

ἔρως•6d ago

yes, it will be removed in version 3, but they are still in 1.28 or something

althepal78OP•6d ago

I learn to much and forgot most of it lol so I tried to just do the @use bs lol

ἔρως•6d ago

just give it a good ol' try and you will see how much easier it will be use @import for the styles you should use @use for functions and stuff you want to use in some olaces places

althepal78OP•6d ago

so what do I do

// main or styles.scss
@import './abstracts/index' as  *; //or 
@import './components/' as *; // or the whole folder?

@use './layout/index' as *;
@use './base/index' as *;

// main or styles.scss
@import './abstracts/index' as  *; //or 
@import './components/' as *; // or the whole folder?

@use './layout/index' as *;
@use './base/index' as *;

ἔρως•6d ago

no, delete the @use

althepal78OP•6d ago

no I ma just wondering if I use the @import like for the whole folder or the index

ἔρως•6d ago

if you use @import, you cant use as * it depends

althepal78OP•6d ago

so just @import 'folder' im on here because I got tired of cussing out chatgpt lmao

ἔρως•6d ago

you can do this:

.button {
  @import 'button';
}

.button {
  @import 'button';
}

and then you create a folder called button

althepal78OP•6d ago

okay I did not know I could do that

ἔρως•6d ago

and there you have an index.scss file

althepal78OP•6d ago

i have a folder call components with button partial in it

ἔρως•6d ago

yes and you forward them that should work, but it is so fucking messy

althepal78OP•6d ago

yes in index so that is what confuses me this is my over view

portfolio/
├── index.php
├── src/
│   ├── scss/
│   │   ├── abstracts/
│   │   │   ├── _breakpoints.scss
│   │   │   ├── _colors.scss
│   │   │   ├── _mixins.scss
│   │   │   ├── _typography.scss
│   │   │   └── _index.scss
│   │   ├── base/
│   │   │   ├── _reset.scss
│   │   │   ├── _base.scss
│   │   │   ├── _flex.scss      
│   │   │   ├── _grid.scss      
│   │   │   ├── _container.scss 
│   │   │   └── _index.scss
│   │   ├── components/
│   │   │   ├── _buttons.scss
│   │   │   ├── _cards.scss
│   │   │   ├── _hamburger.scss
│   │   │   ├── _navigation.scss
│   │   │   └── _index.scss
│   │   ├── layout/
│   │   │   ├── _header.scss
│   │   │   ├── _hero.scss
│   │   │   ├── _about.scss
│   │   │   ├── _projects.scss
│   │   │   ├── _contact.scss
│   │   │   ├── _footer.scss
│   │   │   └── _index.scss
│   │   └── main.scss
│   ├── js/
│   │   └── main.js (empty)
│   ├── css/
│   │   └── main.css (will be compiled from SCSS)
│   └── img/
       └── mylogo.jpg

portfolio/
├── index.php
├── src/
│   ├── scss/
│   │   ├── abstracts/
│   │   │   ├── _breakpoints.scss
│   │   │   ├── _colors.scss
│   │   │   ├── _mixins.scss
│   │   │   ├── _typography.scss
│   │   │   └── _index.scss
│   │   ├── base/
│   │   │   ├── _reset.scss
│   │   │   ├── _base.scss
│   │   │   ├── _flex.scss      
│   │   │   ├── _grid.scss      
│   │   │   ├── _container.scss 
│   │   │   └── _index.scss
│   │   ├── components/
│   │   │   ├── _buttons.scss
│   │   │   ├── _cards.scss
│   │   │   ├── _hamburger.scss
│   │   │   ├── _navigation.scss
│   │   │   └── _index.scss
│   │   ├── layout/
│   │   │   ├── _header.scss
│   │   │   ├── _hero.scss
│   │   │   ├── _about.scss
│   │   │   ├── _projects.scss
│   │   │   ├── _contact.scss
│   │   │   ├── _footer.scss
│   │   │   └── _index.scss
│   │   └── main.scss
│   ├── js/
│   │   └── main.js (empty)
│   ├── css/
│   │   └── main.css (will be compiled from SCSS)
│   └── img/
       └── mylogo.jpg

ἔρως•6d ago

the index.scss file is used when it exists in the folder that sounds sensible to me

althepal78OP•6d ago

yes I understand that. My confusion was trying to use the function on the stuff and use the most up to day version of sass but it seems like the world is behind lol

ἔρως•6d ago

honestly, the @use only causea confusion and makes things harder causes because you arent importing: you are creating a local set of functions and variables and if you want to use something from another file, you have to @use that file, again and again and again and again

althepal78OP•6d ago

I guess I am going to have to look at another video to truly understand shit . the @use is suppose to be like import but you can do things like colors as c; folder as * so I don't know so confused how chatgpt steals all this shit and then confuses itself lol

ἔρως•6d ago

for example, if you want the breakpoints, you need to @use '../abstracts'; inside every single file

althepal78OP•6d ago

oh am I suppose to put that @use in every file that might use it even if it indirect?

ἔρως•6d ago

EVERY SINGLE FILE BUT only the files that need it

althepal78OP•6d ago

I feell that lol

ἔρως•6d ago

if you dont need the layout stuff in a file, dont @use layout in that file but you will be typing @use a fuckton this is one of the many reasons why @use is nowhere near a replacement for @import

althepal78OP•6d ago

yes I know that yeah I understand that too with the no replacement. Like why if I use @use in the main file all of them just don't work so like @use 'folder' ; inside the style.scss file should work properly

ἔρως•6d ago

because it is local its only for that file

althepal78OP•6d ago

but if I did @import it would work?

ἔρως•6d ago

everything else needs to use @use for the same file, again yes, but without the as * everything you import is global that means that the variable $breakpoints exists for all files you @import

althepal78OP•6d ago

I understand why they separated it because some files use the same variable but this makes me almost not want to use it. Like is it even worth putting that shit together like this anymore

ἔρως•6d ago

as you said, @import is deprecated it wont be removed anytime soon

althepal78OP•6d ago

yes but I am saying should I just use css again only and forget sass lol

ἔρως•6d ago

but, you have to get used to the insanely inferior version, at some point nah, sass is too good for that however, you can write all of this very easily with css pure css

althepal78OP•6d ago

like I have this mixin and don't even know how to use i t

// _mixins.scss
@mixin button-style($style) {
  background-color: map-get($style, background);
  color: map-get($style, color);
  padding: map-get($style, padding, 1rem); // Default padding if not defined
  width: map-get($style, width, auto); // Default width if not defined
  height: map-get($style, height, auto); // Default height if not defined
  border: map-get($style, border, none); // Ensure no border is applied if not defined
  cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
  border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}

// _mixins.scss
@mixin button-style($style) {
  background-color: map-get($style, background);
  color: map-get($style, color);
  padding: map-get($style, padding, 1rem); // Default padding if not defined
  width: map-get($style, width, auto); // Default width if not defined
  height: map-get($style, height, auto); // Default height if not defined
  border: map-get($style, border, none); // Ensure no border is applied if not defined
  cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
  border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}

like border radius not working neither is padding but the colors are working lol I define the padding in my button as well lmao

ἔρως•6d ago

@use '../components/button';

@include button.button-style()

@use '../components/button';

@include button.button-style()

althepal78OP•6d ago

do I put that in this file too?

ἔρως•6d ago

or the as * and just @include the mixin no

althepal78OP•6d ago

// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
 
$button-styles: (
  nav-button: (
    background: c.$primary-color,
    color: c.$secondary-color, 
    width: 100%,
    height: 100%,
  ),
);

.nav-button {
  @include m.button-style(map-get($button-styles, nav-button));
}

// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
 
$button-styles: (
  nav-button: (
    background: c.$primary-color,
    color: c.$secondary-color, 
    width: 100%,
    height: 100%,
  ),
);

.nav-button {
  @include m.button-style(map-get($button-styles, nav-button));
}

I have that in the button scss though so i thought it would work like this

ἔρως•6d ago

no, you put it in the index file or wherever you are generating all the cas css

althepal78OP•6d ago

i have them in the index file as well but was trying to use it like this so I can make sure I use it explicitly

ἔρως•6d ago

like the main.css file

althepal78OP•6d ago

I have that in there as well like `@use './abstracts' as *;

ἔρως•6d ago

you can just create a mixin called style, then @forward in the index file with the prefix button

althepal78OP•6d ago

like I am saying the background colors and color work with no problem

ἔρως•6d ago

and then you have button-style in any file that @uses the index.scss file

althepal78OP•6d ago

i had the padding in there too but my default is not working regardless

ἔρως•6d ago

try adding it into a string interpolation i see why it doesnt work

althepal78OP•6d ago

im going to push this to git maybe you can see it better that way

ἔρως•6d ago

wait, i dont im at work i cant see much better if you can prepare an example with codepen or something, i will check later

althepal78OP•6d ago

https://github.com/althepal78/PortFolio you can't really do that with codepen because they don't separate files have fun at work

ἔρως•6d ago

oh, right try stackblitz

althepal78OP•6d ago

https://stackblitz.com/~/github.com/althepal78/PortFolio

ἔρως•6d ago

it seems the repo is private

althepal78OP•6d ago

oh it shouldn't be lol okay maybe now i can't see the project in the side window so I don't know what im doing on stackblits

ἔρως•6d ago

i tried opening it on my phone and it was a disaster

althepal78OP•6d ago

lmao I don't even know how to use that site lmao

ἔρως•6d ago

its fine, just a mobile vs desktop thing

althepal78OP•5d ago

no I don't know how to use the site itself so I don't know if it is going to work or not I am just -not going to use mixins because it is confusing to me

ἔρως•5d ago

you did everything right that website works once every blue moon, but i don't know an alternative like it by the way, you can use @forward "src/list" as list-*;

althepal78OP•5d ago

I am not even going to bother trying to learn that shit right now I am going to use the same layout but work with that later I also did this shit and it seems to work with all the files just being used like an import

@use "pages"; 
@use "base";
@use "abstracts";
@use "components"; 
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@use "pages"; 
@use "base";
@use "abstracts";
@use "components"; 
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

that is in the main.scss the funny thing is when it watches sass the import for the font is put on top of the css LOl

ἔρως•5d ago

that's because @use is not a replacement for @import also, i would avoid google fonts, and would try to find an alternative (there's something about it in #discussions or #resources )

althepal78OP•3d ago

Yeah Kevin downloads them instead and uses them a different way I don't mind right now

ἔρως•3d ago

honestly, i don't know how kevin does many things

Gaming

Programming

scss help I need help understanding something with functions

Did you find this page helpful?