app.css
$setMediaWidth: 750;
@import '../base.scss';
@import '../place.scss';
.icon-comment {
width: rc(60); //举例使用rc(传入值)
height: rc(60);
font-size: rc(28);
color: #51576f;
display: flex;
align-items: center;
justify-content: center;
}
base.scss
//====================================================
//
// reset
//
//====================================================
$reset: false !default; // 是否重置默认样式
@if $reset {
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, header, hgroup, nav, section, article, aside, footer, figure, figcaption, menu, button { margin: 0; padding: 0 }
body { font-family:"microsoft yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif; line-height: 1.5; font-size: 16px; color: #000; background-color: #fff; -webkit-user-select: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 }
table { border-collapse: collapse; border-spacing: 0 }
caption, th { text-align: left }
fieldset, img { border: 0 }
li { list-style: none }
ins { text-decoration: none }
del { text-decoration: line-through }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0 }
button { -webkit-appearance: none; border: 0; background: 0 0 }
a { -webkit-touch-callout: none; text-decoration: none }
em, i { font-style: normal }
:focus { outline: 0; -webkit-tap-highlight-color: transparent }
*,*:after,*:before{ -webkit-box-sizing: border-box; box-sizing: border-box; }
}
//====================================================
//
// px2rem
//
//====================================================
@import 'rem-calc';
//====================================================
//
// set html font-size
//
//====================================================
$set-html-font-size: true !default; // 是否开启设置html字体
$rem-base: 16 !default; // 设置rem单位计算基数
$setMediaWidth: 750 !default; // 设置适配宽度
$mediaArrays:(320 360 375 400 414 480 540 640 720 800 960 1125) !default;
@if $set-html-font-size {
$htmlSize: null;
@if length($mediaArrays)==1 and type-of($mediaArrays) !=string {
$htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, 1));
@media screen and (min-width: #{nth($mediaArrays, 1)}) {
html {
font-size: #{$htmlSize};
}
}
}
@if length($mediaArrays)>1 {
@for $i from 1 through length($mediaArrays) {
$htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, $i));
$media: null;
@if $i==1 {
$media: "screen and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";
}
@else if $i==length($mediaArrays) {
$media: "screen and (min-width: #{nth($mediaArrays, $i)}px)";
}
@else {
$media: "screen and (min-width: #{nth($mediaArrays, $i)}px) and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";
}
@media #{$media} {
html {
font-size: #{$htmlSize};
}
}
}
}
}
//====================================================
//
// mixins
//
//====================================================
$version: '?v=' + random() * 100000000000000000 !default;
$img_url: '/public/dist/images' !default;
@mixin image($url){
background-image:url( unquote($img_url + '/'+ $url ) );
}
@mixin placeholder($color){
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $color;
}
::-moz-placeholder { /* Firefox 19+ */
color: $color;
}
:-ms-input-placeholder { /* IE 10+ */
color: $color;
}
:-moz-placeholder { /* Firefox 18- */
color: $color;
}
}
$pre:ms moz webkit !default;
@mixin prefixs($map, $vendors: $pre) {
@each $prop, $value in $map {
@if $vendors {
@each $vendor in $vendors {
#{"-" + $vendor + "-" + $prop}: #{$value};
}
}
#{$prop}: #{$value};
}
}
@mixin size($width, $height: $width, $lineHeight: 0px) {
width: $width;
height: $height;
@if $lineHeight != 0px{
line-height: $lineHeight;
}
}
//use: @include position(absolute,top 5 right 6);
@mixin position($position,$args) {
$offsets: top right bottom left z-index;
position: $position;
@each $o in $offsets {
$i: index($args, $o);
@if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number {
#{$o}:nth($args, $i + 1);
}
}
}
@mixin absolute($args) {
@include position(absolute, $args);
}
@mixin fixed($args) {
@include position(fixed, $args);
}
@mixin relative($args) {
@include position(relative, $args);
}
@mixin opacity($color, $trans) {
background: $color;
filter: alpha(opacity=$trans * 100);
opacity: $trans;
}
@mixin filter($color, $trans) {
$rgba: rgba($color, $trans);
background: $rgba;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($rgba)}", EndColorStr="#{ie-hex-str($rgba)}");
:root & {
filter: none;
}
}
//引用placeholder selector
@import 'place.scss';
place.scss
/* 作为继承的模板使用 */
%fl {
float: left;
}
%fr {
float: right;
}
%fn {
float: none;
}
%cf {
*zoom: 1;
&:after {
content: '';
display: table;
clear: both;
}
}
%dn {
display: none;
}
%db {
display: block;
}
%dib {
display: inline-block;
*zoom: 1;
*display: inline;
}
%tl {
text-align: left;
}
%tr {
text-align: right;
}
%tc {
text-align: center;
}
%ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
max-width: 100%;
}
%border-box {
-moz-box-sizing: border-box;
-webkt-box-sizing: border-box;
box-sizing: border-box;
}
%arrow {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
display: inline-block;
}
%relative {
position: relative;
}
%absolute {
position: absolute;
}
%ovh {
overflow: hidden;
}
%flexbox {
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
display: -ms-flexbox; // TWEENER - IE 10
display: -webkit-flex; // NEW - Chrome
display: flex;
}
%select{
-ms-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
}
rem-calc.scss
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;
$rem-digits:2 !default;
// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
$modules: () !default;
@mixin exports($name) {
@if (index($modules, $name) == false) {
$modules: append($modules, $name);
@content;
}
}
//
// @functions
//
@function pow($x, $n) {
$ret: 1;
@if $n >= 0 {
@for $i from 1 through $n {
$ret: $ret * $x;
}
} @else {
@for $i from $n to 0 {
$ret: $ret / $x;
}
}
@return $ret;
}
@function to-fixed($float, $digits: 2) {
$sass-precision: 5;
@if $digits > $sass-precision {
@warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
+ "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
+ "See https://github.com/sass/sass/issues/1122 for further informations.";
}
$pow: pow(10, $digits);
@return round($float * $pow) / $pow;
}
@function toFixed($args...){
@return to-fixed($args...);
}
// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
@if length($range) <= 0 {
@return 0;
}
@return nth($range,1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
@return nth($range, 2);
}
// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
// CONVERT TO REM
@function convert-to-rem($value, $base-digits: $rem-digits) {
$value: strip-unit($value) / strip-unit($rem-base) * 1rem;
@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
@return toFixed($value,$base-digits);
}
@function data($attr) {
@if $namespace {
@return '[data-' + $namespace + '-' + $attr + ']';
}
@return '[data-' + $attr + ']';
}
// REM CALC
// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
//
// rem-calc(10 20 30px 40);
//
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
//
// rem-calc((10, 20, 30, 40px));
//
// Optionally call with a different base (eg: 8px) to calculate rem.
//
// rem-calc(16px 32px 48px, 8px);
//
// If you require to comma separate your list
//
// rem-calc((16px, 32px, 48), 8px);
@function rem-calc($values, $base-digits: $rem-digits) {
$max: length($values);
@if $max == 1 { @return convert-to-rem(nth($values, 1), $base-digits); }
$remValues: ();
@for $i from 1 through $max {
$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-digits));
}
@return $remValues;
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function emCalc($values){
@return rem-calc($values);
}
// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function em-calc($values){
@return rem-calc($values);
}
// eg....
@function rc($values...){
@return rem-calc($values...);
}