Stylus 코드를 다시 전송할 때의 일

15227 단어 stylus
비록 나는 아직 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
가변 변수나 다차원 배열을 사용할 수 없다면 더 많은 생략 방법을 생각해 낼 수 없다

좋은 웹페이지 즐겨찾기