Paper CSS 빌드 구성 토론 #171
Description
이번에 Contributon 톤 행사에 참여 하고 있는 개발 자입 니다.
이슈 다루면서 불편하점이 있어 문의 드립니다.
불편한 점은 화면 UI 에 구성 되은 CSS 디자인을 한땀 한땀 만들어서 이번에 추가 했는데요
Paper에 빌드시 CSS 전처리기 툴 같이게 들어가면 좋겠습니다.
예를 들어 Stylus 같은 CSS 전처기기 툴 같은거요
- https://www.stylus.com/
- 간단히 소개하자면 스타일러스는 종속형 시트로 컴파일되는 동적 스타일시트 전처리기 언어입니다.
1. example stylus coding
.confirm-message
background-color: white
text-align: center
.message-content-layout
max-width: 500px
margin: 0 auto
text-align: center
.message-indexer
padding: 0 0 10px 0
font-size: 16px
.message-indexer-holder
height: 20px
width: 100%
> .message-content
display: table
width: 100%
table-layout: fixed
min-height: 100px
padding : 0px
> div
display: table-cell
vertical-align: middle
> .center-message
padding: 0px 50px
color : #333
.message-title
padding: 0px 5px
font-weight: bold
> span
padding: 10px 15px
display: inline-block
color : #333
> i
color : #333
padding: 3px 5px
font-size : 17px
.center-message-content
padding: 5px
.message-btns
padding: 15px
.message-btns button
cursor: pointer
2. stylus build 결과
.confirm-message {
background-color: #fff;
text-align: center;
}
.message-content-layout {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.message-content-layout .message-indexer {
padding: 0 0 10px 0;
font-size: 16px;
}
.message-content-layout .message-indexer-holder {
height: 20px;
width: 100%;
}
.message-content-layout > .message-content {
display: table;
width: 100%;
table-layout: fixed;
min-height: 100px;
padding: 0px;
}
.message-content-layout > .message-content > div {
display: table-cell;
vertical-align: middle;
}
.message-content-layout > .message-content > .center-message {
padding: 0px 50px;
color: #333;
}
.message-content-layout > .message-content > .center-message .message-title {
padding: 0px 5px;
font-weight: bold;
}
.message-content-layout > .message-content > .center-message .message-title > span {
padding: 10px 15px;
display: inline-block;
color: #333;
}
.message-content-layout > .message-content > .center-message .message-title > i {
color: #333;
padding: 3px 5px;
font-size: 17px;
}
.message-content-layout > .message-content > .center-message .center-message-content {
padding: 5px;
}
.message-btns {
padding: 15px;
}
.message-btns button {
cursor: pointer;
}