2017-07-29 5 views
1

私はCSSファイルを持っています。エディタには「ミニマップ」とASCIIブロックのテキスト見出しがありますので、ファイルをより速くナビゲートすることができます。CSSの行コメントがファイルを破る

私は、見出しのいくつかがCSSを壊す奇妙なバグがあります。

ブロックコメントを使用するか削除するとルールが修正されますが、いくつかは作品に関係なく動作します。 ROUND見出しとPLAYER見出しの間のもの。ここで

壊れCSSれる:

@import url('https://fonts.googleapis.com/css?family=Roboto'); 

body { 
    padding-top: 70px; 
    padding-bottom: 35px; 
} 

////////////////////////////////////////////////////////////////////////////////////////////// 
// ## ## ### ##  ## #### ######  ### ######## #### ####### ## ## // 
// ### ## ## ## ##  ## ## ## ## ## ##  ##  ## ##  ## ### ## // 
// #### ## ## ## ##  ## ## ##   ## ##  ##  ## ##  ## #### ## // 
// ## ## ## ##  ## ##  ## ## ## #### ##  ## ##  ## ##  ## ## ## ## // 
// ## #### ######### ## ## ## ## ## ######### ##  ## ##  ## ## #### // 
// ## ### ##  ## ## ## ## ## ## ##  ## ##  ## ##  ## ## ### // 
// ## ## ##  ## ### #### ###### ##  ## ## #### ####### ## ## // 
////////////////////////////////////////////////////////////////////////////////////////////// 

.navbar { 
    background-color: black; 
    border-bottom: 2px solid white; 
} 

.navbar a { 
    color: white; 
    text-decoration: none; 
} 

.navbar a:hover { 
    color: #9d9d9d; 
    text-decoration: none; 
} 

.nav>li>a:focus, .nav>li>a:hover { 
    background-color: black; 
} 

.navbar-toggle { 
    border: 1px solid white; 
    border-radius: 4px; 
} 

.icon-bar { 
    background-color: white; 
} 


/////////////////////////////////////////////////////// 
// ######## ####### ######## ##  ## ###### // 
// ##  ##  ## ##  ## ### ### ## ## // 
// ##  ##  ## ##  ## #### #### ##  // 
// ###### ##  ## ######## ## ### ## ###### // 
// ##  ##  ## ## ## ##  ##  ## // 
// ##  ##  ## ## ## ##  ## ## ## // 
// ##  ####### ##  ## ##  ## ###### // 
/////////////////////////////////////////////////////// 

.form-control-on-black { 
    color: white; 
    background-color: black; 
    border: 1px solid white; 
    border-radius: 4px; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

.form-control-on-black:focus { 
    border-color: white; 
    outline: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

.btn-on-black { 
    color: white; 
    background-color: black; 
    border-color: white; 
} 


///////////////////////////////////////////////////////////////////////////////// 
// ###### ######## ###### ##  ## ######## ## ## ######## ###### // 
// ## ## ##  ## ## ### ### ##  ### ## ## ## ## // 
// ##  ##  ##  #### #### ##  #### ## ## ##  // 
// ###### ###### ## #### ## ### ## ###### ## ## ## ##  ###### // 
//  ## ##  ## ## ##  ## ##  ## #### ##   ## // 
// ## ## ##  ## ## ##  ## ##  ## ### ## ## ## // 
// ###### ######## ###### ##  ## ######## ## ## ##  ###### // 
///////////////////////////////////////////////////////////////////////////////// 

.jumbotron { 
    margin-bottom: 20px; 
} 

// ###### ####### #  # #  # ###### 
// #  # #  # #  # ## # #  # 
// #  # #  # #  # # # # #  # 
// ###### #  # #  # # # # #  # 
// # # #  # #  # # # # #  # 
// # # #  # #  # # ## #  # 
// #  # ####### ##### #  # ###### 

#round-card { 
    padding-bottom: 80px; 
} 

.card-space { 
    color: #337ab7; 
    border-bottom: 2px solid white; 
} 

.card-space:hover { 
    color: #337ab7; 
    border-bottom: 2px solid #337ab7; 
} 

#submit-card-btn { 
    position: absolute; 
    bottom: 35px; 
    right: 60px; 
} 


// ###### #   # #  # ####### ###### 
// #  # #   # # # # #  #  # 
// #  # #  # # # # #  #  # 
// ###### #  #  # # ##### ###### 
// #  #  ####### # #  # # 
// #  #  #  # # #  # # 
// #  ####### #  # # ####### #  # 

#player-cards { 
    background-color: black; 
} 

#card-nav-wrap { 
    position: relative; 
} 

#card-nav-wrap>#left-fade { 
    width: 50px; 
    height: 100%; 
    pointer-events: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 5; 
    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); 
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); 
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); 
} 

#card-nav-wrap>#right-fade { 
    width: 50px; 
    height: 100%; 
    pointer-events: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 5; 
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); 
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
} 

#card-nav { 
    z-index: 1; 
} 


// ##### ##### ####### ###### ####### 
// #  # #  # #  # #  # # 
// #  #  #  # #  # # 
// ##### #  #  # ###### ##### 
//   # #  #  # # # # 
// #  # #  # #  # # # # 
// ##### ##### ####### #  # ####### 

#score { 
    background-color: black; 
    color: white; 
    padding-bottom: 5px; 
} 

.label-czar { 
    background-color: white; 
    color: black; 
} 


/////////////////////////////////////////////////////// 
// ######  ### ######## ######## ###### // 
// ## ## ## ## ##  ## ##  ## ## ## // 
// ##  ## ## ##  ## ##  ## ##  // 
// ##  ##  ## ######## ##  ## ###### // 
// ##  ######### ## ## ##  ##  ## // 
// ## ## ##  ## ## ## ##  ## ## ## // 
// ###### ##  ## ##  ## ######## ###### // 
/////////////////////////////////////////////////////// 

.card { 
    position: relative; 
} 

.card p { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 900; 
} 

.card-light{ 
    border: 3px solid black; 
    color: black; 
    background: white; 
} 

.card-dark{ 
    border: 3px solid black; 
    color: white; 
    background: black; 
} 

.card-big { 
    width: 75%; 
    max-width: 240px; 
    height: 300px; 
    margin: 0 auto; 
    border-radius: 24px; 
    padding: 5%; 
} 

.card-big p { 
    font-size: 26px; 
} 

.card-small{ 
    width: 170%; 
    max-width: 120px; 
    height: 190px; 
    border-radius: 12px; 
    margin: 0 auto; 
    padding: 5%; 
} 

.card-small p { 
    font-size: 18px; 
} 
+0

奇妙なバグは、いくつかのコメントが何かを破らないということです。 CSSは '/ * * /'ブロックのみをサポートしています。 –

+0

CSSで唯一有効なコメントであるコメントブロック '/ * * /'を使ってみましたか?しかし、 '/'はSass/Lessで動作しますが、私はそれを使うとは思わない。 – kamyl

+0

@OriDroriはいそれはちょっと奇妙です... – leumas95

答えて

5

/* */であなたの//を交換してください。

CSSで唯一有効なコメントタイプはブロック1、/* */です。しかしインラインコメント//はSass/Lessで動作します。

関連する問題