前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我自己整理的一份reset.css的scss版 以作记录

我自己整理的一份reset.css的scss版 以作记录

作者头像
FungLeo
发布2022-11-28 08:48:42
5870
发布2022-11-28 08:48:42
举报

上午发了一下less版的reset。但是现在领导要求全部转scss了。于是我尝试自己转换一下。 但是过程中出错频繁。非常让我头疼。 在less中,可以混入任何class。但是在scss中,需要用@mixin 申明 和 @include 调入。 当然,这样是有优点的,就是在less中,可能会把不需要的混入css给编译出来(在这个样式没有使用变量的情况下,因为他无法分辨这是普通样式还是混入样式。),而scss就没有这个问题了。只是书写有点略微复杂。主要是我记不住include这个单词,mixin倒是记住了,迷信嘛~ 本来以为很顺畅的就能转换了,毕竟这是一段非常简短的代码。但结果出错了,我还查找了半天。结果发现问题出现在我把@mixin写在了最后。而把它写到前面去就好了。

代码如下:

代码语言:javascript
复制
// Setting parameters by fungleo

$WinWitdh:1200px;      
$BaseC:#555;
$LinkC:#06f;
$HoverC:#f60;
$FontSize:13px;



// mixins

@mixin dz($time:0.25s){
    -webkit-transition: all $time ease-in-out;
    -moz-transition: all $time ease-in-out;
    -o-transition: all $time ease-in-out;
    transition: all $time ease-in-out;
}
// reset by fungleo date 2015.08.27

@charset "UTF-8";


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}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed}
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:$LinkC; text-decoration:none;cursor: pointer;
    &:link,&:visited, &:active{color: $LinkC;}
    &:hover, &:focus {color:$HoverC; text-decoration:underline;outline:none;}
    &,span,i,em,u,strong,b,p,img,ul,li,div,dd,dt,dl,ol,table,th,td,h1,h2,h3,h4,h5,h6,input,textarea,button,small,select {
        cursor: pointer; @include dz;}
}


abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}

// base by fungleo

html {min-width:$WinWitdh;overflow-y: scroll;}
body {font-size: $FontSize;color: $BaseC;line-height: 2;}
body,button, input, select, textarea {font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";*font-family:"\5FAE\8F6F\96C5\9ED1";}

h1 {font-size: $FontSize+10;}
h2 {font-size: $FontSize+8;}
h3 {font-size: $FontSize+6;}
h4 {font-size: $FontSize+4;}
h5 {font-size: $FontSize+2;}
h6 {font-size: $FontSize;}

hr {border: none;height: 1px;background: lighten($BaseC,50%);}

.fl {float: left;}
.fr {float: right;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}

.cf:before, .cf:after,.web:before, .web:after,.web_:before, .web_:after {content:"";display:table;}
.cf:after,.web:after,.web_:after {clear:both;}
.cf {zoom:1;}

.web {width: $WinWitdh;margin-left: auto;margin-right: auto;zoom:1;}
.web_ {min-width:$WinWitdh;width: 100%;zoom: 1;}

.block {display: block;}
.none {display:none}
.clear {clear: both; }

最后,学习这东西倒不是太复杂,主要是我javascript水平太水,这可怎么弄啊?

ps: less版地址:http://blog.csdn.net/fungleo/article/details/48025537

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档