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
Related
I am debugging my website and I wish I could just search for all the occurrences of property through all the stylesheets.
For example I wish I could find all instances of the property color: #fff; and from that quickly browse through the selectors and the correspondent stylesheet.
Is this possible?
It is (as far as I am aware) impossible to search for a specific selector through the F12 Developer Tools. Having said that, it is very possible to add generic rules that would override existing selectors.
Depending on the exact element(s) that you want to modify the styles for, you can use a non-specific CSS selector to target all of them and apply a rule that would override any existing rules. For example, span will target all <span> tags, regardless of ID and class. You can target any element with the universal (*) selector.
However, it should be noted that the more 'generic' you are, the less 'specific' you are (which stands to reason). This means that if you have any other rules that are more specific, they will override your generic rules. As such, you'll want to combine a generic rule with the !important declaration.
Here's an example of that:
span {
color: red;
font-size: 20px; /* More specific than the * selector */
}
.more {
color: blue; /* Will override span */
}
* {
font-size: 40px;
color: green !important; /* Maximum specificity; override anything */
}
<span>One</span>
<span class="more">Two</span>
<div>Three</div>
In the above, all <span> elements are red. Then <span class="more"> turns blue, because it has a more specific selector. Although * is a less specific selector, adding the declaration !important to the color rule overrides the previous two colours set.
Keep in mind that the above should only be used for testing; you will almost never want to apply such a broad selector as * for production. Also, avoid using the !important declaration outside of testing as well, and instead work with CSS specificity.
You can either add the rules directly to your stylesheet temporarily, or preferably add them client-side through the F12 Developer Tools. Using the F12 Developer Tools will even showcase when rules are overridden (like in the above example) by placing a line through the middle of them. Rules are displayed from most specific to least specific.
The <span class="more"> from the above example is highlighted here:
Using SASS/SUSY,
I am trying to create RTL rules that only apply when [dir="rtl"] is set (dynamically) but my layout is taking on the RTL flow rules by default. How do I do this with SUSY?
I have a Demo here
$default-dir: (
math: fluid,
columns: 12,
gutter-position: split,
gutters: 0,
flow: ltr
);
.boxes{
width: 100%;
display: block;
margin: 0 auto;
max-width: 1280px;
#include clearfix;
#include layout($default-dir);
[dir="rtl"] &{
#include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl]
background-color: orange;
}
...
}
This is a common confusion between how CSS works, and how Sass works. CSS is DOM-aware, because it is compiled by browsers along with HTML. Sass is working at a different layer, unaware of the DOM structures implied by your CSS.
The layout mixin is a Sass abstraction, changing a few global Sass variables that Susy can refer back to — it has no actual CSS output of its own. The layout mixin changes the output of other functions and mixins that come after it in the Sass. You can also use with-layout() { <content> } to wrap entire blocks of mixins and functions — but in both cases, the variables only exist in Sass.
In order to change the layout based on a selector, you have to provide both layouts in full — not just one layout, and a scoped variable change. That means something more like this:
.box-item {
#include span(1 of 2);
[dir='rtl'] & {
#include span(1 of 2 rtl)
}
}
There are some workarounds to make that less repetitive, but none are as simple and clean as what you hoped for. They basically involve finding ways to compile the same code block twice, with different variables and an extra selector.
Anyone know of a way to use the SASS if function (not the #if directive) without a false (aka else) clause?
Use Case: I have a SASS library that's normally used on its own and includes a full CSS reset. Someone wants to take an individual file from the library and add it to a project that includes Zurb Foundation, which, of course, totally destroys the CSS reset. I'd like to accommodate that use case with something like:
$css-reset: false !default;
.form__input {
border-radius: 4px if(not $css-reset, !important);
}
That's a SASS compile error, though, since the compiler requires a third parameter to the if() function.
Thanks in advance
Not super elegant, but this works:
border-radius: 4px if(not $css-reset, !important, unquote("");
SOLVED. Problem below and as simple a fix as I can outline.
Visual Studio 2013 + AjaxToolkit 4.5.7.1213 (most recent stable).
Web forms app. I have a very simple page. It renders perfectly in IE compatibility view or Chrome's IE tab extension. However, in Chrome 33.0.1750.154 (couple weeks old version), or IE 11 the header of a tab in the tabcontainer is cut off horizontally; the bottom just isn't there. I have googled, and others had similar problems a while ago but nothing seems to easily resolve it. Doesn't matter if I use the inline HeaderText of the tab panel or a Header Text section, same thing happens.
I discovered that the problem resolved if I stopped using bootstrap.css.
Here is the problem:
Ajaxtoolkit has its own CSS, and this can be observed by looking at the source code for the tabcontainer online:
http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/Tabs/Tabs_resource.css
The default css class that the ajaxToolkit:TabContainer uses is .ajax__tab_tab. The offending code is in .ajax__tab_tab. It specifies a height of 13px. That cuts off the text. If I increase it to 18 px (on default font size), no issues.
Since the cssclass of ajaxToolkit:TabContainer can be specified, what I did was copy out most of the .ajax__tab_xp from the ajaxToolkit site, rename it to .customAjaxTab, place it in my own .css file, and then set CssClass="customAjaxTab" in my TabContainer.
Unfortunately, the images that the TabContainer default css calls use a "WebResource" call that I didn't get to work, so I made my images. My new css:
.customAjaxTab .ajax__tab_disabled { cursor: default; color: #A0A0A0; }
.customAjaxTab .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/Tab_bottomline.png) repeat-x bottom;height:21px; }
.customAjaxTab .ajax__tab_header .ajax__tab_outer {padding-right:4px;background:url(Images/Tab_unselected.png) no-repeat right;height:21px;}
.customAjaxTab .ajax__tab_header .ajax__tab_inner {padding-left:3px;background:url(Images/Tab_unselected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_tab {height:18px;padding:4px;margin:0px;color:black;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {cursor:pointer;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_outer {background:url(Images/Tab_selected.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_inner {background:url(Images/Tab_selected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_tab {color:black;}
.customAjaxTab .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
This link has more on custom css for the TabContainer:
http://www.asp.net/ajaxlibrary/act_TabContainer.ashx
This worked for me, add in the bootstrap.css and bootstrap.min.css
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
xadriel's solution works - but, I have seen many comments stating 'Do not modify the Bootstrap.css file' - so I added xadriel's code segment to my site.css file and it works great! (Especially considering I'm using CDN linked CSS/JS so can't modify them...).
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
I have an older VS2008/.NET 3.5 very large website that I am adding Bootstrap to, and I had to override a few Bootstrap settings by adding local site.css class names, then add those custom class names to the control needing fixing (this ensures changes only apply where needed and don't affect other areas). Some required !important to ensure they are changed (i.e. change color/background-color for a drop-down control where 'form-control' colors were being applied and I didn't want them). Doesn't seem necessary to add !important here as all I did was add this to site.css and it worked.
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.