Variable in sass
Advertisements
Variable in sass
Sass allows variables to be defined. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:). In scss $ sign is used for declare variable and in scss ! sign is used for declare variable.
Declare variable in scss
$my-font: Helvetica, sans-serif;
$my-color: red;
body {
font: 100% $my-font;
color: $my-color;
}
Declare variable in sass
!my-font: Helvetica, sans-serif !my-color: red body font: 100% $my-font color: $my-color
After processing above code it will automatically genrate sytle.css file in root directory.
css file
body {
font: 100% Helvetica, sans-serif;
color: red;
}
Example of sass Html file
<html> <head> <title>Simple Example of sass</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1>Simple Sass Example</h1> <h3>This is my first SASS Code</h3> <p>SASS is very simple and easy to learn and use code.</p> </body> </html>
Google Advertisment