2017-08-23 1 views
0

を動作していないが、それはまったく動作していないと私は変数のためにとっているように、CSSに私のSASSを変換しません。それはうまくいきませんでした。私は私が私の譲渡をさらに行うことができるように誰もが私を案内してくれています。SASS変数IがSASSに新しいですし、私はただ単にSASSをインストールするには、SASSガイドのウェブサイト上の手順に従ってください

HTML:

<html> 
    <head> 
     <title>SASS1</title> 
     <link rel="stylesheet" type="text/css" href="sass1.scss"/> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="sub_container"> 
       <div class="first_box"> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
       </div> 
       <div class="second_box"> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
        <div class="inner_box"></div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

SASS:ターミナルで

$black_color : #000; 
$voilet_color : #2A2E54; 
.container 
{ 
    width: 602px; 
    height: 501px; 
    border: 3px solid $black_color; 
    background-color: $voilet_color; 
    margin: auto; 
    box-sizing: border-box; 
} 
.sub_container 
{ 
    width: 442px; 
    height: 321px; 
    border: 10px solid #C1F1FD; 
    position: relative; 
    top: 76px; 
    left: 76px; 
    -webkit-box-shadow: 0 0 1px #000, inset 0 0 1px #000; 
    -moz-box-shadow: 0 0 1px #000, inset 0 0 1px #000; 
    box-shadow: 0 0 1px #000, inset 0 0 1px #000; 
} 
.first_box, .second_box 
{ 
    width: 386px; 
    height: 114px; 
    border: 10px solid #FFF189; 
    margin-top: 18px; 
    margin-left: 18px; 
} 
.inner_box 
{ 
    width: 30px; 
    height: 56px; 
    border: 10px solid #FFB286; 
    display: inline-block; 
    margin-left: 19px; 
    margin-top: 18px; 
} 
+1

どのようにしてCSSをCSSに変換しようとしていますか? – kmg

+0

方法はありますか?私はそれが自動的に変換すると思った –

+0

いいえ、それは自動的にCSSに変換されません。ターミナルで次のコマンドを使うことができます:sass --watch style.scss:style.css style.scssの代わりに – kmg

答えて

1

、スタイルシートがあるフォルダで次のコマンドを実行します。 .scssファイルに変更があるたびに検出し、.cssファイルを更新します。このCSSファイルはhtmlファイルで参照する必要があります。

sass --watch style.scss:style.css 
関連する問題