diff --git a/guide/english/sass/index.md b/guide/english/sass/index.md index 5e06db178e..e577249a7f 100644 --- a/guide/english/sass/index.md +++ b/guide/english/sass/index.md @@ -3,5 +3,64 @@ title: Sass --- Sass is a preprossessor scripting language that compiles CSS. It essentially brings the power of a standard programming language (e.g. loops, variables, conditional statements, etc...) to your stylesheets. +## Store data with Sass variables: + +Variable starts with '$' followed by variable name +``` +// Sass Code +$main-fonts:Arial,sans-serif; +$heading-color:green; + +// Css Code +h1{ + font-family: $main-fonts; + color: $heading-color; +} +``` + +## Nest CSS within SASS: + +On normal CSS codes we have to write each elements css seperate like: +``` +.nav-bar{ + background-color: green; +} +.nav-bar ul{ + list-style : none; +} +.nav-bar ul li{ + display: inline-block; +} + +``` +So the above code in Sass code will be: +``` +.nav-bar{ + background-color:green; + ul{ + list-style: none; + li{ + display: inline-block; + } + } +} +``` + +## MIXINS + +Mixins are like functions for CSS. +Example: +``` +@mixin box-shadow($x,$y,$blur,$c){ + -webkit-box-shadow: $x,$y,$blur,$c; + -moz-box-shadow: $x,$y,$blur,$c; + -ms-box-shadow: $x,$y,$blur,$c; + box-shadow: $x,$y,$blur,$c; +} +.mydiv{ + @include box-shadow(0px,0px,5px,#fff); +} + +``` #### More Information -[Official Sass website](https://sass-lang.com/) \ No newline at end of file +[Official Sass website](https://sass-lang.com/)