I am using SMUI with svelte and in SCSS I have set the theme colors: @use 'sass:color'; @use '@material/theme/color-palette'; @use '@material/theme/index' as theme with ( $primary: #ef8611, $secondary: color.scale(#8aace1, $lightness: 90%), $surface: #333, $background: #fff, $error: color-palette.$red-900 ); The value…
I need to pass class name from script to style <script lang="ts" setup > const className = ref('some-class') </script> <style lang="sass" module > .#{v-bind(className)}--dynamic pointer-events: none </style> In this case I get an error: Error: expected selector. .v-bind(className)--dynamic ━ error…
I'm working on a React project and I'm trying to make my header section more mobile-responsive. Currently, I have three links (Home, About, and Login) in the left section, a centered logo/title, and search and cart buttons on the right…
I'm looking to set some variables in bulma. Using dart sass (1.45.1 compiled with dart2js 2.15.1) results in an 'Undefined operation' error Error: Undefined operation "min(1216px, 100vw) - 64px". ╷ 20 │ max-width: min($widescreen, $container-max-width) - $container-offset The bulma source…
I am trying to use scss but tailwind is not compiling as expected. Thats how i build application.css "build:css": "tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css" Here is my application.scss; @import 'application_dock/colors.scss'; @import 'application_dock/pages/spots.scss'; @tailwind base; @tailwind components; @tailwind utilities; body {…
When running install.packages("sass") in Rstudio, the download succeeds but an error occurs in the compilation : ... g++ -std=gnu++14 -Wall -O2 -std=c++11 -I /usr/local/lib/libsass/include -fPIC -c -o src/ast.o src/ast.cpp In file included from src/ast.cpp:3: src/sass.hpp:72:43: error: ‘SASS_STYLE_TO_CSS’ was not declared…
I have some lists of SCSS variables which are used in mixins, can I create a 'master' list which the others inherit? $vars: ( main-colour-active: #0b8579, text: #424242, button-text: $white, font-family: $font-family-base, ); $nav: ( inherit $vars, background-color: $blue, );…
I have a navbar that I want to position to the right when a media queries are meet: Navbar element .Navbar { @include display-flex(space-between, center, row); background-color: $semi-dark-blue; padding: 1.125rem; // media queries for laptops @include query(laptop) { border: 1px…
I try to set different background color to namespaces, for that I use css variables and classes like this CSS body.workspace { $backgroundColor: #f1f4fa !default; &.admin { $backgroundColor: #e4daec; } } HTML <body class="workspace #{namespace}"> ... </body> And namespace is…
I have a container that contains random amount of images(1-3) and text. If there is one image, the image needs to take the whole width, if there are two half the width etc How can I implement such a thing?…