css - SASS variables not working -
i new sass , follow steps given on sass guide website install sass not working @ , not convert sass css, have taken variable colors did not work.i think missing major part in please guide me can assignment further.
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; }
in terminal, run following command in folder stylesheets are. detect whenever there change in .scss
file , update .css
file. css file has referred in html file.
sass --watch style.scss:style.css
wiki
Comments
Post a Comment