将多行CSS保存在一个较小的变量中

时间:2018-10-18 16:15:49

标签: css less

我想知道是否可以做这样的事情:

import java.util.HashMap;

public class Library{
  public Library(){

  }

  public void getFinishedBooks (HashMap<String, Boolean> library){ 
    if(library.size() < 1){
      System.out.println("Bye");   
    }
    else {
      for (String book : library.KeySet()) {
        if (library.get(book) == true) {
          System.out.println(book);
        }
      }
    }

  }

      public static void main(String[] args) {
      HashMap<String,Boolean> myBooks=new HashMap<String, Boolean>();

      myBooks.put("Road Down The Funnel",true);
      myBooks.put("Rat: A Biology",false);
      myBooks.put("TimeIn",true);
      myBooks.put("3D Food Printing",false);


      Library myLibrary = new Library();
      myLibrary.getFinishedBooks(myBooks);


    }
}

我知道它的相对废话,但是我想避免一遍又一遍地写边框参数,我在较少的文档中找不到真正的细节。我尝试了:extend,但我认为我还没有真正掌握这个主意:/

这是为了做

@{basic-border} {
    border: 2px solid lightgrey;
    background-color: white;
    border-radius: 4px;
}
.border-area {
    &__top {
        @{basic-border};
        height: 60px;
        margin-bottom: 8px;
    }
    &__main-info {
        @{basic-border};
        padding: 10px;
    }
}

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

您要寻找的被称为混合。 Mixins的定义类似于常规样式,但也可以在其中包含参数。 Here's the docs on mixins。在您的情况下,您需要执行以下操作:

.basic-border() {
   border: 2px solid lightgrey;
   background-color: white;
   border-radius: 4px;
}

.border-area {
    &__top {
        .basic-border;
        height: 60px;
        margin-bottom: 8px;
    }
    &__main-info {
        .basic-border;
        padding: 10px;
    }
}