It seems like my scss is turning off ordered list styles by default, which seems a little strange / annoying. Can anyone explain why it would do that?
This is the line that was mysteriously added to my css:
/* line 24, C:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
A little splunking showed that was the result of these lines in the _utilities.scss file:
ol, ul {
#include reset-list-style; }
// Reset the list style of an element.
#mixin reset-list-style {
list-style: none; }
I'm fixing this issue by adding:
ol {
list-style-type: decimal;
}
to my scss file. Would it be better to modify the _utilities.scss file? It sounds like if I did that it might screw up how scss translates into css for ol, ul elements?
If you don't like this behavior, you can take out the reset that's included with Compass. When you start a new compass project, it generates screen.scss with the following:
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
#import "compass/reset";
Just remove or comment out the #import "compass/reset" and use a reset that's to your liking or use something like normalize.css to standardize styles.
Yes, Compass (as bootstrap) resets the list-style for lists as written here
compass utilities documentation
I think the best practice would be to add the "inverse" reset rule just to your stylesheet, instead of modifying the library, because, in case you are going to change (maybe) the version of your library and forget to patch it again, you will find unexplainable "errors". I would add it to my reset rules.
Related
I've got a mechanism that uses one of the following 3 files, depending on what UI mode (light, dim or dark) is selected. There are only SCSS variables defined in those files.
_variables_light.scss
$primaryColor: red;
_variables_dim.scss
$primaryColor: blue;
_variables_dark.scss
$primaryColor: black;
Now I've got the following file which should work regardless of which UI mode is selected.
_styles.scss
.navMenu {
background: $primaryColor;
}
I used to solve this using the following file (example for light mode) which would then be compiled to CSS.
light.scss
#import 'variables_light';
#import 'styles';
I want to replace #import by #use as the former is deprecated but the only way I could make it work is
#use 'variables_light';
#import 'styles';
Now if _styles.scss contains #import statements again, the variables from variables_light can not be used everywhere. Is it even possible to use #use over several layers of imports?
I have a page that has a bunch of Section tags in it and I have a my-5 class on each one. Rather than repeating that every time I'd love to see if I could use a Sass Mixin to apply the my-5 css automatically to the Section tag so I could simply turn this
<section class="my-5">
into this
<section>
You would use SASS #extend inside the section rule...
section {
#extend .my-5;
}
https://www.codeply.com/go/6ziZAFqFJj
I'm using Compass to compile a Sass Zen theme. I got this warning:
Compass has changed how browser support is configured. The following configuration variables are no longer supported: $legacy-support-for-ie6, $legacy-support-for-ie7, $legacy-support-for-ie8
I installed older versions of
compass (0.12.7)
sass (3.2.19)
breakpoint (1.3)
I'm no longer getting the warning, however, I'm losing semicolons in the compiled code. Example:
/* Address paddings set differently in IE 6/7. */
menu,
ol,
ul {
padding: 0 0 0 $indent-amount; /* LTR */
}
#if $legacy-support-for-ie7 {
/* Correct list images handled incorrectly in IE 7. */
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
Compiles to
menu,
ol,
ul {
padding: 0 0 0 30px
/* LTR */
}
Notice the missing semicolon. It seems like everywhere there's an #if $legacy-support-for-ie compass then strips the preceding semicolon.
There are 51 declarations of #if $legacy-support-for-ie in my files, I'd rather just leave them if possible.
The $legacy-support-for-ie has nothing to do with the very last semicolon being dropped. That's a particular of Compass.
Sass does not care how your code is formatted as long as it is valid. When the CSS is generated, it follows the style rules dictated by the chosen output style for things like whitespace, indentation, punctuation, etc. You can only specify a different output style, not change the particulars of any given style.
Note that omitting the final semicolon is completely valid according to CSS.
I've had issues with using the latest version of compass when a site was setup to use the pre 1.0 release of compass. Try using Compass 0.12.7 and then rebuilding your dependencies from there. https://rubygems.org/gems/compass/versions/0.12.7
We need to put #import at the end of my CSS file. For example:
SCSS:
#import "reset.css";
Body {
font: 0.8em arial;
}
#import "customation.css"
compile to:
#import "reset.css";body{font: 0.8em arial;}#import "customation.css"
but after compile it changed the #import order and CSS file will be this:
#import "reset.css";#import "customation.css";body{font: 0.8em arial;}
It's very important for us to keep #importing the custom.css file at the end for our customization. We can't put the #import to CSS file manually because SCSS file will be changed and CSS file will be rewritten.
Any suggestion?
You can't. Sass is smart enough to know that #import declarations must be at the beginning of the file so it rewrites it for you to be valid.
The #import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except #charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.
https://developer.mozilla.org/en-US/docs/Web/CSS/#import
If this is not acceptable, you'll need to use multiple link declarations (which are arguably better anyway for the user).
Are you using #import for any particular reason? There are performance impacts, and no major use case anymore.
It would be better if you used Sass's #import to concatenate the file instead, this would also allow you to import in the order you want and rely on the cascade.
#import "reset";
Body {
font: 0.8em arial;
}
#import "customation";
I am using sass and compass for my project. However it provides a very cool mixins for i.e hacks.
For eg:
.display { #include inline-block; }
will execute
.display { display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
But I want to separate all the ie hacks code to different css file such as ie.css and want it to place inside ie conditional comments, so that my css file would be w3c compatible.
Is there any idea to overcome this problem.. Any help will be greatly appreciated. Thanks in advance.
Just create two "parent" sass files. e.g. screen.scss & ie.scss
Put all of your actual sass into separate "child" scss files.
Then in your "parent" files only have import statements.
EXAMPLE:
SCREEN.SCSS
//Global
#import "vars";
#import "mixins";
//Base
#import "reset";
#import "base";
#import "layout";
//MODULES
#import "modules/module_a";
#import "modules/module_b";
IE.SCSS
#import "vars";
#import "mixins";
#import "ie_hacks";
This lets you import all of the sass dependant "child" files like any variable or mixins. It also lets you keep all the ie stuff in a separate css file. ie.scss is obviously going to be markedly smaller than your main screen.scss