How to solve while writing the code that show Warnings
Everything works.. except warning for the code shown below.
*#-webkit-keyframes mymove {
from {right: 0px;}
to {right: 500px;}
}*
Using px after 0 is not needed and results in warnings in some IDEs. Try changing 0px to just 0.
Related
I am compiling a SCSS file and it seems to remove my comments. What command can I use to keep all the comments?
>SASS input.scss output.css
I see two types of comments in my SCSS.
// Comment
and
/* Comment */
What is the difference?
As #Roy said above, multi-line comments (/* */) are kept in resulted css, but it depends on format you are using to pre-process your SASS.
If you are using compact mode, or any other 'CSS minifier', you should better use
/*! important comment */
These comments are kept in the compact(minified) versions of your CSS as well.
Example:
html {
/*! important comment */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Result (compact, minified version):
html{/*! important comment */-webkit-box-sizing:border-box;box-sizing:border-box}
The difference between the two type of comments is pretty easy:
// Some comment for a single line
and
/* This is
a multiline comment
for large descriptions */
According to the officials docs of SASS, you can only use the multiline comment option to preserve it into a compiled output file.
Like Sass, SCSS supports both comments that are preserved in the CSS output and comments that aren't. However, SCSS's comments are significantly more flexible. It supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.
SCSS also uses // for comments that are thrown away, like Sass. Unlike Sass, though, // comments in SCSS may appear anywhere and last only until the end of the line.
So the following CSS:
/* This comment
should be kept
and not be thrown away */
.class {
margin: 0 auto;
}
// This comment will be thrown away
.extra-class {
color: blue;
}
will be compiled into:
/* This comment
should be kept
and not be thrown away */
.class {
margin: 0 auto;
}
.extra-class {
color: blue;
}
To fix your compilation problems, you need to convert the // to /* */ comments.
I'm wondering how the 0 margin on the last child is supposed to come in.
I've got:
body {
#include outer-container;
.content-main.with-sidebar { #include span-columns(8);}
aside { #include span-columns(4); }
}
Body is centered with a max max width -- both .content-main and aside are getting the correct widths, but neither are getting the :last-child { margin-right: 0;} that they're supposed to. There's other stuff in body, but it's the only parent they've got.
Clearly I'm not doing something right -- but the fact that they're getting widths at all seems like it would indicate that everything is #importing correctly.
With thanks --
Without looking at your HTML I can only guess that those aren't actually the last-child. For cases like this there is the omega() mixin to use. Look here for the documentation: http://neat.bourbon.io/docs/#omega
I want a 1000px wide container with 12 columns seperated by 20px gutters.
So I entered the exact pixels:
$total-columns : 12;
$column-width : 65px;
$gutter-width : 20px;
$grid-padding : 0;
$container-style: static;
I end up with these columns:
width: 6.77966% /*(calculated: 67.7833px)*/
margin-right: margin-right: 1.69492%; /* (calculated: 16.9333px) */
I am totally out of clues what is going wrong here. I got the feeling I am missing something very basic.
Any insight welcome.
Thx
Susy was initially built to manage fluid grids, so that's the default setting. If you want static grids, just change the $container-style variable to static:
$container-style: static;
That should do it!
Ok, I found my mistake.
As mentioned above I am using susy with drupal's omega 4 theme. I created a separate file _grid.scss which contained only the grid definitions:
.grid-1 {
#include span-columns(1, 12);
}
What I did not know was that I had to add the column and width definitions in that file as well. So I always ended up with default settings.
Sorry for the disturbance :)
I'm using Susy/Compass/SASS for a simple responsive grid on my current project. However, the Compass compiler won't compile Susy's at-breakpoint mixin. Here's my grid:
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1) {
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
}
+at-breakpoint($break-2) {
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
}
When Compass tries to compile, I get an error: error screen.sass (Line 20 of _grid.sass: Invalid CSS after "($break-1) ": expected expression (e.g. 1px, bold), was "{")
identical screen.css.
If found a previous question similar to mine that suggested the compass-susy-plugin was the culprit. I have removed that (not sure that I had it to begin with) and installed the Susy gem again to be safe, but I still get the error.
Has anyone had this or a similar problem? Thanks in advance for your help!
Susy does support the indented Sass syntax. The problem is you're currently using a hybrid of both syntaxes. Try this:
#import "susy"
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1)
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
+at-breakpoint($break-2)
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
Notice there are not curly brackets after the at-breakpoint() mixins. Just indent.
I found the problem. Susy doesn't support SASS's indented syntax. Boo!
I added in tons of curly braces, semicolons, and #includes to fix it.
UPDATE:
OK, the problem was not support for the SASS syntax. It was my use of the curly braces in the indented syntax! For some reason, my brain decided that the code block would need to be in braces since it would be passed to a mixin. My mistake and my apologies to the devs of Susy.
I'm trying to use tween max and superscroll script, to handle opacity of my content while scrolling.
This works like a charm in chrome, safari, ff, ie9 and ie10.
However, I have an issue with ie8.
You can see the problem in this page : http://www.promenade-sainte-catherine.com/localisation
When scrolling down in ie8, the menu on the left changes its color to become white. This is okay, and once the animation is finished, it becomes green again.
This is my css :
body #menuGaucheContainer #menuGauche .logoPSC {
position: relative; zoom:1;}
/* line 270, sass/partial/_global.scss */
body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche .logoPSC #log2 {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
position: absolute;
top: -109px;
left: 75px; }
And this is the tweenmax call
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#img2Localisation'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#log2'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
If I remove the "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);" line. Then it works good, but nothing have an opacity of zero at the beginning of the page.
If I add css:{opacity:X, alpha:X}, nothing changes,
If I change {css:{opacity:0}} to {css:{alpha:0}}, it kind of works, but I still have some issues.
Does anyone have any idea ?
Thanks
I also had this issue with a new version of Greensock, and it's not because the plugin, but because of CSS. The error is in the beginning statement:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
While this is perfectly ok if you don't want to support IE7, it will break TweenMax's animation rules. The fix is to add the IE5-IE7 css rule, even if you won't support IE7 in general:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
It looks like you're using a VERY old version of the GreenSock files (TweenMax). You should definitely update - that may fix the problem right there. http://www.greensock.com/?download=GSAP-JS Otherwise, try tweening to opacity:0.99 instead of 1 solves things for you. But again, I'm pretty sure that updating will help because if my memory serves correctly, this particular scenario had a workaround applied in a TweenMax update a while back.