Generated by SassMeister.com.

input.scss

// My existing WordPress Project that requires MDL

// Assign namespace above MDL base-ui scss import.
// If no $namespace is assigned before importing MDL base-ui,
// no namespace is added.
$namespace: '#project-defined .specificity';

// Import single MDL scss file from within node_modules (Mimmick MDL import)
// @import "~@masonite/base-ui/styles/style.scss";

// Mock MDL SCSS below

$namespace: '' !default;

/// Namespace selectors if needed.
/// Used for projects to define their own specificity.
///
/// @param string $namespace Selector string that will prepend all selectors.
///
@mixin namespace($selector: ''){
  @if ($namespace == '') {
    @content;
  }
  @else {
    #{$namespace} {
      @content;
    }
  }
}

// Wrap the top level imports inside of mixin or individual SCSS partials.
@include namespace($namespace){
  .product-card {
    width: 100%;
    max-width: 320px;
    max-height: 480px;
    margin: 0 auto;
    text-align: center;
  }
  .card-link {
    display: block;
    box-sizing: border-box;
    padding: 1rem;
    text-decoration: none;
    cursor: pointer;
  }
}

output.css

#project-defined .specificity .product-card {
  width: 100%;
  max-width: 320px;
  max-height: 480px;
  margin: 0 auto;
  text-align: center;
}
#project-defined .specificity .card-link {
  display: block;
  box-sizing: border-box;
  padding: 1rem;
  text-decoration: none;
  cursor: pointer;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}