Questions tagged [sass]

Sass (Skillfully Extraordinary Style Sheets) is an innovative expansion of CSS, seamlessly incorporating nested rules, variables, mixins, and class extensions. This empowers developers to craft meticulously organized, easily maintainable, and endlessly reusable CSS code. Sass undergoes a compilation process, transforming into standard CSS. As a remarkable CSS pre-processor language, it thrives on embracing both customary CSS approaches and its unique syntax for coding captivating visual designs.

1 2 3 4 5 Next →

Challenges with compiling Next.js with Tailwindcss and Sass

I recently created a simple template using Tailwind for my Next.js project. Normally, I rely on Tailwind's @layer components to incorporate custom CSS styles. However, this time I wanted to experiment with Sass, so I converted my globals.css file to glob ...

Is the default animation duration of Compass being ignored?

After recently updating to Compass version 1.0.16, I started setting up basic usage of the new animation features. However, I encountered an issue where setting default values for different animation settings did not take effect. This led me to hard-code t ...

css animation sass compass-sass

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

javascript html css sass webstorm

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

css angular module sass angular6

Adjust the column count based on the screen size, Susy suggested

When using the Compass/Sass plugin Susy, you typically set the number of columns in the _base.scss file. I prefer to have 12 columns for a desktop view, but this may be too many columns for a mobile display. Is there a method to alter the number of column ...

css sass susy-compass

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

I am in the process of upgrading from Angular 12 to 13. Encountering this error, and so far I haven't been able to find a solution for it. Could someone please guide me in the right direction? Here is my package.json file: { "name": &quo ...

css sass angular-material angular13

Exploring the wonders of Next.js and its ability to incorporate

I am currently working on a Next.js (13.3.0) project and facing an issue with global styles that include animations. Here is the structure of my folders: https://i.stack.imgur.com/nM5xw.png All SCSS files are loaded through the master.scss file: @import ' ...

reactjs next.js sass css-animations

Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12. To address this problem, I have taken the following steps: Ensur ...

html css ruby-on-rails sass

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

css webpack sass

Setting up stylelint for SCSS styling

Currently, I am working on setting up stylelint for my sass project. Here's how my .stylelintrc is structured: defaultSeverity: warning extends: - stylelint-config-standard - stylelint-config-recommended - stylelint-config-sass-guidelines ...

npm sass yarnpkg lint stylelint

Next.js experiencing issues with applying styles from .modules.scss files

Recently, I initiated a new Next.js 13 application, Within this project, there exists a file named main.modules.scss .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } My intention is to utilize this file for styling ...

css reactjs next.js sass next.js13

What are the steps to transition from @zeit/next-sass deprecation?

Is there a way to transition and modify the next.config.js file to switch from using @zeit/next-sass to leveraging Next.js's built-in support for Sass? Check out this link for more information: https://www.npmjs.com/package/@zeit/next-sass const withS ...

javascript webpack sass next.js

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

css reactjs import sass next.js

IntelliJ is unable to locate the scss import when using the includePaths option in stylePreprocessorOptions

Having trouble with IntelliJ 2019.2.2 Ultimate not detecting scss imports from stylePreprocessorOptions - includePaths Here is the directory structure: https://i.stack.imgur.com/SQEDT.png In my angular.json file, I have specified: "stylePreprocessorOpt ...

angular intellij-idea sass

What is the process for enabling SASS line numbers using Yeoman's Grunt.js file?

Recently, I used Yeoman (1.4.5) to scaffold a new web application. Within my Gruntfile.js, I configured it as follows: ... // When requested, compile Sass to CSS and generate necessary files sass: { options: { lineNumbers:true, sourceMap: true, ...

css sass gruntjs yeoman-generator line-numbers

Replacing Material-UI with SCSS

In my current React project, I am utilizing MUI and Sass. The issue I am facing is that there are numerous scss files filled with !important declarations to override the MUI styles using Sass. To address this issue, I attempted to eliminate the !important ...

reactjs sass material-ui

Customize the drawer background in Vue Material

Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> <md- ...

css vue.js sass vue-material

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transform: ...

css sass hover border

Leverage Bootstrap's SASS variables within your React components for streamlined styling

Currently, I am utilizing Bootstrap along with SASS for my React project built using Next.js. The objective now is to integrate the SASS variables from Bootstrap into the scoped SASS modules of the components. /styles/style.scss @import "~bootstrap/s ...

