Questions tagged [sass]

0

votes
0

answer
13

Views

No animations on the default state

Hi here is my stackblitz-code which has animations of sliding left and right. So I wanted to see if we can control the default state without any animations. Like there shouldn't be any animation when panel is 'TRUE' and when we click the button the animations should work as usual.
Bob
1

votes
4

answer
1.4k

Views

Can't install node-sass

I am attempting to install node-sass and it just won't let me. I have tried updating npm. I put this in: sudo npm install -g node-sass and i get this (starting one line before the error): gyp verb build dir attempting to create 'build' dir: /Users/matt/node_modules/node-sass/build gyp ERR! confi...
Matt Wright
1

votes
1

answer
1k

Views

sourceMap with sass-loader and postcss-loader in Webpack

I'm trying to enable sourceMaps in webpack but there seems to be a problem with sass-loader and postcss-loader combination. With both sass-loader and postcss-loader enabled my console shows 'no source': But when I disable postcss-loader the sourceMap works fine and points to 'typography' file: webpa...
Tomarz
1

votes
1

answer
69

Views

CSS - Change Div background color depending on an image color inside the same Div

I want to change the background color of a div when hover over it, depending on an icon inside the same div. Do someone know what to use (CSS, Bootstrap ...) to do it in easy way, and how? That is an example link: https://appsource.microsoft.com/en-us/marketplace/apps And that is a picture if you do...
Ebraheem Alrabee'
1

votes
2

answer
129

Views

SASS - How can I assign two classes the same style except one property?

