Light

saadeghi / browser-hack-sass-mixins Goto Github PK

View Code? Open in Web Editor NEW

177.0 15.0 34.0 29 KB

Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera

License: MIT License

SCSS 100.00%

sass mixins css-hack browser scss-mixins

browser-hack-sass-mixins's Introduction

Browser Hack Mixins for Sass

Apply your CSS to a specific browser

Requirements

Sass 3.3+

How To Use

Import _hacks.scss file to your SCSS code : @import "hacks";
Use the mixin you want:

@include [Mixin_Name]( 'selector', (property: value) )
For example:

@include only_ie9( '.my_element', (color: red))

Or:

@include only_ff28_above( '.my_element', (
  background-color: green,
  display: flex,
  margin: 2em,
))

List of Mixins

Firefox CSS Hacks

only_ff
only_ff2
only_ff2_above
only_ff3_above
only_ff6_above
only_ff16_above
only_ff21_above
only_ff24_above
only_ff25_above
only_ff26_above
only_ff27_above
only_ff28_above
only_ff30_above

Webkit CSS Hacks

only_webkit
only_chrome
only_safari
only_safari9
only_ios
only_safari_no_ios
only_opera9_safari2

Opera CSS Hacks

only_opera
only_opera11

Internet Explorer CSS Hacks

only_edge
only_ie6
only_ie7
only_ie7_below
only_ie8
only_ie8_below
only_ie9
only_ie9_below
only_ie10_above
only_ie11
only_ie11_above
no_ie6
only_ie9_saf4_above

Other CSS Hacks

no_ie_safari6

browser-hack-sass-mixins's People

Contributors

Stargazers

Watchers

browser-hack-sass-mixins's Issues

Would be nice if you could have more styles for each selector

If you add an @each loop into each mixin, you can use a map of styles for each selector. Works with at least only_edge and only_ie6.

For example:

@mixin only_edge($selector, $map){
  @supports (-ms-accelerator:true) {
    #{$selector}{
      @each $property, $value in ($map) {
        #{$property}: $value;
      }
    }
  }
}

@include only_edge('.section', (
  display: block,
  padding: 1em,
  text-align: center,
  background-color: #eee
));

npm install support

Any interest in publishing this to npm?

LICENSE

It may be more convenient if license is permissive (ISC, MIT, BSD, Apache)

Nothing against GPL, but current license means including creates a derivative.

ie9 only hack

correct hack for ie9 only is:
#{$property}: $value#{\0/IE9};
not
#{$property}: $value+#{\9\0};

Syntax error at only_safari

I'm getting this syntax error at the mixin only_safari
http://prntscr.com/fpoepl

I am using Koala 2.2 to compile the code

/*--- Only Safari â‰¥ 6.1 ---*/
// Dark magic, Don't touch
@function sf_func1($selector, $property) {
	@return '@media screen and(min-color-index:0)and(-webkit-min-device-pixel-ratio:0){@media{'+& $selector+'{'+$property;
}
@function sf_func2($value) {
	@return $value+'}}}';
}
@mixin only_safari($selector, $map){
	@at-root{
		@each $property, $value in ($map) {
			#{sf_func1($selector, $property)}: #{sf_func2($value)};
		}
	}
}

this line:

#{sf_func1($selector, $property)}: #{sf_func2($value)};

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.