reactjs twitter-bootstrap sass next.js

CSS styling is not being applied to buttons within Ionic 2

I'm completely new to Ionic and hybrid apps as a whole. I've been experimenting with a test app, but for some reason, none of the CSS seems to be working. Could someone please help me figure out what mistake I might have made? Here are my files: test.scss: ...

html css angular sass ionic2

CSS - Customizing the appearance of consecutive child divs

I'm struggling with adjusting the margin between two child divs when they follow each other. The current margin is set at 3rem, but I want it to be 1rem if both child containers have the class "narrow": Is there a way to achieve this without changing ...

jquery css sass drupal css-selectors

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting the ...

javascript css reactjs next.js sass

Encountered a Sass-loader error stating 'options has an unknown property 'indentedSyntax'' when attempting to upgrade Vuetify from version 1.5 to 2

I recently undertook the task of upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I diligently followed the provided guidelines, ensuring a complete installation. However, post-upgrade, whenever I run 'npm run serve', I am bombarded with nu ...

vue.js sass vuetify.js

What is the correct way to denote a CSS class in SASS syntax?

Can you show me how to code this in SASS? .solo:hover > .solo-pane, .solo-pane.active, .solo-pane.lighten { opacity: 0.5; } I'm having trouble separating the classes using commas. ...

css sass

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each component. ...

css angular sass

Issues with loading SCSS modules in NextJS

I'm experiencing some uncertainty regarding the issue at hand, as I have successfully completed this task multiple times in the past without any complications. It's possible that I made an error somewhere along the way. Here are the Product.js component an ...

reactjs sass next.js css-modules

Troubleshooting why SCSS styling is not properly applying to the active class in Next.js

Currently, I am in the process of learning Next.js and implementing SCSS for styling. While reviewing my work, I noticed that the styles are functioning well as shown in image 2 but encounter issues when using the `.active` class. https://i.stack.imgur.c ...

sass next.js

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

css sass

Exploring the functionalities of scss and minified files within Visual Studio 2017

I have very little knowledge of scss. In our Visual Studio 2017 solution explorer, there is a .scss file called Theme6.scss. When I expand it, I see a file named Theme6.css. Upon expanding that file, two more files are revealed: Theme6.css.map and Theme6. ...

css sass

Enhancing the appearance of the Switcher by framing it with

I've been working with the component package https://www.npmjs.com/package/react-switch-selector to create a design similar to this https://i.stack.imgur.com/voHqm.png Although I have made some progress, I'm struggling to add a border outline. H ...

html css reactjs sass border

Incorporate the newest version of SASS in your Nuxt project using the @

Currently, I am implementing Sass into my project. I have successfully installed "node-sass" and "sass-loader", allowing me to utilize imports, variables, and other features of Sass. However, I am encountering an issue with using "@use" to employ a @mixin ...

vue.js sass nuxt.js less

A guide on compiling Sass without using gulp and Laravel Elixir [SOLUTION]

If you encounter an error similar to this one: https://i.stack.imgur.com/ZqVeV.png You have come to the right place :) ...

php node.js laravel npm sass

Why does the error "Unable to resolve 'react-big-calendar/lib/sass/styles'" occur when using react-big-calendar with sass on Next.js?

When I tried to import 'react-big-calendar/lib/sass/styles' for my project using SASS, it resulted in an error stating: Module not found: Can't resolve 'react-big-calendar/lib/sass/styles' import { Calendar, momentLocalizer } from 'react-big-calendar'; imp ...

next.js sass react-big-calendar

How can I enable SCSS/SASS support on Parcel-Angular5?

I started a project using angular cli. My intention is to incorporate scss into the project. In the terminal of WebStorm, I entered : ng set defaults.styleExt scss I proceeded by renaming all the .css files to .scss and adjusted the imports accordingly ...

angular sass angular-cli parceljs

Align the text to the right within a display flex container

Below is the code snippet: <div className="listContent"> <div> <div className="titleAndCounterBox"> <div className="headerListTitle">{list.name}</div><br /> <div ...

html css sass flexbox

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

I am facing an issue with the gap between the navbar and carousel in my materialize design. I have implemented Vue components for each div and Laravel as the backend. Using Sass for CSS preprocessing, I attempted to adjust the margins for the body, navbar, ...

