I am using Sublime Text 2 and LiveReload to compile my .scss file. I also tried codekit with the same problem.
Using + and - work no problem, but * and / don't compile.
font-size: 30px / 2px; doesn't compile to font-size: 15px;
but
font-size: 30px + 2px; does compile to font-size: 32px;
Any ideas? The code hinting also doesn't seem to be working for the multiply and divide operators, could it be a package conflict? Seems unlikely.
Put it in parenthesis so SCSS understands you want it to do an arithmetic operation. Also, you do not want to divide px by another px number as this will result in a unitless number.
This is what you are looking for:
div {
font-size: (30px / 2)
}
Related
Android and iOS render fonts in vastly different ways. I'd like to be able to get their renders looking a little more similar, so I need to change the font-sizes and weights throughout my entire app depending on whether it's on iOS or android.
Obviously, going through every place font-size or weight is defined and adding a conditional for is out of the question, and (fortunately) I already have all my font sizes and weights defined by sass variables.
Regardless of whether or not there is a better solution than conditional sass variables, I would like to know:
How can I conditionally select sass variables in nativescript?
I know that modules will use MyModule.ios.css or MyModule.android.css depending on the os. Can I take advantage of that?
Yes, you are on right track. You can have MyVariable.android.scss and MyVariable.ios.scss to define different values for Sass variable. In my code sharing project I have MyVariable.scss as well that I use for HTML(Web).
I have created a sample playground for you here.
In my home.component.ios.scss
$labelfontSize: 10;
$labelfontColor: red;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
and in my home.component.android.scss
$labelfontSize: 18;
$labelfontColor: green;
.home-panel{
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label{
margin-bottom: 15;
color: $labelfontColor;
font-size: $labelfontSize;
}
It shows red text in ios while in android text is green.
I'm currently in the process of learning 960gs using sass / compass, but I'm confused as to what the "$n" is in the following code and how to use the arguments.
$ninesixty-gutter-width: 20px !default
$ninesixty-grid-width: 960px !default
$ninesixty-columns: 12 !default
$ninesixty-class-separator: "_" !default
=grid-container
margin-left: auto
margin-right: auto
width: $ninesixty-grid-width
=grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
width: $ninesixty-grid-width / $cols * $n - $gutter-width
According to the docs for that plugin...
"N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework."
I'm attempting to re-learn 960gs using sass syntax. I am confused on the difference between "+" and "=" sass syntax. For example:
.wrapper
+grid-container
and
.wrapper
#include grid_container
would produce the same results in my compiled css file
.wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
So what is the difference between using "+" and "#include"?
No difference at all. Quoting Sass documentation:
Sass supports shorthands for the #mixin and #include directives. Instead of writing #mixin, you can use the character =; instead of writing #include, you can use the character +.
I have the following css:
.btn_container {
cursor: pointer;
font-family: Tahoma,Verdana,Arial;
font-size: 11px;
padding: 0;
width: auto;
}
.btn_center {
background: blue;
color: #FFFFFF !important;
display: block;
float: left;
font-weight: bold;
height: 32px;
line-height: 32px;
padding: 0 10px;
}
line-height of 30 lines up center in firefox, but 32 in webkit.
I know browsers will render things differently, but i've never had a problem getting text to center properly.
In the following example you can see that it drops a couple px lower in firefox:
http://jsfiddle.net/mstefanko/EGzEB/5/
I've done heavy testing of this in the past. I call it text jiggle. It's not something you can control. All you can do to minimize it is apply an explicit line-height (especially one in px) to every text element.
The default line-height varies by a wide margin in different browsers, and for different font families at different font sizes. Setting an explicit line-height addresses that.
But within that, the exact placement of the text within the line-height space will vary slightly browser-to-browser no matter what you do. For some combinations of font-size and line-height, all browsers match up. For instance, Arial at font-size:11px and line-height:14px renders the same in FF, Webkit, and IE. But change the line-height to 13px or 15px, and it varies by 1px browser-to-browser.
There's no standard or defined behavior for it. It's the result of how that particular font-family, font-size, and line-height happens to be rendered by the browser on that operating system. Arial, for instance, is a relatively consistent font, generally not varying by more than 1px as long as an explicit line-height is defined, while Helvetica varies by as many as 4 to 6 pixels.
I had the opposite experience actually. I noted that some header elements were positioned higher in IE7/compatibility mode as well as Chrome/Safari. So after much trouble I inspected with chrome and saw -webkit-margin-before: 1.6em or something added to the headers. Adding that value and tweaking it didn't work because it effected the height of the header which pushed some elements down but the padding option worked well for me ...
I found that this worked for me:
H1, H2, H3, H4, H5, a.mainTab div {
-webkit-padding-before: 1px;
}
a.mainTab div had spans which wouldn't respond to the padding/margin so wrapped them in a div ... this may work for li span span headers as well.
I'm wondering, why this double border on table TDs won't show in Chrome but only in FF? Any ideas what could be the work around? Thanks!
http://jsfiddle.net/yQQLk/1/
Not sure why you're using box-shadow to produce a double border, when the border property itself already supports a double border on its own. Just use the following CSS instead of what you've got:
td {
border-bottom: 3px double red;
}
Note you'll need to increase the size of the border to 3px so that both of the lines show up (with 1px, it sometimes doesn't show up at all when you specify double).
The other advantage is that this will work in all browsers, including older ones which don't support box-shadow.
Increase your border thickness to to see a more obvious demonstration of the rendering differences between the two browsers. It seems that in FF, the box-shadow is overlaid on top of the border, in Chrome it hides underneath.
You could use another approach - perhaps use a border-bottom combined with a text-decoration: underline.
Try this, it works in both the browsers:
td {
-moz-box-shadow: 0 1px 0 #000;
-webkit-box-shadow: 0 1px 0 #000;
border-bottom: 1px solid red;
box-shadow: 0 2px 0 #000;
}
I guess, this is the problem: box-shadow: 0 1px 0 #000;