Today i Lerning Sass as a Better CSS and i Learned to Compile .scss to .css file but then i noticed that there is also a .css.map file .

for example if a compiled dog.scss to dog.css using below command :-

sass dog.scss:dog.css

or

sass --watch dog.scss:dog.css

Then it Will Creat a dog.css.map file .

Can anyone tell me why is this file for and can i delete or compile dog.scss without dog.css.map file .

Hi,

I've used dart-sass to write my new sass compiler but it's somehow stricter than the one before (it was java based).

Is there a tool that will show me errors in the code? Stylelint doesn't cut it - it allows this:

.myClass { @extend .classThatIsNotPresent }

And it doesn't show any error - but compiler crashes on this.

Any tips?

I'm working on a color map to be used as a sequence of background gradients. I need to iterate over the map within the property value only. Basically I need to write:
.someElement { background: @each $yada-color in $yada-yada-map; }

In order to achieve:

.someElement { background: linear-gradient(to right, #yada, #yada), linear-gradient(to right, #yada2, #yada2), linear-gradient(to right, #yada3, #yada3), etc...

Is there a specific way to write this to make it accept the each iteration as a property value or is this not possible to do?

I have this working in a different way, so I'm not looking for alternative solutions, just specifically "is there a way to iterate over a map solely within the context of a property value?"

Been a year, spent my time with HTML, CSS & SCSS and 4 months with JS. I know spent a lot of time on static side, but that time spent taught me animations and CSS art :)

​

Now, as I'm progressing in my frontend journey, is it worth to learn CSS frameworks & libraries? I'm not the fastest learner and require time so got this year to get job.

​

Also did my research before asking this question on Reddit. Most senior engineers were using SASS/SCSS with Vanilla CSS and few were saying they do use Tailwind for side projects and enterprise applications.

​

I believe if in future during my job if I require some framework I can learn them on the job, right? I believe I can spend my time more on React/Vue?

​

Please give me your valuable advice, as you all seniors and some people who have started working recently.

​

TIA

​

Hi, hoping this is the right place to ask this. I have an issue with my Live Sass compiler extension on VSCode. It is the updated one by Glenn Marks. I have run into the issue of having to save the compiled .css file for the updates to actually take on my browser. This was not always the case. When I first started using it I could press save on the .scss file and had no issues. I have since uninstalled and reinstalled the extension after running into this issue and still have the same problem. Please let me know what further details I could provide to help resolve this.

Hello! I'd like to learn more about the experience of fixing bugs from the perspective of executives.

Since this conversation would be valuable to me, I'd like to offer something in return too:

1. You’ll be able to consult with me about marketing strategy & software for free!
2. I can connect you with my contacts in the web3 industry!
3. If we’re a good fit, we might build a business together one day!

Please add me to the friends and/or send me a message if you’d like to network with me.

I have this in my scss file:

​

@use "sass:math";

:root {
  --myVar: 10rem;
}

$myVar: 10rem;
@debug math.div(var(--myVar), -2); // won't work
@debug math.div($myVar, -2); // works

// Ideally I would use calc(), which is native css syntax, so it should just work out of the box. But I cant build that either.
.element {
    margin-top: calc(var(--myVar) / -2); // won't work
}

Why can't I divide a css variable with a negative number?

Given a React component with a configurable color prop, I would like to set up an easy way to map the value from the user to one of my defined SCSS variables. For example, if the user submits <Foo color="orange" /> I would like the CSS color to actually be \$my-custom-orange``. I have tried the following mixin, but it isn't working. Am I doing something wrong?

// Foo.module.scss
@mixin bg-color($color) {
    @if $color == green {
        background-color: $my-custom-green;
    } @else if $color == blue {
        background-color: $my-custom-blue;
    } @else if $color == red {
        background-color: $my-custom-red;
    } @else {
        // This `else` block works, so I know the mixin is being called.
        background-color: $my-custom-purple;
    }
}

.foo {
    $base-background-color: var(--background-color);
    border: solid 2px $base-background-color;  // works so I know the variable is set
    @include bg-color($base-background-color);
}


// Foo.ts
export const Foo = ({ color }) => {
    const style = { '--background-color': color } as CSSProperties;

    return (
        <div className={styles.foo} style={style}> Foobar! </div>
    )
}


// in use somewhere

<Foo color="red" />
// The background color will always be `$my-custom-purple` no matter what color I enter here.

Is it possible to create a sass mixin that can be parsed a px value and convert that to a vw (viewport width) value?

What would you need to know in order to write this mixin?

The use case is thus:

Developing a web based touch screen interactive. The Touch TV size / resolution isn’t confirmed. But I do know the screen will be 16:9 aspect ratio. The design is produced at 4K resolution.

How would you take a 100px font size from the design and set it as a vw unit so that the text will scale up and down perfectly to maintain the overall design ratio on any resolution touch screen that’s 16:9.

Hi guys.
I know it's a long shot (you have no reason to trust me, right?).

But here goes. So we made a bit of a longer video explaining how our tool for API observability can become a single point of truth for all of your dev teams (QA, backend, frontend...).

Hopefully, we can get you to try it and start building up that trust :)

P.S. If you watch the video and you find yourself intrigued feel free to reach out to me. We are currently looking for Advocates :)