css laravel vue.js sass materialize

Exploring ways to customize the styles of MUI Accordion components in a Next.js project using CSS modules

I'm trying to customize the default MUI CSS for the accordion component using a CSS module. The issue I'm facing is that the class is dynamically added by MUI, making it impossible to target directly. Here's the solution I attempted, but it's not successf ...

css sass next.js material-ui css-selectors

Struggling with setting up Angular Material and SCSS configuration in my application -

Hey there, I encountered an error or warning while trying to launch my angular app. Here's the issue: ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build- angular/src/angular-cli-files/plugins/raw-css- loader.js!./n ...

angular typescript npm sass angular-material

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascript css reactjs sass next.js

Experiencing difficulties with running the prefixer script in npm

I'm facing issues while trying to run prefix CSS despite having installed the necessary npm packages like prefixer and postcss-cli in my development environment. When attempting to run the prefixer for my CSS file, I encountered some errors. Here's the err ...

css node.js npm sass node-sass

Transitioning from LESS to SASS involves adapting responsive breakpoints

Adapting from Less to Sass has been my current focus. I have defined responsive breakpoints in Less variables: /* Breakpoints */ @break1:~"(max-width: 570px)"; @break2:~"(min-width: 571px) and (max-width: 1002px)"; @break3:~"(min-width: 1003px)"; These ...

css responsive-design sass less mixins

Establishing dynamic event listeners in React and subsequently incorporating them in SCSS styling

Trying to customize my app with a Hook that detects whether it's the mobile or desktop version. I've managed to serve up two versions of components, but now I'm stuck on how to pass a variable to an scss file. Check out the code sandbox dem ...

reactjs sass

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

javascript html css vue.js sass

Error: Unable to locate the NPM module for grunt sass

Uh oh, it looks like the local Npm module "grunt-sass" is missing. Have you installed it? Executing the "serve" task. Executing the "clean:server" (clean) task. 0 paths have been cleaned. Executing the "generateConstantsFileWithConfig" task. Executi ...

node.js npm sass npm-install

Do Scss mixins have the ability to adapt to different screen sizes

In my CSS, I set different font sizes for different devices: For example: @media only screen and (min-width: 480px) and (max-width: 599px) { t-heading { font-size:14px; } } @media only screen and (min-width: 600px) { t-heading { font-size:24px; } } I ...

css responsive-design sass

Tips on updating CSS styles for navigation bar links in real time

Currently, my homepage displays a CSS content hover effect when the user interacts with the icons. However, I am facing an issue where all icons show the same text "home" on hover. How can I customize the text output for each individual icon/link? Your hel ...

html css sass

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

html css sass

Streamline copyright verification with Angular

We are currently working on an angular application that we plan to release as open-source. We make sure to include copyright information in every file, specifically in the .ts and .scss files. However, being human, there are times when we may forget to ad ...

angular typescript npm sass

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

Beginner: Bootstrap Sass 3.3.6 - Incorporating Javascript - Issue with Navbar Dropdown Not Expanding application.html.erb Head: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> ...

javascript css ruby-on-rails twitter-bootstrap sass

Having difficulty with installing node-sass in my react application

After installing locomotive-scroll, I encountered issues trying to install node-sass in my react app. When running the command npm install node-sass, I received an error with the message ERR_SOCKET_TIMEOUT. Furthermore, attempting to execute npm start resu ...

reactjs npm sass node-sass locomotive-scroll

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

css sass css-animations clip-path

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

angular sass bootstrap-4

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

css reactjs typescript sass

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascript css angular sass

Leverage the pre-defined Ionic Sass variables for optimal styling

Is it possible to utilize existing Sass Variables in Ionic 5 for our custom CSS classes? The specific variables I am referring to can be found here: https://ionicframework.com/docs/v3/theming/overriding-ionic-variables/ I'm interested in creating som ...

ios angular ionic-framework sass

The Yeoman project is canceling because it cannot locate compass

