JAVASCRIPT против SASS / SCSS, STYLUS и LESS

Любая функция, которую вы получите от языка программирования для конкретной предметной области SASS/SCSS, STYLUS, LESS или любого другого, вы можете получить от CSS изначально, и если вы хотите использовать functions (= ​​миксины) или другие функции, которые не поддерживаются CSS, используйте стандартный веб-сайт под названием JavaScript :-)

Пример кода:

SASS

// _base.sass
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

/*******************************/
// styles.sass
@use 'base'

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property

.box
  +transform(rotate(30deg))
  background-color: base.$primary-color
  color: white

.message
  @extend %message-shared
  width: 600px / 960px * 100%

JAVASCRIPT

// base.css.js
module.exports = (var1 = 'font-stack', var2 = 'primary-color') => {
  const value1 = 'Helvetica, sans-serif'
  const value2 = '#333'
  const css = `
  :root {
    --${var1}: ${value1};
    --${var2}: ${value2};
  }
  body {
    font: 100% var(--${var1});
    color: var(--${var2});
  }`
  base[var1] = value1
  base[var2] = value2
  return { css, [var1]: value1, [var2]: value2 }
}
/*******************************/
// styles.css.js
const base = require('./base.css')()

const style = document.createElement('style')

const message_shared = `
  border: 1px solid #ccc;
  padding: 10px;
  color: #333`;

function transform (property) {
  return `
  -webkit-transform: ${property};
  -ms-transform: ${property};
  transform: ${property};`
}

style.textContent = `
.box {
  ${transform('rotate(30deg)')}
  background-color: ${base['primary-color']};
  color: white;
}
.message {
  ${message_shared}
  width: ${(600 / 960) *100}%;
}`