-
SCSS-configProject using node.js/Cloning Youtube 2020. 9. 2. 11:18
config/reset.scss
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { all: unset; cursor: pointer; } *, input { box-sizing: border-box; } input { border: none; box-sizing: border-box; &:focus, &:active { outline: none; } }
config/_variables.scss
$red: #ea232c; $dark-red: #bb2f2a; $grey: #f5f5f5; $black: #444444; $dark-grey: #e7e7e7; $facebook: #3a5998;
config/reset.scss
.profile__avatar { width: 150px; height: 150px; border-radius: 50%; background-color: $red; } .avatar--small { width: 65px; height: 65px; border-radius: 50%; background-color: $red; }
main.scss
body { font-family: 'Open Sans', sans-serif; // font-family: 'Caesar Dressing', cursive; } a { text-decoration: none; } main { min-height: 70vh; max-width: 1200px; margin: 0 auto; } button { background-color: #3498db; color: white; padding: 7px 10px; font-weight: 600; font-size: 16px; border-radius: 8px; border: none; cursor: pointer; box-shadow: 1px 4px 5px #e0e0e0; width: 100%; max-width: 400px; padding: 10px 5px; }
styles.scss에는 내가 만든 scss 파일들을 만들 때마다 추가해준다.
View
참고 자료
소스 코드
https://github.com/zpskek/wetube-v3/commit/46a85486986cf68995b5defa1225f32005653b10
'Project using node.js > Cloning Youtube' 카테고리의 다른 글
SCSS-footer (0) 2020.09.02 SCSS-header (0) 2020.09.02 gulp (0) 2020.09.01 Webpack (0) 2020.09.01 delete-video (0) 2020.08.31