Weird SASS compiling behavior - sass

I moved my dev environment over to a different VPS and am having a weird timing issue when I save a SCSS file I'm working on. Attached below is a screen shot to give you an understanding of what I'm trying to explain.
Each block of output is another save, with nothing being changed at all in the SCSS file. You'll see that it often doesn't end on "overwrite style.css" and sometimes errors when I know there isn't actually an error. This means I have to keep hitting save in HOPES that it lands correctly on overwrite, or else it outputs a blank .css file. Waste of time, and frustrating..
It also seems to be doubling up sometimes on a single save..
Any ideas?
http://goo.gl/nQK0Q
Snippet below starts at line 972:
li {
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
padding: 1em 0;
border: 1px solid #eff1f2;
border-top: 1px solid $hr;
&:hover {
background: #e7ebec;
border: 1px solid $hr;}
.img-wrap {
width: 12.188em;
text-align: center;
margin-right:1em;
padding: 1em 0;}
}
.text-box {
width: 26.688em;
padding: 1.1em 0 0 0;
h3 {
font-size: 1.5em;
text-transform: capitalize;}
p {
font-size: 0.75em;
color: #aabcc8;
font-weight: 600;
text-transform: uppercase;
padding: 0 0 .25em 0;
a {
text-decoration: none;
color: $blue;}
}
}

Related

Not being able to style <StripeCheckout>

This is the html:
<StripeCheckout className='payBtn' />
And this is how it looks right now:
And this is the .scss for it:
.payBtn {
display: block;
background-color: rgba(160, 255, 223, 0.596);
color: black;
font-size: 1.3rem;
line-height: 1;
font-weight: 200;
width: 100%;
margin: 0 auto;
padding: 1rem 0;
border: 0;
outline: none;
text-transform: uppercase;
cursor: pointer;
&:hover {
background-color: rgba(114, 250, 205, 0.699);
}
}
What I'm trying to make it look like:
what it needs to look like
Everything else on the page is styled according to the stylesheet. Even the size of the button of pay with card is. But the colors and stuff are not changing. Any help would be appreciated, thanks :D

Changing the button color after it is clicked

I would like to change the background colour of "After" to blue upon clicking, but no matter what it just doesn't show. I'm not sure what is wrong here in SCSS. Would really appreciate any advice!
Here's the JS Fiddle: https://jsfiddle.net/u1h9fe6v/
.grid-list {
--color: #f6f8ff;
--background: #2b3044;
--background-hover: green;
--background-active: blue;
padding: 6px 12px 6px 8px;
margin: 0;
display: flex;
outline: none;
position: relative;
border: none;
border-radius: 9px;
background: var(--b, var(--background));
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
--scale: 0.95;
--background-active: blue;
}
.grid-list:hover {
--b: var(--background-hover);
}
It looks like you can set the background color in the
".grid-list.animation.active {" style. Like this ...
.grid-list.animation.active {
--span-name: text-active;
--dots-name: move;
--lines-name: scale;
--lines-duration: 0.15s;
--lines-delay: 0.3s;
background: blue;
}

I keep getting a compiler error saying css no valid after double and triple checking I can't seem to find the error

#import '_colors.scss';
#import '_fonts.scss';
#import '_urls.scss';
#import '_mixins.scss';
html, body
height: 100%
body
display: grid
font-family: $clickme, $clickme-fallback;
color: $color;
a
text-decoration: none;
color: inherit;
.cta
position: relative;
margin: auto;
padding: 19px 22px;
transition: all .2s ease;
&:before
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 28px;
background: rgba($primary,.5);
width: 56px;
height: 56px;
transition: all .3s ease;
span
position: relative;
font-size: 16px;
line-height: 18px;
font-weight: 900;
letter-spacing: .25em;
text-transform: uppercase;
vertical-align: middle;
svg
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: $color;
stroke-width: 2;
transform: translateX(-5px);
transition: all .3s ease;
&:hover
&:before
width: 100%;
background: rgba($primary,1);
svg
transform: translateX(0);
&:active
transform: scale(.96);
I am trying to get to compile without any error codes and it appears that after several attempts it is not working I have tried several different methods and error codes keep appearing that no valid css is after every line will some one please help this is a final project and I need help getting it ready by monday night.
First of all remove .scss from the import statements.
If your file has .scss extension then you have to use brackets and semi colons but if it has .sass extensoon then you have to remove these semi colons
Then compile your file to css with any software like prepros or use to the sass command line.
Remember to link the css file to your html document.
Hope that it works

Watch infinite loop on using background

.checkbox-group {
position: relative;
padding-left: 30px;
input[type="checkbox"] {
height: 20px;
width: 20px;
margin: 0;
position: absolute;
opacity: 0;
left: 0;
z-index: 1;
&:checked {
+ .pseudo-checkbox {
background: red;
background: url("../../images/tick.png") no-repeat;
}
}
}
span.pseudo-checkbox {
height: 20px;
width: 20px;
display: inline-block;
border: 1px solid $input-border;
//background-color: #fff;
position: absolute;
left: 0;
}
}
When using sibling selector and background image, sass watch compiler goes into infinite loop (using laravel mix). Her i have included my sass. If I comment the background, the compilation works good.
Make sure to add the image to the original folder before compiling not the after compiling folder, i usually have the same problem but solve it by naming the before compiling img and the compiler will create new one it will name it images,

CSS3 Pie not working with SASS/Compass

I'm having trouble getting CSS3Pie to work. I've read several posts on SO and Google and still can't to seem to get it work.
I'm using SASS and compass to write my CSS so I'll post both SCSS and CSS outputs below.
SCSS:
$pie-behavior: url(PIE.htc);
$pie-base-class: pie-element;
#header{
background:#fff;
width:$full-width;
height:100px;
margin:$margin-center;
ul{
width:600px;
height:$nav-height - 2px;
padding:55px 0 0;
margin:0 0 0 250px;
li{
#include inline-block;
font-size:$font-size - 2px;
font-weight:bold;
padding:20px 10px;
}
a{
color:#282828;
text-transform:uppercase;
&:hover{
color:red;
}
}
}
#aabw{
background:url('../images/aabw.jpg') no-repeat;
height:190px;
width:110px;
position:relative;
z-index: 0;
float:right;
margin: 0 270px 0 0;
#include pie-element(relative);
#include box-shadow(#BBBBBB 0px -78px 6px);
}
}
Outputted CSS:
#header #aabw {
background: url("../images/aabw.jpg") no-repeat;
height: 190px;
width: 110px;
position: relative;
z-index: 0;
float: right;
margin: 0 270px 0 0;
behavior: url(PIE.htc);
position: relative;
-webkit-box-shadow: #bbbbbb 0px -78px 6px;
-moz-box-shadow: #bbbbbb 0px -78px 6px;
box-shadow: #bbbbbb 0px -78px 6px;
}
My PIE.htc is in the room directory (same folder as my index) and I'm trying to run it locally. I've followed the pie.scss file and nothing seems to work, it may be a case of me missing something blatantly obvious so hopefully someone might be able to spot something I'm missing?
Thanks
not sure, but try putting the PIE call after the box-shadow call.

Resources