移動端系列博文基礎reset.scss和mixin.scss

下面我將寫一系列的關於移動端的博文,如果每次都需要在博文前面引用這樣一段reset.scss和mixin.scss,那將是一件相當噁心的事情,所以,我將這一段獨立出來,發表一篇總的引用博文.以後的博文,只需要引用一個連結就可以了.算是當成一個@mixin,可以隨時@include的一段博文片段吧.

我的CSS部分將全部使用sass來進行書寫,如果您不會sass,請閱讀我這篇博文CSS預編譯技術之SASS學習經驗小結

基本reset.scss\mixin.scss

我將使用下面的reset.scss來重置瀏覽器的預設屬性.

reset

@charset "UTF-8";
html {font-size: 62.5%;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote,table,th,td,menu{margin:0;padding:0;box-sizing:content-box;}
table{border-collapse:collapse;border-spacing
 
:0;}
ul,ol,menu{list-style:none}
fieldset,img{border:none}
img,object,select,input,textarea,button{vertical-align:middle}
input,textarea,select,address,caption,cite,code,dfn,em,i,b,strong,small,th,var,abbr{font-size:100%;font-style:normal}
caption,th {text-align: left;}
article,aside,footer,header,hgroup
 
,nav,section,figure,figcaption {display: block;}
code, kbd, pre, samp, tt { font-family: Consolas,"Courier New", Courier, monospace;}
address, cite, dfn, em, var,i {font-style: normal;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:"";content: none;}
a { 
    color:#06f; text-decoration:none;cursor: pointer;
    &:link,&:visited, &:active{color: #06f;}
    &:hover, &:focus {color:#f60; text-decoration:underline;outline:none;}
}

mixin混入程式碼

這些程式碼,將會提供一些程式碼塊給我在在後面的製作中隨時呼叫.

//清理浮動
.cf{
    zoom:1;
    &:before,&:after {content:"";display:table;}
    &:after {clear:both;}
}
// 連結動畫
@mixin dz($time:0.25s){
    -webkit-transition: all $time ease-in-out;
    transition: all $time ease-in-out;
}
// 文字描邊
@mixin ts($s1:1px,$s2:1px,$color:#fff){
    text-shadow:
    $s1 $s1 $s2 $color,
    -$s1 $s1 $s2 $color,
    $s1 (-$s1) $s2 $color,
    -$s1 (-$s1) $s2 $color;
}
// 旋轉
@mixin xz($deg:360){
    -webkit-transform:rotate($deg+deg);
    transform:rotate($deg+deg);
}
// 旋轉放大
@mixin xzfd($deg:360,$s1:1.2){
    -webkit-transform:rotate($deg+deg) scale($s1);
    transform:rotate($deg+deg) scale($s1);
}
// 移動動畫
@mixin yd($s1:0,$s2:0){
    -webkit-transform:translate($s1,$s2);
    transform:translate($s1,$s2);
} 
// 禁止選中
@mixin ns{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
// 一行文字標題超出顯示省略號
@mixin online($s1) {
    overflow: hidden;
    line-height: $s1;
    height: $s1;
    white-space: nowrap;
    text-overflow: ellipsis;
}
// 計算(基本不會採用)
@mixin calc($property, $expression) { 
    #{$property}: -webkit-calc(#{$expression}); 
    #{$property}: calc(#{$expression}); 
}
// 一行文字垂直居中,並隱藏溢位
@mixin hlh($s1) {
    height: $s1;
    line-height: $s1;
    overflow: hidden;
}
// 列表中更多顯示右鍵頭的圖片處理
@mixin goto($s1:1.2rem){
    background:url("../image/icon_goto.png") right center no-repeat;
    background-size: auto $s1;
}