Created
November 27, 2014 09:24
-
-
Save airen/0f1295b3d82c0e14e0ee to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
@charset "UTF-8"; | |
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
//去掉一个值的单位,如12px => 12 | |
@function strip-units($number){ | |
@return $number / ($number * 0 + 1); | |
} | |
$browser-default-font-size:16px !default;//变量的值可以根据自己需求定义 | |
// @mixin remCalc($property,$values...){ | |
// $max:length($values);//返回$values列表的长度值 | |
// $remValues:''; | |
// @for $i from 1 through $max{ | |
// $value: strip-units(nth($values, $i)); | |
// $browser-default-font-size: strip-units($browser-default-font-size); | |
// $remValues:#{($value/$browser-default-font-size)/2}rem; | |
// @if $i < $max { | |
// $remValues: #{$remValues + " "}; | |
// } | |
// } | |
// #{$property}: $remValues; | |
// } | |
@mixin remCalc($property, $values...) { | |
$max: length($values);//返回$values列表的长度值 | |
//$pxValues: ''; | |
$remValues: ''; | |
// @for $i from 1 through $max { | |
// $value: strip-units(nth($values, $i));//返回$values列表中的第$i个值,并将单位值去掉 | |
// $browser-default-font-size: strip-units($browser-default-font-size); | |
// $pxValues: #{$pxValues + $value * $browser-default-font-size}px; | |
// @if $i < $max { | |
// $pxValues: #{$pxValues + " "}; | |
// } | |
// } | |
@for $i from 1 through $max { | |
$value: strip-units(nth($values, $i)); | |
$browser-default-font-size: strip-units($browser-default-font-size); | |
$remValues: #{$remValues + $value / $browser-default-font-size}rem; | |
@if $i < $max { | |
$remValues: #{$remValues + " "}; | |
} | |
} | |
//#{$property}: $pxValues; | |
#{$property}: $remValues; | |
} | |
.title-2 { | |
@include remCalc(background-position,1,-300); | |
} | |
.title-3 { | |
@include remCalc(background-position,1,-600); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.title-2 { | |
background-position: 0.0625rem -18.75rem; | |
} | |
.title-3 { | |
background-position: 0.0625rem -37.5rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment