Ie Conditional Comments with SASS and Bourbon

IE conditional comments with Sass and Bourbon

This problem it's outside the sass scope, because is just a pre processor, and doesn't have a clue about the browser.
Also is outside css scope deciding conditions for different browsers.

You could do this adding a ie8 class to the html like html5 boilerplate does and then use a css rule to activate the font.

body {
@include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: false);

.ie8 & {
@include font-face("myicons", "myicons", $weight: normal, $style: normal, $asset-pipeline: true);
}
}

and in html file

<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

Bourbon/Sass: #{$all-text-inputs} with hover or focus?

You should be able to just nest the :hover and :focus styles using the Sass parent selector:

#{$all-text-inputs} {
border: 1px solid green;
&:hover, &:focus {
// some styles
}
}

How to serve fonts from different servers for IE users?

Here's a way to do it with conditional comments. I don't know how your fonts and other styles are organized, but you'll probably want to use

<!--[if IE 9]>
stylesheet using internally served fonts
<![endif]-->

and maybe

<!--[if !IE]> -->
stylesheet using CDN
<!-- <![endif]-->

The latter will apply not only to non-IE browsers but also to IE10 and up, but you might only need to use the former.

To answer your first question, I prefer using fonts from my own servers when in production. Cuts down on the number of moving parts and means that my site doesn't rely on another site.

Having some trouble compiling Bourbon with VS 2013, and Web Essentials

After messing around for a while, and trying a bunch of different plugins I finally got it to work with Visual Studio 2013 Update 4 and Web Essentials.

The trick was going into the SASS settings of Web Essentials:
Tools --> Options --> Web Essentials --> SASS

and changing "Use Ruby Runtime" to "True".

Best way to support mobile first for IE8 without script?

I've written a solution for this myself. All you need is two different CSS files (one for modern browsers and one for older IE browsers) and a cleaver mixin.

Create a second SASS file which Compass can watch and call the file something like oldIE.scss. Copy all the imports from you original SASS file (styles.scss or whatever) to this file. Then put a new variable in both of them: $compile-IE. Set the values like this:

styles.scss

$compile-IE: false;

@import "all your other imports"

oldIE.scss

$compile-IE: true;

@import "all your other imports"

Compass will now create two different CSS files for you. You can place them in the HEAD of your Markup like this:

<link type="text/css" href="styles.css" rel="stylesheet" media="all" />
<!--[if (gte IE 6) & (lte IE 8)]>
<link type="text/css" href="oldIE.css" rel="stylesheet" media="all" />
<![endif]-->

Once you have the two files in place, you can start writing SASS with your breakpoints thanks to the following mixin:

// ----- Media-queries ----- // 
$breakpoints: S 480px, M 600px, L 769px;

@mixin bp($bp) {
// If compile-IE is true (IE8 <=) then just use the desktop overrides and parse them without @media queries
@if $compile-IE {
@content;
}
// If compile-IE is false (modern browsers) then parse the @media queries
@else {
@each $breakpoint in $breakpoints {
@if $bp == nth($breakpoint, 1) {
@media (min-width: nth($breakpoint, 2)) {
@content;
}
}
}
}
}

Call the mixin as following:

p {
color: blue;
font-size: 16px;
@include bp(L) {
font-size: 13px;
}
}

Now, if the variable $compile-IE is false (for modern browsers) the output will be this:

p {
color: blue;
font-size: 16px; }
@media (min-width: 768px) {
p {
font-size: 13px;
}
}

And when the variable $compile-IE is true (for older IE versions) the output will be this:

p {
color: blue;
font-size: 16px;
font-size: 13px;
}

Because the font-size: 13px is the parsed after the font-size: 16px the styles used for larger viewports (like bp L) will override the default mobile styling.

Hope this will help for you! :)

Need help creating a percentage-based SASS grid system

Okay, i spent an hour to comprehend your commentless code.

First of all, there's ambiguity between "columns" as grid units and "columns" as actual elements. Below i'm calling the latter "blocks".

You are correctly overriding gutter of the first block in a row. Thus, the total number of gutters is one less than the number of blocks in a row.

But when you're calculating block widths, you're subtracting gutter from every column without taking into consideration that there are less gutters than blocks.

So you should proportionally reduce the width of a block.

Working solution:

// Accepts a number of columns that a block should span.
// Returns a percentage width for that block.
@mixin columns($columnSpan: 1) {
$number-of-blocks-in-container: $gridColumnCount / $columnSpan;
$total-width-of-all-gutters: gutterCalc(false) * ($number-of-blocks-in-container - 1);
$total-width-of-all-blocks: 1 - $total-width-of-all-gutters;
$width-of-a-single-block: $total-width-of-all-blocks / $number-of-blocks-in-container;

width: percentage( $width-of-a-single-block );
}

Now your wheel is rolling! See it in action: http://jsfiddle.net/fMeBk/46/ Keep in mind that browsers round up percentage values with a slight error, so grid positioning might be not pixel-perfect. BTW, right-aligning the last block in a row is necessary to minimize the visual effect of this rounding error.

Dude, your code architecture is so wrong, and your approach has a number of drawbacks. I can name them if you want.

You really should give Susy another try. It is a brilliant piece of SASS and also a great source to learn SASS techniques from. Its source code is well commented and available on GitHub.

According to you, what features of your grid framework does Susy lack?

I assure you, Susy can do what you want. Just explain a task and i'll try to come up with an elegant solution leveraging Susy.

PS I'm not trying to dissuade you from experimenting. Practice makes perfect! Experimenting is necessary, and you're doing a great job. What i'm trying to tell is that you should follow a good example and adopt good practices so that you don't end up in the wrong place.

PPS Please give me back my rating. I devoted a lot of my personal time trying to help you, and you minused my answer. :(

Why does my code duplicate the css of a file?

Since I can't see your code, I am not sure how you imported your resources exactly. However, if you are only generating one .css file, a good practice is to import everything on the file that will be compiled and not on each partial.

Let's imagine you have the following structure :

styles
├─ components
│ ├─ _footer.scss
│ └─ _navbar.scss
├─ settings
│ ├─ _functions.scss
│ └─ _mixins.scss
└─ styles.scss

In this example, styles.sccs is the only one that will be compiled, it will be used only to import all partials (the order matters):

// Settings

@import './settings/mixins';
@import './settings/functions';

// Components

@import './components/footer';
@import './components/navbar';

You then can use any mixins or functions in your components and everything is only imported once.



Related Topics



Leave a reply



Submit