常用的sass编译库
@charset "UTF-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("pwd/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
@if $px == {$px:0px}
@return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
@if $px == {$px:0px}
@return $px / ($browser-default-font-size*) * 1rem;
} /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
background-image:sprite-url($sprites); //获取整个雪碧图路径
background-repeat:no-repeat;
@if $iE6 != null{ //null
_background-image:sprite-url($iE6); //此处传进来的格式须是png8
}
$width:image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片
$height:image-height(sprite-file($sprites,$name)); //获取目标图片
$toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度
$totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度
$widthHalf:ceil($width/); //获取宽度的一半
$heightHalf:ceil($height/); //获取高度的一半
//sprite-position 获取目标图的位置,nth操作数组
$posX:round(nth(sprite-position($sprites,$name),)); //获取沿x轴的位移
$posY:round(nth(sprite-position($sprites, $name), )); //获取沿y轴的位移
@if $media{//wap
height:pxTorem($heightHalf);
width:pxTorem($widthHalf);
background-position: pxTo2rem($posX) pxTo2rem($posY);
background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
} @else{//PC
height:$height;
width:$width;
background-position:sprite-position($sprites,$name);
}
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin timestampImg($imgUrl){
background-image:image-url($imgUrl);
background-repeat:no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin base64Img($imgUrl){ //这里一定要分开写background 不然会引起background-size 与background合并引起手机端无法显示
background-image:inline-image($imgUrl);
background-repeat:no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
} //圆角
@mixin boradius($size){
-webkit-border-radius:$size;
-moz-border-radius:$size;
-o-border-radius:$size;
-ms-border-radius:$size;
border-radius:$size;
}
%box{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;} //绝对居中
@mixin pscenter($width,$height){
width:$width;
height:$height;
position:absolute;
left:%;
top:%;
margin:(-$height/) (-$width/)
}
// 文字隐藏
%text_indent {
font-size: ;
color: rgba(,,,);
text-indent: -9999em;
overflow: hidden;
} // 文字自动换行
%text_break {
word-break: break-all;
} // 文字省略：单行
%text_oneline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} // 文字省略：两行
%text_twoline {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
-webkit-box-orient: vertical;
} // 文字省略：自定义多行
@mixin elli($elli) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $elli;
-webkit-box-orient: vertical;
} // flex 布局
%box {
display: box;
display: -ms-box;
display: -webkit-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
%flex {
display: block;
flex: ;
-ms-flex: ;
-webkit-flex: ;
box-flex: ;
-ms-box-flex: ;
-webkit-box-flex: ;
} // 清除表单样式
%input_clear {
border: none;
background: none;
-webkit-appearance: none;
-webkit-border-radius: ;
} // 固定定位条
%fixedBar {
position: fixed;
left: ;
right: ;
width: %;
} /* ************************全局模块样式************************** */
* {
-webkit-tap-highlight-color: transparent;
outline: ;
} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: ;
padding: ;
vertical-align: baseline;
} img {
border: none;
vertical-align: top;
}
a img{border: none}
i, em {
font-style: normal;
} ol, ul {
list-style: none;
} input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
font-size: %;
font-family: inherit;
} table {
border-collapse: collapse;
border-spacing: ;
} a, a:visited {
text-decoration: none;
color: #;
}
a:focus{
outline:;
}
html,body{font-size:$browser-default-font-size;height:%; }
body {
margin: auto;
min-width: 320px;
max-width: 640px;
background: #fff;
// font-size: 14px;
font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
line-height: 1.5;
color: #;
-webkit-text-size-adjust: % !important;
-webkit-user-select: none;
user-select: none;
}
.g_cf:after{
display:block;
content:'\20';
clear:both;
height:;
visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
*zoom:;
overflow:hidden
}
.g_h10{height:pxTo2rem(10px);}
.g_h20{height:pxTo2rem(20px);}
.g_h30{height:pxTo2rem(30px);}
.g_h35{height:pxTo2rem(35px)}
.g_h100{height:pxTo2rem(100px)}
扩展:
@content：在sass3.2.0中引入， 可以用来解决css3中 @meidia 或者 @keyframes 带来的问题。它可以使@mixin接受一整块样式，接收的样式从@content开始
//sass 样式
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
} @include max-screen(480px) {
body { color: red }
} //css 编译后样式
@media only screen and (max-width: 480px) {
body { color: red }
}
使用@content解决@keyframes关键帧的浏览器前缀问题
// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} // 引入
@include keyframes(scale) {
% {
#{$browser}transform: scale(0.8);
}
} // css编译后
@-webkit-keyframes scale {
-webkit-transform: scale(0.8);
}
@-moz-keyframes scale {
-moz-transform: scale(0.8);
}
@-o-keyframes scale {
-o-transform: scale(0.8);
}
@keyframes scale {
transform: scale(0.8);
}
我的常用sass工具库（移动端）：
@charset "UTF-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("qqvip/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
@if $px == {$px:0px}
@return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
@if $px == {$px:0px}
@return $px / ($browser-default-font-size*) * 1rem;
} // 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径
@if $iE6 != null{ //null
_background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
}
$width:image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片
$height:image-height(sprite-file($sprites,$name)); //获取目标图片
$toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度
$totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度
$widthHalf:ceil($width/); //获取宽度的一半
$heightHalf:ceil($height/); //获取高度的一半
//sprite-position 获取目标图的位置,nth操作数组
$posX:round(nth(sprite-position($sprites,$name),)); //获取沿x轴的位移
$posY:round(nth(sprite-position($sprites, $name), )); //获取沿y轴的位移
@if $media{//wap
height:pxTorem($heightHalf);
width:pxTorem($widthHalf);
background-position: pxTo2rem($posX) pxTo2rem($posY);
background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
} @else{//PC
height:$height;
width:$width;
background-position:sprite-position($sprites,$name);
}
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin timestampImg($imgUrl){
background:image-url($imgUrl) no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin base64Img($imgUrl){
background-image:inline-image($imgUrl);
background-repeat:no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
} //圆角
@mixin boradius($size){
-webkit-border-radius:$size;
-moz-border-radius:$size;
-o-border-radius:$size;
-ms-border-radius:$size;
border-radius:$size;
}
%box{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;} //绝对居中
@mixin pscenter($width,$height){
width:$width;
height:$height;
position:absolute;
left:%;
top:%;
margin:(-$height/) (-$width/)
} // 文字省略：单行
%text_oneline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} // 文字省略：两行
%text_twoline {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
-webkit-box-orient: vertical;
} // 文字省略：自定义多行
@mixin elli($elli) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $elli;
-webkit-box-orient: vertical;
} // flex 布局
%boxflex {
display: box;
display: -ms-box;
display: -webkit-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
%flex {
display: block;
flex: ;
-ms-flex: ;
-webkit-flex: ;
box-flex: ;
-ms-box-flex: ;
-webkit-box-flex: ;
} // 清除表单样式
%input_clear {
border: none;
background: none;
-webkit-appearance: none;
-webkit-border-radius: ;
} // 固定定位条
%fixedBar {
position: fixed;
left: ;
right: ;
width: %;
} /* ************************全局模块样式************************** */
* {
-webkit-tap-highlight-color: transparent;
outline: ;
} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: ;
padding: ;
vertical-align: baseline;
}
body{background:#EAEAEA}
img {
border: none;
vertical-align: top;
}
a img{border: none}
i, em {
font-style: normal;
} ol, ul {
list-style: none;
} input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
font-size: %;
font-family: inherit;
} table {
border-collapse: collapse;
border-spacing: ;
} a, a:visited {
text-decoration: none;
color: #;
}
a:focus{
outline:;
}
html,body{font-size:$browser-default-font-size;height:%; }
body {
margin: auto;
min-width: 320px;
max-width: 640px;
background: #eaeef2;
// font-size: 14px;
font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
line-height: 1.5;
color: #;
-webkit-text-size-adjust: % !important;
-webkit-user-select: none;
user-select: none;
} .g_cf:after{
display:block;
content:'\20';
clear:both;
height:;
visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
*zoom:;
*overflow:hidden
}
.hide{display:none};
.display{display:block};
.g_h5{height:pxTo2rem(5px);}
.g_h10{height:pxTo2rem(10px);}
.g_h10{height:pxTo2rem(10px);}
.g_h15{height:pxTo2rem(15px);}
.g_h20{height:pxTo2rem(20px);}
.g_h25{height:pxTo2rem(25px);}
.g_h30{height:pxTo2rem(30px);}
.g_h35{height:pxTo2rem(35px)}
.g_h40{height:pxTo2rem(40px);}
.g_h50{height:pxTo2rem(50px)}
.g_h70{height:pxTo2rem(70px)}
.g_h100{height:pxTo2rem(100px)}
.g_h130{height:pxTo2rem(130px)} .fs2_6{color:#;font-size: pxTo2rem(20px)}
.fs25_6{color:#;font-size: pxTo2rem(25px)}
.fs2_9{color:#;font-size: pxTo2rem(20px)}
我的常用sass库，不用rem，用px em库：
@charset "UTF-8";
@import 'mod_border';
/*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites:sprite-map("icon/*.png",$spacing:8px,$layout: vertical); /*转换px到rem*/
$browser-default-font-size : 16px !default;
/***640下2倍px 转换为 1倍px**/
@function pxTo($px){
@if $px == {$px:0px}
@return $px / ;
}
/***转换为em**/
@function pxToem($px){
@if $px == {$px:0px}
@return $px / $browser-default-font-size * 1em;
} @function pxTo2em($px){
@if $px == {$px:0px}
@return $px / ($browser-default-font-size*) * 1em;
}
// 初始化变量
$browser: null;
// 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:ture;
@mixin iconItem($sprites,$name,$iE6:null){
background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径
@if $iE6 != null{ //null
_background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
}
$width:image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片
$height:image-height(sprite-file($sprites,$name)); //获取目标图片
$toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度
$totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度
$widthHalf:ceil($width/); //获取宽度的一半
$heightHalf:ceil($height/); //获取高度的一半
//sprite-position 获取目标图的位置,nth操作数组
$posX:round(nth(sprite-position($sprites,$name),)); //获取沿x轴的位移
$posY:round(nth(sprite-position($sprites, $name), )); //获取沿y轴的位移
@if $media{//wap
height:$heightHalf;
width:$widthHalf;
background-position: $posX/ $posY/;
background-size:$toalWidth/ $totalHeight/;
} @else{//PC
height:$height;
width:$width;
background-position:sprite-position($sprites,$name);
}
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin timestampImg($imgUrl){
background:image-url($imgUrl) no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:$width/;
height:$height/;
background-size:$width/ $height/;
} @else{
height:$height;
width:$width;
}
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin base64Img($imgUrl){
background-image:inline-image($imgUrl);
background-repeat:no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:$width/;
height:$height/;
background-size:$width/ $height/;
} @else{
height:$height;
width:$width;
}
}
@mixin size($width, $height:false){
@if not $height {
$height : $width;
}
width: $width + px;
height: $height + px ; }
//圆角
@mixin boradius($size){
-webkit-border-radius:$size;
-moz-border-radius:$size;
-o-border-radius:$size;
-ms-border-radius:$size;
border-radius:$size;
}
@mixin border-radius($size){
-webkit-border-radius:$size;
-moz-border-radius:$size;
-o-border-radius:$size;
-ms-border-radius:$size;
border-radius:$size;
}
%boxSize{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;} //绝对居中
@mixin pscenter($width,$height){
width:$width;
height:$height;
position:absolute;
left:%;
top:%;
margin:(-$height/) (-$width/)
} // 文字省略：单行
%text_oneline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} // 文字省略：两行
%text_twoline {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ;
-webkit-box-orient: vertical;
} // 文字省略：自定义多行
@mixin elli($elli) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $elli;
-webkit-box-orient: vertical;
} // flex 布局
%box{
display: box;
display: -ms-box;
display: -webkit-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
%boxflex {
display: box;
display: -ms-box;
display: -webkit-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
%flex {
display: block;
flex: ;
-ms-flex: ;
-webkit-flex: ;
box-flex: ;
-ms-box-flex: ;
-webkit-box-flex: ;
} // 清除表单样式
%input_clear {
border: none;
background: none;
-webkit-appearance: none;
-webkit-border-radius: ;
} // 固定定位条
%fixedBar {
position: fixed;
left: ;
right: ;
width: %;
} @mixin center($width, $height){
width: $width + px;
height: $height + px ;
position: absolute;
left: %;
top: %;
margin-left: $width / (-) + px;
margin-top: $height / (-) + px;
} /* ************************全局模块样式************************** */
* {
-webkit-tap-highlight-color: transparent;
outline: ;
} body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: ;
padding: ;
vertical-align: baseline;
}
body{background:#EAEAEA}
img {
border: none;
vertical-align: top;
}
a img{border: none}
i, em {
font-style: normal;
} ol, ul {
list-style: none;
} input, select, button,textarea, h1, h2, h3, h4, h5, h6 {
font-size: %;
font-family: inherit;
} table {
border-collapse: collapse;
border-spacing: ;
} a, a:visited {
text-decoration: none;
color: #;
}
a:focus{
outline:;
}
html,body{font-size:$browser-default-font-size;height:%; }
body {
margin: auto;
min-width: 320px;
max-width: 640px;
background: #fff;
// font-size: 14px;
font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
line-height: 1.5;
color: #;
-webkit-text-size-adjust: % !important;
-webkit-user-select: none;
user-select: none;
} .g_cf:after{
display:block;
content:'\20';
clear:both;
height:;
visibility:hidden;
}
input{-webkit-appearance: none;}
.g_cf{
*zoom:;
*overflow:hidden
}
.hide{display:none};
.display{display:block};pxTo2em
.g_h5{height:pxTo2em(5px);}
.g_h10{height:pxTo2em(10px);}
.g_h10{height:pxTo2em(10px);}
.g_h15{height:pxTo2em(15px);}
.g_h20{height:pxTo2em(20px);}
.g_h25{height:pxTo2em(25px);}
.g_h30{height:pxTo2em(30px);}
.g_h35{height:pxTo2em(35px)}
.g_h40{height:pxTo2em(40px);}
.g_h50{height:pxTo2em(50px)}
.g_h70{height:pxTo2em(70px)}
.g_h100{height:pxTo2em(100px)}
.g_h130{height:pxTo2em(130px)} .fs2_6{color:#;font-size: pxTo2rem(20px)}
.fs25_6{color:#;font-size: pxTo2rem(25px)}
.fs2_9{color:#;font-size: pxTo2rem(20px)} .cl_666{color:# !important;}
.red{color:red !important} .bd_top_no{border-top:none !important}
我的常用sass工具库（pc端）：
@charset "utf-8"; /*引进图片合并给一个变量(后面会用到这个变量)*/
$sprites1:sprite-map("cloud/*.png",$spacing:10px,$layout: vertical); /*转换px到rem*/
$browser-default-font-size : 20px !default;
@function pxTorem($px){
@if $px == {$px:0px}
@return $px / $browser-default-font-size * 1rem;
}
@function pxTo2rem($px){
@if $px == {$px:0px}
@return $px / ($browser-default-font-size*) * 1rem;
} /*雪碧图mixin引块，pc和移动端因为目前编译不过GIF，故暂用png8*/
$media:false;
@mixin iconItem($sprites,$name,$iE6:null){
background:sprite-url($sprites) no-repeat; //获取整个雪碧图路径
@if $iE6 != null{ //null
_background:sprite-url($iE6) no-repeat; //此处传进来的格式须是png8
}
$width:image-width(sprite-file($sprites,$name)); //sprite-file 获取目标图片
$height:image-height(sprite-file($sprites,$name)); //获取目标图片
$toalWidth:image-width(sprite-path($sprites)); //获取整张图的宽度
$totalHeight:image-height(sprite-path($sprites)); //获取整张图的高度
$widthHalf:ceil($width/); //获取宽度的一半
$heightHalf:ceil($height/); //获取高度的一半
//sprite-position 获取目标图的位置,nth操作数组
$posX:round(nth(sprite-position($sprites,$name),)); //获取沿x轴的位移
$posY:round(nth(sprite-position($sprites, $name), )); //获取沿y轴的位移
@if $media{//wap
height:pxTorem($heightHalf);
width:pxTorem($widthHalf);
font:$posX;
font:$posY;
background-position: pxTo2rem($posX) pxTo2rem($posY);
background-size:pxTo2rem($toalWidth) pxTo2rem($totalHeight);
} @else{//PC
height:$height;
width:$width;
background-position:sprite-position($sprites,$name);
}
}
/*带时间戳的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin timestampImg($imgUrl){
background:image-url($imgUrl) no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
}
/*base64位的图片,pc和移动端 ,$imgUrl必须带文件夹和文件名字符串,例"icon/pig.png"*/
@mixin base64Img($imgUrl){
background:inline-image($imgUrl) no-repeat;
$width:image-width($imgUrl);
$height:image-height($imgUrl);
@if $media{ //wap
width:pxTo2rem($width);
height:pxTo2rem($height);
background-size:pxTo2rem($width) pxTo2rem($height);
} @else{
height:$height;
width:$width;
}
} @mixin boradius($size){
-webkit-border-radius:$size;
-moz-border-radius:$size;
-o-border-radius:$size;
-ms-border-radius:$size;
border-radius:$size;
}
%box{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
%inlineb{display:inline-block;}
%block{display:block;}
//绝对居中
@mixin pscenter($width,$height){
width:$width;
height:$height;
position:absolute;
left:%;
top:%;
margin:(-$height/) (-$width/)
} /*******************基础样式*******************/
/*\5FAE\8F6F\96C5\9ED1 微软雅黑 '\5b8b\4f53'宋体*/
html,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, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
padding: ;
margin:
}
html,body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;}
img {
border: none;
}
ul, ol {
list-style: none
}
input, textarea, select, button {
resize: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
outline: none;
font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\5b8b\4f53',sans-serif,arial;
}
button, input[type="button"], input[type=submit], input[type=reset] {
cursor:pointer;
border: none;
}
input[type="text"]{
color:#ccc
}
select{color:#}
input[type="search"] {
-webkit-appearance:textfield
}
/* ie6 ie7去除text产生的蓝色边框 */
input[type=submit], input[type=reset] {
filter:chroma(color=#);
}
//关闭ie10里面的叉
input:-ms-clear{display:none;}
a img {
bord: none;
}
a{
outline:none;
text-decoration:none;
-webkit-tap-highlight-color:rgba(,,,);
blr:expression(this.onFocus=this.blur());
}
a:focus{
outline:;
}
.g_cf:after{
display:block;
content:'\20';
clear:both;
height:;
visibility:hidden;
} .g_cf{
*zoom:;
overflow:hidden
}
.g_h5{height:5px}
.g_h10{height:10px}
.g_h15{height:15px}
.g_h20{height:20px}
.g_h30{height:30px}
.g_h40{height:40px}
.g_h100{height:100px}
常用的sass编译库的更多相关文章
- sass编译
sass编译 命令行编译 单文件转换命令 sass style.scss style.css 单文件监听命令 sass --watch style.scss:style.css 文件夹监听命令 sas ...
- 怎么使用Less/Sass编译工具koala
怎么使用Less/Sass编译工具koala 如何使用Less/Sass编译工具koala 一.SASS调试插件的方法 如需调试功能,请在编译输出的时候输出debug信息,那样解析的css文件中就会包 ...
- sass安装：webpack sass编译失败，node-sass安装失败的终极解决方
文章来源:sass安装:webpack sass编译失败,node-sass安装失败的终极解决方 sass难言之隐-sass安装的坑 之前花了很多时间折腾node-sass,发现sass老是安装不上 ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Sass学习之路(3)——Sass编译
Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还 ...
- ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
sass文件编译时候使用ruby环境,无论是界面化的koala工具还是命令行模式的都无法通过,真是令人烦恼. 容易出现中文注释时候无法编译通过,或者出现乱码,找了几天的解决方法终于解决了. 这个问题的 ...
- Sass 编译的几种方法
常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是 ...
- sass 工具库
github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting ...
- .Net 常用插件及第三方库
.Net 常用插件及第三方库 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址: ...
随机推荐
- Mysql: Connect/C++ 使用过程中发现返回 std::string 造成的内存泄露
在使用 Connect/C++ ,测试时发现在调用 getString 出现了内存增长的情况. ConstructOutput(); //打印出当前内存 ;i<;++i) { prepareSt ...
- Windoows窗口程序六
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...
- IoC是一个很大的概念,可以用不同的方式实现。
IoC是一个很大的概念,可以用不同的方式实现.其主要形式有两种: ◇ 依赖查找:容器提供回调接口和上下文条件给组件.EJB和Apache Avalon 都使用这种方式.这样一来,组件就必须使用容器提供 ...
- （转）SDL 1.2 to 2.0 Migration Guide--SDL1.2更新到SDL2.0指南
SDL 1.2 to 2.0 Migration Guide 目录 SDL 1.2 to 2.0 Migration Guide Translations Introduction Overview ...
- (转)Tiny210v2( S5PV210 ) 平台下 FIMD 对应 的 framebuffer 驱动中，关于 video buffer 的理解
原文:http://www.arm9home.net/read.php?tid-25938.html 管理提醒: 本帖被 xoom 执行加亮操作(2012-12-13) 如之前所说,一直想知道显示数据 ...
- put ListView in a ScrollView(bug fixed)
Android: put ListView in a ScrollView When I need to use ListView with other controls on the same ...
- java中关于二进制的初步。
两个int型和一个long型的转换: long now=1368257088802L; int low = (int) (0xFFFFFFFFL & now) ...
- Centos下查看和修改网卡Mac地址
linux/Centos下查看网卡Mac地址,输入命令: #ifconfig -a eth0 Link encap:Ethernet HWaddr 00:e4:56:2E:D8:20 00:e4:56 ...
- oracle的loop等循环语句的几个用法小例子[转]
--loop循环用法 (输出1到10) declare v_num number(2) := 0; begin loop v_num := v_num + 1; exit when v_num > ...
- POJ 1661 Help Jimmy(递推DP)
思路: 1. 每个板子有左右两端, dp[i][0], dp[i][1] 分别记录左右端到地面的时间 2. 从下到上递推计算, 上一层的板子必然会落到下面的某一层板子上, 或者地面上 总结: 1. 计 ...