I have a problem using SASS with Live SASS Compiler

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.

Вернуться на верх