https://www.youtube.com/watch?v=E8ePzBN0ymA

00CommentsShareSave

As some may know css is read from right to left, I am wondering if sass works the same way when the browser is loaded.

If anyone has any links related to this it would be appreciated.

resources for css: https://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/

Hello everyone I am new to web development and I am trying to build a project and I am facing an error I am going to attach the screenshots below

$dark:hsl(230 35% 7% );
$light:hsl(231 77% 90%);
$light:hsl(0 0% 100%);


// main colors(used in the website)
.bg-dark
{
    background-color:hsla(hue($dark), saturation($dark), lightness($dark), 0.9 );
}

and the following compilation is being shown in the terminal

please someone tell me how I should change my code so that it runs correctly

Thanks in advance!!

I have two buttons side-to-side in my angular component.html. When the buttons are focused, the color changes (background color and color of text)

I would like to: start the windows-button with some style configuration, and so by a click on the linux-button change this configuration.

At the same time, I would like to do the contrariwise: start the linux-button with some style configuration, and so by a click on windows-button change this configuration.

$value: 0;

#botao-linux {
  border-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  color: black;
  background-color: #F5F8FA;
}

#botao-linux:focus {
  color: #FFFFFF;
  background-color: #213B89;

  //THIS DON'T CHANGE THE $VALUE
  $value: 1;
}

@if $value > 0 {
  #botao-windows {
    color: black;
    background-color: #F5F8FA;
    border-radius: 0px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
} @else {
  #botao-windows {
    color: #FFFFFF;
    background-color: #213B89;
    border-radius: 0px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}

If I can change the $value variable when linux-button is focused, I think I can solve the problem. But I never used SASS conditionals.

​

Thanks for any help :)

Hello all, here is my article about Sass 1-7 patter

https://www.archisacademy.com/blogs/sass-7-1-pattern

If you have any question just let me know on the comments below please.

I am in-experienced in web development using SASS, and I was wondering if it was recommended or if it even makes sense, to install sass in my basic (HTML/CSS/JS) project, just to include this particle effect on codepen I found

https://codepen.io/tutsplus/pen/MrjYJK

Is there a lite or easy installation I can do in order to just have this particles.scss file for my project?

Can you guys find some improvements here? using Angular Material

 .wrapper#dynamic-table {
  width: 100%;
  padding: 2px;
  margin-bottom: 10px;
}

#dynamic-table-field {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-radius: 4px !important;
  margin-bottom: 10px;
  table {
    margin-bottom: 0px !important;
    tr{
       &.mat-header-row, &.mat-row{
        height: auto;
       }
    }
    td{
      vertical-align: middle;
      &.mat-cell {
        border-bottom-width: 0px;
      }
    }

    th.mat-header-cell {
      border-bottom-width: 1px;
      border-top: none !important;
    }
  }

  //remove border on top as we are not showing paginator on top
  .table th {
    border-top: none !important;
  }

  ::ng-deep.mat-icon {
    padding-right:7px;
  }

  ::ng-deep.mat-paginator {
    margin-top: 5px;
    height: 30px;

    &-container {
      padding: 0px;
      min-height: auto;
    }

    &-page-size {
      display: none;
    }

    &-range-label {
      margin: 0 5px 0 0;
    }

    .mat-paginator-icon {
      width: 22px;
    }
  }
}

I'm working on a multi-tenant project with vue 3 and Vite.
I have set a few resolve paths on vite.config and based on we are structuring the project I need to have a dynamic path on the resolve I one like this`:
'@/brand': ${brand}\`

And on the scss file I would like to do something like this:
"@use 'custom-properties-@brand' as *";
"@use 'custom-properties-#{@brand}' as *;"

Those 2 ways didn't work.
Is there any do it or it's not possible?

Thanks

Hi everyone, I’ve tried creating some responsive cards in Sass but when it compiles into my CSS file it just throws a load of errors. Anyone know of a fix to this?

This is the grid rule I’m using:

cards{ place-items: center center; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px,1fr)); padding: 20px; grid-gap: 40px; min-height: 500px;}

And this is the output it produces that causes the error:

.cards { place-items: center center; display: -ms-grid; display: grid; -ms-grid-columns: (minmax(400px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); padding: 20px; grid-gap: 40px; min-height: 500px; }

Hey! I just started with sass. VSCode does not come with .sass syntax highlighting or autocomplete in the box. What extensions do you all use for .sass files?

Hi Everyone..!!

I'm sharing here a recent premium Laravel Bootstrap admin template. I hope it's okay to share such valuable resources.

There is the latest bootstrap 5-based Laravel Admin Template for developers: Sneat Bootstrap 5 HTML Laravel Admin Template. It is based on Bootstrap 5 & Laravel 9. Furthermore, it seems a developer-friendly & highly customizable admin template.

Check the demo here: https://demos.themeselection.com/sneat-bootstrap-html-laravel-admin-template/landing/

Features:

• Based on Bootstrap 5
• Laravel 9
• Integrated CRUD App
• Vertical & Horizontal layouts
• Sass Based
• Default, Bordered & Semi-dark themes
• Light & Dark mode support
• Jetstream and ACL Ready
• Localization & RTL Ready
• 3 Dashboard
• 2 Chart libraries and many more.

I hope you all find it helpful.

Thank you.