As I was following a tutorial from the book "JavaScript Frameworks for Modern Web Development" (ch. 3 on Yeoman) to set up Yeoman and create a simple project, I encountered an issue: After installing the Yeoman generator "modernweb" in git-bash (using npm ...

npm sass yeoman compass yeoman-generator

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

css jsp twitter-bootstrap sass

Styling in sass gets even more powerful when using custom selectors that are

Using these mixins makes it easy to work with BEM syntax in sass 3.3.2: =b($name) .#{$name} @content =e($name) &__#{$name} @content =m($name) &--#{$name} @content +b(menu) +e(item) color: grey +e(item) +m(alert) ...

css sass bem

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascript jquery html css sass

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

css apache fonts sass directory-structure

Turn off hover functionality for mobile and tablet devices

Is there a way to prevent hover effects on mobile and tablet devices for an SVG file used in the img tag? scss file: .menu-link:hover { img { filter: invert(40%) sepia(90%) saturate(2460%) hue-rotate(204deg) brightness(93%) contrast(93%); } .side ...

css svg sass hover media-queries

Insufficient column height when using CSS flex-grow property

I am facing an issue with my 3 flex columns that have varying text lengths, resulting in uneven heights. I have tried using flex-grow: 1; to make them match in height, but it does not seem to be working as intended. Can someone please help me identify what ...

css vue.js sass flexbox

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here's the cod ...

html angular sass angular-animations

SCSS: When hovering over one div, display a different div

My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate ...

html css reactjs sass

Creating a personalized version of Material UI with unique styles, and uploading it to my GitHub repository for universal reuse across all my projects

Seeking input on the best solution for customizing MUI themes in my React projects. Currently, I manually copy theme files from previous projects to maintain consistency in styling between MUI and my UI design. Looking to create a custom library based on M ...

reactjs sass material-ui themes

Remove JS Sass so that I can revert to using Ruby Sass

I recently installed SASS on my Mac, but I've been encountering some issues with it randomly crashing or not working properly. I never had these problems with the old Ruby version that was on my previous Mac. Now, I'm looking to uninstall SASS so ...

npm sass

Include a carrot icon on a navigation element that is currently active, ensuring it does not disrupt the position of the navigation icon within the container

I am working on a react navigation bar where I want to emphasize each navigation item with a carat when the user is on a specific URL or route. I have been trying to use the :after pseudo-class in Sass to add the carat, but it's not working as expected. Th ...

html css reactjs sass navigation

Is it possible to implement custom classes in @apply within a SCSS file in a Tailwind Next.js project?

Having trouble implementing a custom class overflow:inherit as @apply overflow-inherit in my next.js project with tailwind. It seems to be causing an error. Strangely, I can successfully use pre-built tailwind classes like @apply flex flex-col md:h-full h- ...

css sass next.js tailwind-css

Printing content from an Angular dashboard can be achieved by following a few

Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...

html angular angularjs sass angular-material

What is the best way to instruct npm to generate a .min.css file from scss?

Currently, I have setup a process to automatically compile CSS from SCSS using a JSON script. However, the issue is that the ".min" suffix is being removed during this compilation. Here is the output from the terminal displaying the script I am running and ...

css npm sass npm-scripts

Unable to view Bootstrap Icons in Gulp 4

I recently integrated the new bootstrap icons npm package into my project using Gulp 4, the latest version. Everything was installed successfully and was working smoothly. However, I encountered an issue when trying to declare the icon in my index.html fi ...

javascript css sass gulp font-awesome

What is the method for utilizing HSL instead of RGB in the global declaration of SCSS using the JavaScript API

This is how my next.config.js file is structured: // next.config.js const env = require('./site.config').env; const Colour = require('sass').types.Color; const {r, g, b} = require('./site.config').customProperties; const wit ...

javascript reactjs sass next.js globalization

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

css vue.js sass

The Angular project encounters a failure when attempting to run 'ng serve,' resulting in an emitted 'error' event on the worker

Resolved Issue - Update: It appears that the problem was due to an error in my CSS code: Previous: .title & .smaller { color: $dark-blue; font-family: "Roboto"; font-size: 20px; font-weight: 600; width: fit-content; margin: 0; ...

node.js angular npm sass angular-cli

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Within Ionic, the ion-title component contains its content wrapped in an additional div inside the shadow-dom. This particular div is designated with the class .toolbar-title. How can I target this div using a SCSS selector to modify its overflow behavior? ...

css angular ionic-framework sass shadow-dom

1 2 3 4 5 Next →

Newtab Q&A