Stylus 코드를 다시 전송할 때의 일
15227 단어 stylus
먼저 이전 코드를 수정합니다
main.styl
techtag-style(base-color=gray)
border-bottom base-color solid 4px
.techtag
/* lang */
&.techtag-language, &.techtag-cpp, &.techtag-php, &.techtag-java, &.techtag-javascript, &.techtag-processing, &.techtag-c, &.techtag-ruby
techtag-style red
/* metalang */
&.techtag-metalang, &.techtag-jquery, &.techtag-less, &.techtag-processing-js, &.techtag-coffeescript, &.techtag-sass, &.techtag-stylus
techtag-style orange
/* framework */
&.techtag-framework, &.techtag-codeigniter, &.techtag-bootstrap, &.techtag-slim, &.techtag-pure, &.techtag-materialize, &.techtag-foundation
techtag-style yellow
/* lib */
&.techtag-lib, &.techtag-dxlib, &.techtag-java_servlet, &.techtag-mecab
techtag-style lime
/* api */
&.techtag-api, &.techtag-twitterapi, &.techtag-twitterwebapi, &.techtag-ustreamapi, &.techtag-yahooapi, &.techtag-metroapi, &.techtag-googlemapapi
techtag-style lightblue
/* opt service */
&.techtag-service, &.techtag-googlescript
techtag-style lightblue
/* os */
&.techtag-os, &.techtag-windows, &.techtag-linux
techtag-style
/* db */
&.techtag-db, &.techtag-mysql, &.techtag-postgresql
techtag-style green
/* ide,editor */
&.techtag-editor, &.techtag-visualstudio, &.techtag-eclipse, &.techtag-netbeans, &.techtag-vim, &.techtag-intellij_idea
techtag-style orchid
/* version control */
&.techtag-admin, &.techtag-git, &.techtag-grunt, &.techtag-composer, &.techtag-npm, &.techtag-gem, &.techtag-bower
techtag-style darkgray
elzup.com의 표시 섹션테크 라벨에 새 라벨을 추가하면 여기 &.techta-hoge 추가 필요
(원래 카테고리별로 CSS등급을 붙이면 이런 관리가 필요없다)
한 마디로 하면 태그의 이름을 배열로 정의하고, 모두 순환 처리로 고친다
main.styl
label_name_list = lang metalang lib
label_lang = language cpp php java javascript processing c ruby
label_lang_col = red
label_metalang = metalang jquery less processing-js coffeescript sass
label_metalang_col = orange
for cate_name in label_name_list
for tag_name in label_{cate_name}
&.techtag-{tag_name}
techtag-style label_{cate_name}_col
이렇게 쓰면 컴파일 오류가 발생합니다.Stylus에서는 선택기 및 속성 이름에 가변 쓰기 가능
가격에 쓰면 안 될 것 같아요.
즉
k = left
.col-{k}
border-{k} 3px
이걸 컴파일하면....col-left {
border-left: 3px;
}
동작 t = col-{k}
이것은 잘못이다다차원 배열을 사용하고 싶지 않은 것 같아요.
나는 가변 변수나 다차원 배열을 사용하고 싶었지만, 없어서, 이런 구분자를 끼고 써 보았다
glue = __
labels = label_lang glue label_metalang glue label_framework
colors = red orange yellow lime lightblue lightblue ghostwhite green orchid darkgray
i = 0
for tag_name in labels
if tag_name = glue
i = i + 1
else
&.techtag-{tag_name}
techtag-style colors[i]
어레이 결합 불량마지막으로 순환 함수를 추가해서 이렇게 썼어요.
techtag-roop(labels color)
for tag_name in labels
&.techtag-{tag_name}
techtag-style color
.techtag
/* lang */
label_lang = language cpp php java javascript processing c ruby
techtag-roop label_lang red
/* metalang */
label_metalang = metalang jquery less processing-js coffeescript sass stylus
techtag-roop label_meta orange
/* framework */
label_framework = codeigniter bootstrap slim pure metarialize foundation
techtag-roop label_framework yellow
/* lib */
label_lib = lib dxlib java_servlet mecab
techtag-roop label_lib lime
/* api */
label_api = api twitterapi twitterwebapi ustreamapi yahooapi metroapi googlemapapi
techtag-roop label_api lightblue
/* opt service */
label_service = service googlescript
techtag-roop label_service lightblue
/* os */
label_os = os windows linux
techtag-roop label_os ghostwhite
/* db */
label_db = db mysql postgresql
techtag-roop label_db green
/* ide,editor */
label_editor = editor visualstudio eclipse netbeans vim intellij_idea
techtag-roop label_editor orchid
/* version control */
label_admin = admin git grunt composer npm gem bower
techtag-roop label_admin darkgray
가변 변수나 다차원 배열을 사용할 수 없다면 더 많은 생략 방법을 생각해 낼 수 없다
Reference
이 문제에 관하여(Stylus 코드를 다시 전송할 때의 일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/elzup/items/80c4b7394ad038c6fb42텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)