I have a problem using SASS with Live SASS Compiler

Question

I am trying to use W3Schools CSS framework in web project. I am using VScode, Python , Django and the Live SASS compiler extension. What I want is to be able to use one or more of the W3Schools classes in my own CSS classes. I have downloaded the W3 CSS file and it is available locally on my computer. I am using @mixins, @include, @use and @extend. The following simple testing code works as I want

_mixins.sass

@use '../../PropertiesApp/static/css/w3'
    
    
$myButtonBackgroundColor: blue
$myButtonTextColor: white

@mixin myColor($myColor: $myButtonBackgroundColor, $myTextColor: $myButtonTextColor)
    background-color: $myColor
    color: $myTextColor
    @extend .w3-btn

base.sass

@use 'mixins' as m

.MyColor
  @include m.myColor

base.html

...
<!-- W3.CSS -->
    <link href="{% static 'css/w3.css' %}" rel="stylesheet">

<!-- My CSS-->
    <link href="{% static 'css/base.css' rel="stylesheet"  %}">

% block content %}{% endblock content %}
...

home.html

{% extends "base.html" %}

{% block content %}

<button class="MyColor" > Push me </button>

{% endblock Content %}

This gives me a button styled as I expect. What it also gives me is base.css which not only contains my style rule

.MyColor {
  background-color: blue;
  color: white;
}

it also gives me in that base.css file 1921 lines of W3Schools CSS styles.

So my question is how do I just get from W3.CSS the particular class that I want to use e.g. .w3_btn?

I renamed w3.css to _w3.css which should prevent the compilation of the file into css but it made no difference.

Any suggestions appreciated.

PS I am very new to this so please make the answer simple to understand for me, thanks.

IT goldman · Accepted Answer · 2025-10-05 10:46:13Z

0

From the docs: "The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together."

So when you @use a CSS file it is included as a whole. And indeed, the W3Schools.CSS framework is just a CSS file.

The thing you are looking for, perhaps, is CSS Tree Shaking but it's not supported in SASS.

answered Oct 5 at 10:46

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I have a problem using SASS with Live SASS Compiler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related