CODEWITHSUNDEEP
csssass
user8079593
user8079593

Reputation:

SASS variables not working

I am new to SASS and I just simply follow the steps given on SASS guide website to install SASS but it is not working at all and does not convert my SASS into CSS, like i have taken a variable for colors but it did not work.I think I am missing some major part in this please anyone guide me so i can do my 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;
}

Upvotes: 3

Views: 16547

Answers (2)

Hadis Sulejmani
Hadis Sulejmani

Reputation: 81

First, you need to compile the .scss files to .css with a sass compiler like http://koala-app.com/. Then, you can access just the .css files in your html.

<link rel="stylesheet" type="text/css" href="sass1.css"/>

Upvotes: 0

kmg
kmg

Reputation: 519

In the terminal, run the following command in the folder where the stylesheets are. It will detect whenever there is a change in .scss file and it will update .css file. This css file has to be referred in the html file.

sass --watch style.scss:style.css

Upvotes: 4

Related Questions