Using Sass - PART 2
Now, we will talk about the .sass file, what is the difference betweet this sort of file and the one we’ve seen on the first part? The .sass files syntax is indented, without the necessity of “{}” and “;”. Other difference is that you create mixins with “=” and use them with “+”:
=padding($size)
padding: $size
.content
+padding(20px)
List’s items can be separated with comma or spaces, and Sass gives us a lot of function to work with lists:
- length($list) —> number of items.
- append($list, $value) —> add one item on the final of the list.
- join($list1, $list2) —> join two lists.
- index($list, $value) —> return the position value
- nth($list, $n) —> return the item value of the position that has been passed as argument.
- zip($lists…) —> create lists inside one list.
The is only one color function in .sass, but, the arguments change it result:
- scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$lightness])
You can use one of them to change the color you pass, just doing: “$green: 20%”.
On .sass files, there is a shorter way of using the “if” statment:
if($condition, $if-true, $if-false)
example:
background: if($theme == dark, #000, #fff)
And other thing that .sass allows is to put a class with a placeholder:
%btn
.btn
border: 2px solid black
b
color: white
So this is it, this part 2 is very simple, just to give you the difference between the two types of files. You can find me on Facebook and Twitter, if you have any doubts with the tutorial, contact me.