[DAY17]設定自己的reset.sass

2022 iThome 鐵人賽

DAY 17

Modern Web

關於SASS/SCSS系列第 17 篇

14th鐵人賽

weiiiiiiii

2022-10-01 00:14:19

530 瀏覽

分享至

前情提要

為甚麼會有reset的出現?
它其實因應的是CSS檔案，
大家都知道，css的出現主要是美化html，
可以多一些自己的風格。
但是在不同的瀏覽器下渲染出來的效果都不同QQ，
(在不同的瀏覽器預設的CSS不同)
儘管是一樣的檔案也可能不同。
這才是我們需要reset.css的原因。

正文

沒有Reset的時候

|舉例|
在沒有設定邊界的情況下，
我放的色塊還是不會貼齊瀏覽器頁面的最角落。

|懶人也可以有不用自己來的reset|
如果你懶得自己設定reset的話，
下載compass的時候就自帶compass/reset。
試用看看，可以的話就省了以下這些步驟了。

|Reset從哪開始|
多數人的reset都是結合固有的版本然後再客製化，
雖然說是自己的reset，
但要從頭開始自己部署還是偏麻煩。
除了麻煩之外，
可能會不太有頭緒。

大家常用的reset版本介紹

常見的reset版本:

Html5 的 normalize.css https://necolas.github.io/normalize.css/
Meyer reset.css

|Normalize.css|
現在大家比較廣泛使用的reset，
配合html5而產生，去除不同瀏覽器中的bug。
它配合著不同的瀏覽器持續保持一致，
可是也會保留一些瀏覽器的預設好的地方，
而不是全部刪除初始化。
支援多種瀏覽器的使用。
有很多詳細的註解，
自己改reset也不會不知道要改哪行範例還有改錯的問題。

|Meyer reset.css|
這個是一個Eric Meyer的版本。
這個版本原本也被廣泛使用，
也有具備在不同瀏覽器產生的效果不符的困境，
但它的方法比較極端，
它是把不一致的地方強制歸0。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

|Reset通常都是css檔怎麼辦??|
我們之前的編譯都是把SASS/SCSS轉換成CSS，
也有各式各樣的工具可以使用，
反向編譯當然也可以。
CSS轉SCSS: https://verytoolz.com/css-scss.html
CSS轉SASS: https://css2sass.herokuapp.com/

|我的reset版本選擇|
很多人會把兩個版本結合之後使用，
是我的話我就會先使用normalize.css再引入meyer.css，
因為normalize.css比較齊全，
比較符合大部分的需求。
但是兩者都有一些互相沒有的東西，
最好的方法就是結合兩者再配合自己的需求做客製化。