CODEWITHSUNDEEP
csssass
bora.dev
bora.dev

Reputation: 31

how to implement sass code

I am trying to incorporate this sass code,but it is not happening, please let me know the process how i can implement it.

@charset "utf-8";
/* CSS Document */

h1 { color:#0ec3f7;}

$divColor : #f8f9be;
$borderStyle : dotted;
$width : 700px;
$height : 200px;

#first {background-color:divColor; border:1px borderStyle #F00; width:width; height:height;}

This the html file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
<title>css-saas-less</title>
<link rel="stylesheet" href="sasstemp.scss"  />    
</head>    
<body>   
<h1> CSS preprocessors </h1>

<div id="first">welcome to sass.....
</div></body>
</html>

Upvotes: 1

Views: 2594

Answers (2)

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

<link rel="stylesheet" href="sasstemp.scss"  />

this suppose to be like

<link rel="stylesheet" href="sasstemp.css"  />

else fist of all you need ruby installed on your system then you need to install sass gem. Take a look at http://sass-lang.com/tutorial.html for assistance.

Upvotes: 1

Pavel
Pavel

Reputation: 422

U have to use app to transfer your sass code to css

f.e. http://mhs.github.io/scout-app/ (free, windows) OR http://compass.handlino.com/ (windows)

and your code should look like this

stylesheet.sass:

$divColor: #f8f9be
$borderStyle: dotted
$width: 700px
$height: 200px

#first 
    background-color: $divColor
    border: 1px $borderStyle #F00
    width: $width
    height: $height

( no {} or ; )

for more informations visit http://sass-lang.com/tutorial.html

or this awesome video tutorial from Jeffrey Way: http://net.tutsplus.com/sessions/mastering-sass/

Upvotes: 1

Related Questions