SASS variable interpolation with React CSS modules

I'm working in a project where we are using React, we are writing our styles with SASS and then let webpack do the rest. We just recently started using CSS Modules (babel-plugin-react-css-modules to be exact) and the transition has been smooth, exc...
more »

2017-08-26 12:08 (1) Answers

Cannot disable SASS cache

I cannot prevent my /.sass-cache directory from being created. I am attempting this by running: sass --no-cache However running that doesn't do anything. When I pull up the help flag, this is what I get: Miscellaneous: -i, --interactive ...
more »

2017-08-08 21:08 (1) Answers

Bootstrap carousel scrolls over my fixed top nav

I have a fixed top navigation for a personal site I'm doing. I added a fairly large bootstrap carousel beneath this, but when i scroll down the carousel scrolls over the header hiding the nav. I've put a link to a version of the site hosted on github...
more »

2017-08-08 08:08 (3) Answers

scss function for animation keyframes

i would like to do a reusable sass function that makes it easy for me to write a @keyframes css animation without writing too much code but I'm not sure how to go about it, especially the math part. i have a div containing a single background image ...
more »

2017-07-27 14:07 (1) Answers

How do I fix slow, clunky CSS transitions?

I apologize if this has already been asked. I'm having a hard time finding an answer on my own. My CSS transitions are not very smooth. I've noticed this is becoming a pattern for me. I'm trying to figure out how to fix that. Is it faster to add/remo...
more »

2017-07-06 23:07 (1) Answers

How to color a grid row conditionally in Vaadin 8?

I want to change the color of a Vaadin grid row based on a value of a cell. I tried it as follows and did not work. SCSS @import "mytheme.scss"; @import "addons.scss"; // This file prefixes all rules with the theme name to avoid causing conflicts ...
more »

2017-06-30 10:06 (1) Answers

Class based condition SCSS / SASS

I want to change a color based on the ancestor class. What I want to obtain in CSS : section.container-story .story-head .content h2 { color:#FF0000; } section.container-story.category_1 .story-head .content h2 { color:#00FF00; } My SCSS...
more »

2017-06-15 09:06 (1) Answers

Change the order of HTML injected style tags?

Currently in my React, React Bootstrap, Webpack 2.0, Node/Express application I am trying to compile and load SASS as my main styling. Currently the style tags generated in my HTML are ordered such that my Bootstrap Normalize CSS appears in a style t...
more »

2017-05-01 06:05 (0) Answers

Halving All Numbers in SCSS Sheet

I have a SCSS drawing that I am working on using a large number of box shadows on one element. However, once I finished the drawing, I realized that I needed the drawing to be much smaller. Is there a way to halve all number values using a Sass funct...
more »

2017-04-25 02:04 (1) Answers

SASS magic : modify background url when selected

Dear internet citizen, I'm looking for magic. I got this situation when I need to change a background url from an icon to the same one but "-selected" (the color change). I'd love to have a code doing something like this : a#something { back...
more »

2017-04-24 15:04 (0) Answers

Ruby installed but sass won't install

I am trying to make my sass work, it was working fine but its has been a while since i worked on it, so today i wanted sass to watch my folder but that watch command didn't work. So i tired to check ruby version by ruby -version and i got reply ...
more »

2017-04-24 11:04 (1) Answers

Playing with scss functions

So I got the following code set up. Why is the last label not changing color from gray to red? When I add 1 to the totalTabs variable, it does change color, but that seems odd to me. Perhaps it's a small typo somewhere, but I'm not seeing it... <...
more »

2017-04-23 10:04 (1) Answers

Cutting down repeating code in Sass functions

I'm working on an HTML boilerplate that uses a lot of Sass to create a maintainable and easy to use code base. Part of that are a few functions: // Returns the scale value found at $key. @function get-type-scale($key) { $value: map-get($ty...
more »

2017-03-31 09:03 (2) Answers

Preloading background images

I'm building a page that loops through 3 different backgrounds, changing every 750ms. To do this, I'm adding a class to the body with the relevent background image, changing with JS. For the first loop through, they flash because the image has to loa...
more »

2017-03-24 12:03 (4) Answers

zurb Foundation Change Build Order

I'm using Zurb Foundation for Emails and noticing when I run Foundation watch, the inline style for Margin loads before margin. I'd like to reverse that. I have tried to change the order of classes in my sass file, but I have not discovered a way to...
more »

2017-03-23 19:03 (0) Answers

Trying to add SASS to a React application

I created a brand new React application with create-react-app and now I want to add SASS to it. I followed the instructions here. Basically I run npm install node-sass --save-dev and then added these two lines to my package.json file: "scripts":...
more »

2017-03-14 21:03 (1) Answers

laravel mix sass images not found/hash

I am working for the first time with Laravel. With the 5.4 version they introduced the laraval mix. I tried to paste my SASS of the static website (I compile this with gulp) into sass files in the resources folder. This goes all well, my SASS will be...
more »

2017-02-22 20:02 (1) Answers

If-IE mixin isn't passing CSS validator

So I'm pretty new to front end developing. I'm following a course for about 4 a 5 months now. But I'm a bit stuck with a IE mixin. The mixin if-IE mixin works great, see: @mixin if-ie { @media screen and (min-width:0\0) { @content; } @media al...
more »

2017-01-18 09:01 (1) Answers

sass compile only changed files

I have the next sass sctructure: _base.scss _variables.scss _header.scss _body.scss _footer.scss core.scss _fonts.scss _base.scss includes all except _variables.scss and _fonts.scss. core.scss includes _base.scss, _variables.scss and _fonts.scss. ...
more »

2017-01-12 14:01 (0) Answers

Sass Null Exception with no error message

I am trying to use scss with gradle to generate css files. However I get an error when running the gradle build The error I am receiving is Execution failed for task ':sassCompile'. > java.lang.NullPointerException (no error message) I have t...
more »

2016-12-21 18:12 (0) Answers