Questions tagged [sass]
Sass (Syntactically Awesome Style Sheets) is an extension of CSS adding features like nested rules, variables, mixins and class extensions. This enables developers to write structured, manageable and reusable CSS. Sass is compiled into standard CSS. It is primarily a CSS pre-processor language that accepts both the CSS and its personalised syntax of writing visual design codes.
27,607
questions
2487
votes
16
answers
1.1m
views
What's the difference between SCSS and Sass?
From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support.
What's the difference with SCSS? Is it supposed to be the same language? Similar? ...
- 30.5k
1853
votes
6
answers
702k
views
Sass Variable in CSS calc() function
I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
...
- 37.3k
898
votes
44
answers
1.1m
views
How to fix "ReferenceError: primordials is not defined" in Node.js
I have installed Node.js modules by 'npm install', and then I tried to do gulp sass-watch in a command prompt. After that, I got the below response.
[18:18:32] Requiring external module babel-register
...
- 9,141
655
votes
23
answers
494k
views
Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0
I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node.js v15.0.1
Installed:
React v17.0.1,
node-sass v5.0.0,
Then I tried to import a blank .scss file to ...
- 6,713
598
votes
15
answers
464k
views
Import regular CSS file in SCSS file?
Is there anyway to import a regular CSS file with Sass's @import command? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to ...
- 42.1k
500
votes
2
answers
450k
views
Sass Nesting for :hover does not work [duplicate]
I've written this code, but it does not work. What is my problem?
.class {
margin:20px;
:hover {
color:yellow;
}
}
- 5,139
481
votes
6
answers
513k
views
Sass .scss: Nesting and multiple classes?
I'm using Sass (.scss) for my current project.
Following example:
HTML
<div class="container desc">
<div class="hello">
Hello World
</div>
</div>
SCSS
....
- 43.8k
436
votes
6
answers
402k
views
Including another class in SCSS
I have this in my SCSS file:
.class-a{
display: inline-block;
//some other properties
&:hover{
color: darken(#FFFFFF, 10%);
}
}
.class-b{
//Inherite class-a here
//some ...
- 33k
366
votes
18
answers
236k
views
Angular CLI SASS options
I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based on Ember-CLI.
I need to know the best way to handle SASS in a new Angular project. I tried using the ...
- 19.5k
356
votes
9
answers
348k
views
SASS - use variables across multiple files
I would like to keep one central .scss file that stores all SASS variable definitions for a project.
// _master.scss
$accent: #6D87A7;
$error: #811702;
$warning: #F9E055;
$valid: #038144;...
- 20.6k
354
votes
13
answers
191k
views
Using fonts with Rails asset pipeline
I have some fonts being configured in my Scss file like so:
@font-face {
font-family: 'Icomoon';
src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
asset-url('icoMoon....
- 7,136
301
votes
5
answers
187k
views
sass --watch with automatic minify?
Is there a way to run:
sass --watch a.scss:a.css
but have a.css end up being minified?
How would I avoid having to run a separate minification step as I compile my stylesheet?
- 22.9k
274
votes
7
answers
240k
views
Sass - Converting Hex to RGBa for background opacity
I have the following Sass mixin, which is a half complete modification of an RGBa example:
@mixin background-opacity($color, $opacity: .3) {
background: rgb(200, 54, 54); /* The Fallback */
...
- 7,181
270
votes
7
answers
107k
views
Why put in front of the file name "_" or "_" in scss/css?
Why put _ in front of the filename in scss?
_filename.scss - Why does it need _ ?
- 2,907
269
votes
17
answers
181k
views
Try reinstalling `node-sass` on node 0.12?
I would like to use google web starter kit. I installed node.js v0.12.0, node-sass & gulp.
And then ran:
$ sudo npm install
When I typed gulp serve then got this error:
Using gulpfile ~/web-...
- 2,691
268
votes
27
answers
501k
views
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Recently, when I compile my scss files I get an error. The error message says:
Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist
First, as the ...
- 12.2k
250
votes
25
answers
377k
views
Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"
I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'...
- 23.1k
247
votes
13
answers
201k
views
Is it possible to import a whole directory in sass using @import?
I'm modularizing my stylesheets with SASS partials like so:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import ...
- 21.5k
238
votes
34
answers
229k
views
Node Sass does not yet support your current environment: Linux 64-bit with false
Getting this error on Arch Linux with node-sass. I'm using it with gulp-sass.
Node Sass does not yet support your current environment: Linux 64-bit with false
Versions
$ gulp -v
[19:43:15] CLI ...
- 151k
235
votes
1
answer
419k
views
:after and :before pseudo-element selectors in Sass [duplicate]
How can I use the :before and :after pseudo-element selectors following the syntax of Sass or, alternatively, SCSS? Like this:
p
margin: 2em auto
> a
color: red
:before
content: ""
...
- 3,470
225
votes
13
answers
178k
views
Making a Sass mixin with optional arguments
I am writing a mixin like this:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
...
- 72.7k
223
votes
6
answers
246k
views
What is the difference between CSS and SCSS?
I know CSS very well, but am confused about Sass. How is SCSS different from CSS, and if I use SCSS instead of CSS will it work the same?
- 2,428
209
votes
17
answers
224k
views
Angular-cli from css to scss
I've read the documentation, which says that if I want to use scss I have to run the following command:
ng set defaults.styleExt scss
But when I do that and make that file, I still receive this ...
- 10.7k
193
votes
9
answers
229k
views
How do I use /deep/ or >>> or ::v-deep in Vue.js?
So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in ...
- 6,785
187
votes
9
answers
331k
views
Why don’t SVG images scale using the CSS “width” property?
HTML
<div id="hero">
<div id="social">
<img src="facebook.svg" alt="Facebook">
<img src="linkedin.svg" alt="...
- 2,687
183
votes
3
answers
73k
views
Vue CLI CSS pre-processor option: dart-sass VS node-sass?
When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler.
How do these compare to each other, to be more specific than declared in Vue docs?
...
- 11k
175
votes
22
answers
312k
views
Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88)
I have tried to install gulp-sass latest version with npm i gulp-sass --save-dev in the begining I got a lot of errors but later solved them. But whenever I try to run gulp I got this error:
Error: ...
- 8,000
175
votes
9
answers
136k
views
Change text color based on brightness of the covered background area?
I am looking for a plugin or technique that changes a text's color or switches between predefined images/icons depending on the average brightness of the covered pixels of its parent's background-...
- 3,210
170
votes
2
answers
48k
views
What are Compass and Sass and how do they differ?
I would like to start using Compass and Sass to speed up development. At the moment, I have installed Sass on a mac and instructed it to watch a Scss file for input, and a CSS file for generated ...
- 2,340
168
votes
9
answers
150k
views
Using Sass Variables with CSS3 Media Queries
I'm trying to combine the use of a Sass variable with @media queries as follows:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) ...
- 4,609
166
votes
3
answers
111k
views
How can I use custom theme palettes in Angular?
I want to use my company's brand colors throughout the app.
I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically ...
- 8,229
162
votes
13
answers
175k
views
Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
I used Node.js v16.13.1 and created a React application. I tried to use Sass, but when I tried to run it, I got this error:
Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
- 1,819
160
votes
6
answers
167k
views
Sass calculate percent minus px
I want to be able to do the following:
height: 25% - 5px;
Obviously when I do that I get the error:
Incompatible units: 'px' and '%'.
- 10.1k
159
votes
2
answers
49k
views
SassError: There is no module with the namespace "math"
I'm having trouble getting the math SASS library to work in a Vue app. It compiles with Dart Sass, and sass-loader. The Dart Sass version is 1.26.3, so the math module should work.
Module build ...
- 13k
150
votes
4
answers
115k
views
Calculate a percent with SCSS/SASS
I want to set a width in percentage in scss via calculation, but it gives me errors..
Invalid CSS after "...-width: (4/12)%": expected expression (e.g. 1px,
bold), was ";"
I want to do something ...
- 31.8k
147
votes
2
answers
188k
views
Sass and combined child selector
I've just discovered Sass, and I've been so excited about it.
In my website I implement a tree-like navigation menu, styled using the child combinator (E > F).
Is there any way to rewrite this ...
- 2,218
141
votes
5
answers
132k
views
Have a variable in images path in Sass?
I want to have one variable that contains the root path to all my images in my CSS file. I can't quite figure out if this is possible in pure Sass (the actual web project is not RoR, so can't use ...
- 3,981
136
votes
6
answers
56k
views
Sass negative variable value?
I have a couple of scss selectors where I use the same amount positive and negative, as in:
padding: 0 15px 15px;
margin: 0 -15px 20px -15px;
I'd prefer to use a variable for all the 15px amounts, ...
- 14.8k
135
votes
6
answers
131k
views
Placeholder Mixin SCSS/CSS
I'm trying to create a mixin for placeholders in sass.
This is the mixin I've created.
@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder {$css}
::-moz-...
- 12.1k
125
votes
8
answers
95k
views
How to resolve "You need to have Ruby and Sass installed and in your PATH for this task to work" Warning?
I am in the process of setting up a new Mac for work. I have installed Grunt & Grunt CLI globally. Then I did a npm install inside a project folder to install all dependencies.
No problems so ...
- 13.3k
122
votes
5
answers
67k
views
What does !default in a css property value mean?
The twitter bootstrap code has a lot of CSS properties with a !default at the end.
E.g.
p {
color: white !default;
}
What does !default do?
UPDATE
My bad for not being clear. I am using the ...
- 5,136
122
votes
6
answers
72k
views
Extending selectors from within media queries with Sass
I have an item class and a compact "modifier" class:
.item { ... }
.item.compact { /* styles to make .item smaller */ }
This is fine. However, I'd like to add a @media query that forces the .item ...
- 39.9k
121
votes
7
answers
121k
views
Creating or referencing variables dynamically in Sass
I'm trying to use string interpolation on my variable to reference another variable:
// Set up variable and mixin
$foo-baz: 20px;
@mixin do-this($bar) {
width: $foo-#{$bar};
}
// Use mixin by ...
- 2,174
120
votes
6
answers
254k
views
What does an "&" before a pseudo element in CSS mean?
In the following CSS taken from Twitter Bootstrap what does the ampersand (&) character mean?
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&...
- 3,826
117
votes
5
answers
54k
views
Sass combining parent using ampersand (&) with type selectors
I am having trouble with nesting in Sass. Say I have the following HTML:
<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">...
- 3,877
115
votes
3
answers
184k
views
Syntax for if/else condition in SCSS mixin
Hi I'm trying to learn SASS/SCSS and am trying to refactor my own mixin for clearfix
what I'd like is for the mixin to be based on whether I pass the mixin a width.
thoughts so far (pseudo code only ...
- 27.5k
115
votes
7
answers
51k
views
Is there a SASS.js? Something like LESS.js?
I have used LESS.js before. It's easy to use, something like
<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>
I ...
- 86.5k
114
votes
4
answers
72k
views
Is it possible in SASS to inherit from a class in another file?
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does ...
- 128k
113
votes
3
answers
59k
views
How to integrate CSS pre-processing within Eclipse? [closed]
I would like to edit SCSS files in Eclipse, preferably with syntax highlighting for .scss files.
I found these resources valuable:
http://sass-lang.com/editors.html - has no editor for .scss files ...
- 1,676
110
votes
7
answers
125k
views
Global scss variables for Angular components without importing them everytime
I do already have SCSS variables defined in src/styles/settings/_variables.scss and I am importing them into src/styles.scss, but still these variables aren't available for every single component.
Is ...
- 3,651