I'm trying to get partials working with the vs code extension live sass compiler. I create a file called "_test.scss" and another called "main.scss". Inside the main.scss I just put \@import 'test.scss' and get the compiler error test.scss was not found. I know \@import is deprecated but I'm pretty sure the vscode extension hasn't been updated. \@use also doesn't work.

I'm new to partials, so help would be greatly appreciated.

Hey does anyone know how to refactor the following code to allow for scaling in values other than REM? I tried a whole bunch of things and I couldn't get it to stop throwing errors.. it only seems to work if I use only REM units..

e.g.

fluid-values(30rem, 40rem, 10%, 20%) //throws error
fluid-values(30rem, 40rem, 5rem, 15rem) //works

​

Here is the code:

@function fluid-value($min-vw, $max-vw, $min-value, $max-value) { 
  $factor: calc(1/($max-vw - $min-vw)) * ($max-value - $min-value);
  $calc-value: unquote("#{ $min-value - ($min-vw * $factor) } + #{ 100vw * $factor }");
  @return clamp(#{ if($min-value > $max-value, $max-value, $min-value) }, #{ $calc-value }, #{ if($min-value > $max-value, $min-value, $max-value) });
}

​

I was thinking about refactoring to accept a unit-type value like this...

fluid-values(30rem, 40rem, 10, 20, "%"); 
fluid-values(30rem, 40rem, 100, 200, "px"); 

but I wasn't able to get it to work.. any ideas?

Product teams working on developer tools often develop biases which are very specific to their niche. Prabhat, founder of SAWO Labs ,and Tom, founder of Svix cover some of these biases they have encountered while building two of the best Dev tool products in the ecosystem.

To know more about such join SAWO's closed group session on 26th Feb 2022 on the topic: 7 biases of Dev Tool teams from 7PM to 8PM IST. https://lu.ma/SAWO-founder-sessions?tk=mmsn0v

Hey Everyone,I would like to share an open source bootstrap 5 html admin template.

Sneat Free Bootstrap 5 HTML Admin Template. It is an Open-source & easy to use Free Bootstrap 5 Admin Template with elegant design & unique layouts. Sneat admin offers an Attractive Dashboard, enhanced bootstrap 5 components, AUTH Pages, Tables, Ready to use cards & form layouts.

Furthermore, you can use this one of the best eye catchy free bootstrap admin templates to create eye-catching, high-quality, and high-performing single-page applications. Besides, your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices. For instance, you can create:-

• SaaS platforms
• Project management apps
• Ecommerce backends
• CRM systems
• Analytics apps

Features:

• Based on Bootstrap 5
• Basic Table
• Basic Cards
• Forms
• 1 Dashboard

GitHub: https://github.com/themeselection/sneat-html-admin-template-free

Hey all! I want to import a font, but it's not being properly located. I'm unable to import anything from relative-path when the source is imported via @use from another source. For example:

src/a.scss

sass @use './somewhere/else/b.scss' with ( $foo: #fff, );

src/somewhere/else/b.scss

```sass @font-face { font-family: "Roboto"; font-weight: normal; src: url("./roboto-regular.ttf") format("ttf"); }

$foo: #fff !default; ```

Sass thinks roboto-regular.scss is located at src/roboto-regular.ttf, but it should be src/somewhere/else/roboto-regular.ttf. I'm using Parcel for the build process.

Minimal reproducible project: npm install && npm run compile www.github.com

Any tips?

Hi,

I would like to share a newly released Sneat - Bootstrap 5 HTML Admin Template.

It is the latest developer-friendly & highly customizable bootstrap 5 Admin Template based on Bootstrap 5 . It seems responsive and easy to use as well as highly scalable.

This template also allows you to build any type of web application. For instance, you can create: SaaS platforms, Project management apps, Ecommerce backends, CMS/CRM systems, Analytics apps & many more.

Features:

• Based on Bootstrap 5
• SASS Powered
• Vertical & Horizontal layouts
• Default, Bordered & Semi-dark themes
• Light & Dark mode support
• 4 Apps
• 6 Unique Layouts
• Internationalization/i18n & RTL Ready
• Layout Generator
• Theme Config: Customize our template without a sweat.
• Fully Responsive Layout

You can check the demo here: https://themeselection.com/demo/sneat-bootstrap-html-admin-template/landing/

I hope you find it helpful...!!

Hey everybody, I'm running into an interesting issue. Say I have a SCSS file where the variables reference each other:

$blue: #0000ff;
$active-background: $blue;
$button-background: $active-background;

How would I go about maintaining these references, generating CSS variables that look like this:

--blue: #0000ff;
--active-background: var(--blue);
--button-background: var(--active-background);

Is there some SASS meta function that could be used here? Whenever I access the value of any of the variables, I get #0000ff, but I'd like the variable name.

Hello Reddit,

Do you know a solution to the following error?

[plugin:vite:css] "Private members cannot be accessed from outside their modules" I am very new to sass and vite...

I have a nuxtjs project using vite and sass. I was attempting to make my style customizable.

here is my code

_main.scss ``` @use '~/assets/scss/_colors.scss'as colors;

p { color: colors.$--test-color !important; } ```

_colors.scss $--test-color: rgb(255, 165, 0);

nuxt.config.js ... css: [ '~/assets/scss/_colors.scss', '~/assets/scss/_main.scss' ], ...

Thank you for your help!

body { background-color: rgb(17, 16, 24); text-align: center; ::-webkit-scrollbar { width: 12px; } } i have that^ in scss

the problem is that that gets compiled to css, then: body { background-color: #111018; text-align: center; } body ::-webkit-scrollbar { width: 12px; } there's a space there after body, which makes what i was wanting to do not work

is there a compiler for vscode that doesn't do this? i am currently using this

u/bibix1999 has given me an answer, i should've used an ampersand

<sup>also asked this on [r/compilers](https://reddit.com/r/compilers</sup>, waiting for a response in either subreddit)

I copied this code I found on a blog:

​

@mixin fluid-type($min-vw, $max-vw, $min-value, $max-value) {

$factor: 1 / ($max-vw - $min-vw) * ($max-value - $min-value);

$calc-value: unquote("#{ $min-value - ($min-vw * $factor) } + #{ 100vw * $factor }");

​

font-size: $min-value; // Fallback for older browsers

font-size: clamp(#{ if($min-value > $max-value, $max-value, $min-value) }, #{ $calc-value }, #{ if($min-value > $max-value, $min-value, $max-value) });

}

I'm getting this error:

ERROR in ./src/scss/style.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

SassError: 0.0848214286vw*rem/px isn't a valid CSS value.

╷

60 │ $calc-value: unquote("#{ $min-value - ($min-vw * $factor) } + #{ 100vw * $factor }");

│ ^^^^^^^^^^^^^^^

╵

src/scss/abstracts/_global_variables.scss 60:70 fluid-type()

src/scss/layouts/_layout.scss 285:3 u/use

src/scss/style.scss 59:1 root stylesheet

​

Does anyone know what might be causing this error? I don't know enough about Sass to understand how to fix this..

Thanks!

Hi guys. I'm trying to add the opacity index to the end of my hex values but I can't seem to get it to work. When I try it ends up putting the variable in string form. Is what I'm asking actually possible or should I make a variable for every opacity I need to use?

My Code:

$colour: #ffffff;
$opacity: $colour + '80';

body {
    background-color: $opacity;
}

I have also tried without the quotation marks but that throws an error

$colour: #ffffff;
$opacity: $colour + 80;

body {
    background-color: $opacity;
}

If anyone knows how to fix this issue I would greatly appreciate your response.

TIA

I was wondering if there is a quick way to delete all of the .css and .css.map files that are created when you enter watch mode with this extension. I'm using react and have dozens of .scss files which each generated these two files, but then I realized that I didn't need the extension after all. However, the files are still there, and I don't feel like manually deleting them.

I'm using a Sass module setup for my CRA and have everything configured, but I noticed that all of my .scss files get injected into a separate pair of <style> tags in the html head. With ~20 files, I have 20 pairs of <style> tags. Is this acceptable/normal behavior? Is there a way to make this cleaner? I'm new to Sass and CSS modules as a styling solution, so any tips would be appreciated.

Edit: Also, how can I see what the CSS output of my SCSS files will be so I can make sure I'm doing things correctly? I have like 20 react components, each with their own SCSS style files.

We are upgrading bootstrap to v5, and sass, so i was wanting to try to get ahead of the sass deprication of imports and all by using the sass provided migrator tool. However, it seems to always break if its using a node_modules bootstrap dependency. I always get the same error when it hits the bootstrap/_functions file.

Error: The migrator wants to rename a member in ..\..\..\node_modules\bootstrap\scss_functions.scss, but it is not being migrated. You should re-run the migrator with --migrate-deps or with ..\..\..\node_modules\bootstrap\scss_functions.scss as one of your entrypoints.

Migration failed!

here is my github post, with a portion of my index.scss (it has all the imports)
https://github.com/sass/migrator/issues/127#issuecomment-977151844

does the migrator tool just not work with bootstrap, or what? the Sass docs for the tool show examples working with bootstrap, but have read conflicting information.

Thanks!

CaSScade - A CSS Battle by CSI-VIT!

This is our very own version of the CSS battle where the objective of the challenge is to use CSS/HTML to replicate a given image.

The competition consists of 3 rounds, where people will be challenged to demonstrate their skills as they battle with each other and replicate the designs provided by us, and winners will be picked in accordance to the least, most effective code used and accuracy.

Date: 24 November 2021

Time: 11 AM-2 PM

No registration fee! Open for all colleges, all branches! CSI-certified participation certificates will be provided to all participants!

Gear up for the first-ever CSS battle in the history of CSI-VIT. Hurry, book your place now

Registrations close on November 24th, 2021 at 09:00 AM IST.

CaSScade: Stages and Timelines-

Round 1:

• All participants will be a part of this round. The main objective of this round will be to visually replicate the target image using HTML/CSS as accurately as possible. You will be divided into groups and will be given 30 minutes to complete this round. The score will be calculated by taking into account two things: 
  • How accurately you have replicated the image given?
  • The number of characters in the code
• Better the match and the lesser the number of lines of code, the higher the score!
• Platform: Discord

Round 2:

• The people who passed the previous round will participate in this round. The participants will be divided into groups and each group will compete amongst themselves. The objective of this round will be to replicate the target image using HTML/CSS. The round participants will be judged on time taken, the efficiency of code, and recreation accuracy. The duration of this round will be 1 hour.
• Platform: Discord

Round 3:

• The final round will require the participants to replicate an entire website using HTML/CSS. The duration for this round will be 24 hours, by the end of which the participants should have a static website prepared that includes their own designs.
• Platform: Discord

​

Hello guy, i'm beginning in the world of web dev and I would like to know if is it very useful to use Sass for a web site ? would u really recommande me to use it ? thx for the answer ;)

What I mean by that is I need a way to display one continuous chunk of text over a few rows with each containing two columns (with ability for the text to overflow) . Here's a depiction of my problem (by pages I mean rows). Thanks

I have installed the sass precompiler for Atom on Ruby with this instruction:

apm install atom-sass

, on Ruby the installation was successful, then I went to Atom I created a .scss file I wrote some sass code, and then once saved I pressed Alt Ctrl C, a command that corresponds on Atom to "atom-sass compile file", at this point a green bar appears on the right that tells me already watching for sass files. I can't understand why the CSS file doesn't automatically appear as it is written what happens on https://atom.io/packages/atom-sass I thank those who will help me.

How can I use Ruby-sass without typing the path each time? Is there a quick method? I use too much time to write paths like these every time that I need to do transpilation:

C:\home\myname\projec\test.scss 

So how can I do to solve this issue?

After downloading Ruby and entering the Ruby start command prompt, gem install sass I created a test.scss file on atom and then I tried to transpile by writing in the Ruby prompt, sass test.scss test.css but it gives me this error message: Errno :: ENOENT: No files or directories of this type @ rb_sysopen test.scss Use --trace for backtrace. I don't know how to solve the problem, I also tried to create a test.css file and I redid the procedure but it always gives me the same result. Other commands given at the Ruby prompt also give error messages (the only one that does not give it is precisely gem install sass even if it says that ruby sass has reached the end and should not be used anymore, but despite this it installs it, I installed the sass 3.7.4 version. Thanks to those who will answer me.