I have a SASS stylesheet and I want to assign the same styles for two classes (.class and .otherclass) except for one property (before:) which should have another value for .otherclass. This is the code I currently have: .class, .otherclass { p { font-family:arial; &before: @extend .class-one {} }...
Mar
1

votes
3

answer
56

Views

CSS/SCSS Custom tooltip effect

Hello guys I'm trying to create a custom tooltip, with a cool hovering effect. I found a code on the internet which does almost what I want. Below is the code .tooltip { position: relative; &__item { position: absolute; min-width: 100px; padding: 20px; visibility: hidden; opacity: 0; background: whi...
Cels
1

votes
1

answer
147

Views

Creating Themes using SASS (maps)

I'm new to SASS and I'm trying to give users the ability to pick different themes for a website. I created a map that looks like this: $theme-map: ( main-theme: ( primary: #007991, secondary: #55D3AE, tertiary: #D35555, gradientFirstColour: #007991, gradientSecondColour: #34EBE9 ), test-theme: (...
JuliaM
1

votes
0

answer
20

Views

Terminal outputting escape sequences

I've been using Terminal in macOS 10.12.3 to compile Sass to CSS and have been having a helluva time trying to figure out why the terminal's output is printed out with the literal escape sequences. When errors come up, it's difficult to read the output of what went wrong with all the /n's and /t's c...
fauxkno
1

votes
1

answer
1.3k

Views

Ionic fixed content at the bottom

I have created a login form for my app with ionic 3, when I toggle the keyboard the content at the bottom moves to the top part. This is my design for the screen when keyboard is not toggled. When the keyboard is toggled. My html mockup Forgot password Sign In Facebook New Here? Sign Up CSS for the...
Gerald Brigen
1

votes
0

answer
408

Views

Grunt | Could not find an option named “line-numbers” | dart-sass

i'm using grunt for compiling sass, whis was working fine for a long time but now, i'm facing this issue. Recently i clean installed my laptop and started it fresh, now i'm getting this issue. So any one can please help me with this. grunt.initConfig({ ... sass: { dev: { options: { style: 'expanded...
Arun_gok
1

votes
1

answer
65

Views

SASS doesn't listen

Good morning. Hello, Sorry in advance if the question has already been asked, but after two days of research I did not find any solution. My problem is the following, I reinstalled my linux server machine, all the installation went very well, I then installed ruby-full and SASS, but now when I run t...
Djihell
1

votes
1

answer
211

Views

Uneven grid layout without using JS

I would like to create something like this without js: With the added catch that when the screen size is below a certain size, then element B slots in between A and C. I tried doing it using css grid (which kind of works) but then realized the columns and rows are fixed. Meaning A would take as muc...
strangeQuirks
1

votes
1

answer
51

Views

How to use gulp to run SASS transpiling?

I am new to gulp and want to use it to convert SASS to CSS. I have a src folder which has some scss files deep inside, and I want to mirror it to the public folder but as css files. This it the gulp code var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('styles', function() { gu...
omega
1

votes
1

answer
712

Views

Imported Sass file can't find font file

I'm using gatsby-plugin-sass to include my sass files. I have a web-animations.sass file that imports _typography.sass. My _typography.sass has a font-face declaration like this: @font-face font-family: 'BrandonPrinted' src: url(../../global/fonts/brandonprinted-one-webfont.eot) src: url(../../globa...
Eric Johnson
1

votes
0

answer
265

Views

Angular Material Theming, changing colors programatically

I'm using custom theming as per the instructions HERE and it works great! Except I want my users to have the ability to choose their own colors. I can't seem to figure out how to programmatically change theme colors in my components. Specifically, I want to get the colors for my users from a databas...
Jus10
1

votes
0

answer
30

Views

Font-Awesome scss compiling badly

I imported font-awesome to a scss file. When I compile that scss file to css something goes wrong. Instead of .fa-sun-o:before { content: '\f185'; } I see .fa-sun-o:before { content: ''; } How can I fix it? The compiler I use is Gulp-Sass
user2657943
1

votes
0

answer
300

Views

gulp-sass is very slow in gulp 4

After updating the gulp version to gulp 4, gulp-sass is taking much time to watch and compile scss. It was fast with gulp version 3.9.1. Gulp-sass version is 2.3.2. Is there any solution? Note: Removing the sourcemaps didn't help.
Fathima Linsa K
1

votes
1

answer
216

Views

Converting Zurb Foundation Flex-Grid to XY-Grid (Sass)

I am implementing a site that was developed for us using Foundations' Flex-Grid layout. We really only got a couple pages put together and before I get started with extending to further pages I'd like to convert from the Flex-Grid to XY-Grid as Zurb is labeling their Flex-Grid as legacy. We're using...
yougotiger
1

votes
4

answer
2k

Views

Angular Dynamic Colors - SASS

Edit: I don't want to use the angular theming where we can use the predefined palettes. I want to use the custom colors for both the dark and light classes. Can we have a styles.sass( which is the main sass) file as follows: .light { $background:#ffffff; $text-foreground: #000000; $text-foreground-...
Shrikey
1

votes
0

answer
131

Views

Convert .css file into .scss file with using current available mixing and variables

My style.scss file has been deleted mistakenly and I don't have any backup. In my project still _mixins.scss and _variables.scss are available. Is it possible to generate style.scss again by using style.css file, with use of current _mixins.scss and _variables.scss? I tried some online tool css to...
Sandy
1

votes
0

answer
206

Views

Wrong URL in CSS

I'm using the latest of everything. I'm transpiling SASS to CSS and am referencing an image: body{ background: url('../images/ugly-car.jpg'); } The image gets changes according to my settings, but the path is incorrect after Webpack does its thing... The resulting CSS is: body{background:url(static/...
jBoive
1

votes
0

answer
515

Views

cannot use composes in *.scss files (react-css-modules) - Module build failed: TypeError: Cannot read property 'postcss' of null

when I try use composes in a class .topContainer i have error in console when building project: ERROR in ./node_modules/css-loader?{'sourceMap':true,'modules':true,'localIdentName':'[local]--[hash:base64:5]','importLoaders':2}!./node_modules/postcss-loader/lib?{'sourceMap':true,'plugins':[null]}!./...
Artemii
1

votes
1

answer
53

Views

How to tell Angular where to load font-face files from, for exemple, from /static folder

I'm using ng build with the --deploy-url command, to tell Angular where to load files from. I'm deploying angular as part of a Spring-Boot war, inside folder I created called /static, at root level of the war. My .js and .html files are found correctly, but all @font-face files are not being found (...
Wallace Howery
1

votes
1

answer
1.5k

Views

Using Sass with Django

Im looking for a reasonably simple toolset and workflow for incorporating Sass into my Django projects. Im predominantly backend focused and have just started investigating Sass, so bear with me. My initial idea was to keep things simple by just using node-sass without trying to incorporate Gulp, dj...
darkpool
1

votes
1

answer
279

Views

Sass compiling and browser-sync

I have this code for sass compiling: gulp.task('scss', function () { return gulp.src('./src/scss/**/*.scss') .pipe(scss().on('error', scss.logError)) .pipe(autoprefixer({ flexbox: true, grid: true, browsers: ['> 1%', 'last 5 years', 'Firefox > 20'] })) .pipe(gulp.dest('./src/styles')) .pipe(browserS...
Nat Davydova
1

votes
1

answer
300

Views

sass-loader is not compiling SCSS to CSS, just renders .CSS with SCSS formatting

Been wondering why my nested properties were not working when everything thing seemed to indicate that they should be. Looked at the CSS being used in the console's Sources tab and it is formatting the SCSS to CSS. So something like this in SCSS it just leaves as is: th { background-color: #d9d9d9;...
sockpuppet
1

votes
0

answer
118

Views

Error while using the color from sass file in ionic framework app

I am trying to use the color from sass file in my new ionic app. But, getting this error while doing so. This is my variables.scss file code: $font-path: '../assets/fonts'; $app-direction: ltr; @import 'ionic.globals'; $colors: ( primary: (base: #4486F9, contrast:#000), secondary:(base: #435d8c, con...
srikha
1

votes
0

answer
248

Views

Getting import tilde (~) to work in a Visual Studio Asp.Net core angular template app

I am currently attempting to get a Material design theme to import in my Angular 5 application, which, at the moment, is the Asp.Net Core/MVC Angular template found in Visual Studio 2017, upgraded to the latest version of Angular (5.2.1). I want to use the tilde method, as follows. @import '[email protected]
tone
1

votes
0

answer
277

Views

Edge :focus styles

Trying to get the pseudo class :focus to work in Edge. This is working in Chrome and Firefox, but for ADA reasons, need it to work in Edge. I can get :active and :hover to work, but what I need is :focus to work for keyboard navigation. This is what I've tried: /* Microsoft EdgeV13&14 CSS styles g...
Lastweek
1

votes
0

answer
40

Views

Scss map for animation

Help pleath, how to mate loop on scss for that HTML code .pot_st0 { fill: #15630D; } .pot_st1 { fill: #012D3F; } .pot_st2 { fill: #013D51; } .pot_st3 { fill: #01445F; } .pot_st4 { fill: none; stroke: #011F2B; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-m...
BlackStar
1

votes
0

answer
42

Views

Is there a better way to use SASS variables flexibly in media queries?

I've set up some variables in SASS as follows: // fundamental layout variables $raw-layout-var-1: 60px; $raw-layout-var-2: 200px; // calculated layout variables $calc-layout-var-1: #{$raw-layout-var-1} + #{$raw-layout-var-2}; I am attempting to use these variables with media queries so I can do some...
Brickers
1

votes
1

answer
63

Views

Sass assigning variables by reference

Let's take this example: $a: red; $b: $a; $a: white; body { background-color: $b; } This code compiles to: body { background-color: red; } I was expecting the background-color to be white like in Less. Is there a way to pass references when assigning variables in Sass ? Or is it the way the compiler...
Ruur
1

votes
1

answer
371

Views

node-sass error on any scss file change

I am having a really hard time with node sass (and any other sass software) which is simply giving me errors instead of output. To the point: every time I run --watch on scss file(s) it returns an error which I cannot find the answer to. Frankly, I have no idea what is going on as the scss file is a...
Radosław Podgórski
1

votes
0

answer
101

Views

when i compile my sass border-radius mixin it generate duplicate css value

My File structure here. My Mixin border-radius @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } @include into same file .wrapper{ @include border-radius(5px); } After compiling it give duplicate result...
Rakesh Shriwas
1

votes
1

answer
261

Views

Add media queries to Bootstrap 4 spacing generator

I'm working on a Bootstrap 3 project and have lifted over some code from the new Bootstrap 4 in order to have classes like my-1, pb-5 etc. It works fine for big screens. But when I look at the page using a small screen device the margins and padding are too huge. What would be a solution for this? H...
haxpanel
1

votes
1

answer
355

Views

smooth video progress bar update javascript

I have a custom video progress bar on my site which is working well. But the progression update is jumping between values and I'm trying to smooth it. HTML: SASS: .progress width: 100% height: 8px background: #fff position: absolute bottom: 0 .timeElapsed position: absolute height: 100% width: 0% ba...
Mathieu Ferraris
1

votes
1

answer
227

Views

Extending in a media query in Sass and Bootstrap 4

I am updating to the new Bootstrap version 4 which now uses Sass over Less, and my application that uses Bootstrap used the Less files directly rather than the fully compiled css distribution. But now I've hit a snag - I understand that Sass doesn't allow you to use an @extend within a @media query,...
Dean James
1

votes
0

answer
32

Views

install sass on windows getting error

I have installed Ruby on windows and now trying to install sass but it is showing following error. Tried every possible solution but of no use C:\Ruby25>ruby -v ruby 2.5.0p0 (2017-12-25 revision 61468) [i386-mingw32] C:\Ruby25>gem -v 2.6.8 C:\Ruby25>gem install sass ERROR: While executing gem ... (...
Manisha Chavan
1

votes
1

answer
1.6k

Views

iFrame block not showing up in the iPhone

I have a hybrid mobile app in Mendix. In one page of the app, I am displaying some data with text and also video or website URL embedded. Here we are embedding this website, and we also embed youtube URL here. The issue is, this embedded URL(video/website) shows up in a section on Android phone but...
romil gaurav
1

votes
0

answer
253

Views

how to add multiple themes to bootstrap

I want to add multiple color themes to bootstrap, how do I do that? - bootstrap.min.css - red.css is the red variant - blue.css is the blue variant With scss I (so far) can make red.css and blue.css, but both have the full bootstrap.min.css in it. That's not the right way to do it. I've read man...
Jos

View additional questions