Skip to content

Instantly share code, notes, and snippets.

@Nilegfx

Nilegfx/Sass mixin - targeting specific browser

Created February 22, 2016 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nilegfx/5dfc2bc44b2cc0ba6ddc to your computer and use it in GitHub Desktop.
Save Nilegfx/5dfc2bc44b2cc0ba6ddc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Sass mixin - targeting specific browser
/* ======== description =======
Author: Ahmed ayoub Hussain
should be used in conjunction with Conditional HTML comments in the base layout:
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
/* ============================
/* ============ usage =========
@include browser-specifics(ie7){
top: 16px;
}
===============================
*/
@mixin browser-specifics($browsers,$content_block:false){
//check if multiple browsers passed
@if(type-of($browsers) =="list"){
$selector : "";
//change seprator based on how you want the rendered content to be.
$seprator : if($content_block, ",", " &,");
@each $browser in $browsers {
$selector : $selector + ".#{$browser}#{$seprator}";
}
#{$selector}{
@content;
}
}@else{
//if only one browser
@if($content_block){
.#{$browsers}{
@content;
}
}@else{
.#{$browsers} &{
@content;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment