Sass course on Code School and worldview after it with an example (look at .less, .scss and .sass)
In September, I took a course at the Code School on Sass , called Assembling Sass, and led it to Nick Walsh, a css and sass guru. The course is completely free. Having passed it, I thought about what to try myself. A friend of mine recently wrote Less "Punches" on Lesson - with the background and foreground and the overlay of CSS on top, we get the following hole effect. (If you're interested in running this code, I can give a link to github).
Less example code:
.punch(@punch-size: 100px, @punch-left: 0px, @punch-top: 0px, @punch-background: none, @punch-grid: false, @punch-z-index: 0) { @punch-sizeIn: @punch-size*0.86; @punch-shadowOffset: @punch-size/20; @punch-shadowSize: @punch-size/20; @punch-bgShadowOffset: @punch-size/10; @punch-bgShadowSize: @punch-size/5; left: @punch-left; top: @punch-top; box-shadow: inset 0px @punch-shadowOffset @punch-shadowSize rgba(0,0,0,0.5); z-index: @punch-z-index; .punch-shadow; .punch-white { box-shadow: inset 0px -@punch-shadowOffset @punch-shadowSize rgba(255,255,255,0.3); .punch-shadow; .punch-in { position: absolute; top: (@punch-size - @punch-sizeIn)/2; left: (@punch-size - @punch-sizeIn)/2; width: @punch-sizeIn; height: @punch-sizeIn; z-index: @punch-z-index + 1; border-radius: @punch-sizeIn/2; background: @punch-background; .punch-grid(@punch-grid); box-shadow: inset 0px @punch-bgShadowOffset @punch-bgShadowSize rgba(0,0,0,0.8); .punch-content { overflow: hidden; border-radius: @punch-sizeIn/2; max-height: @punch-sizeIn; max-width: @punch-sizeIn; } } } .punch-shadow { position: absolute; width: @punch-size; height: @punch-size; border-radius: @punch-size/2; } .punch-grid (@punch-grid) { background-position: 0 0; } /* You can fix the background to the top/left corner of your page */ /* This should create a cool effect if you have a grid of little punches (about 30px) */ .punch-grid (@punch-grid) when (@punch-grid = true) { background-position: -@punch-left -@punch-top; } } The code for Sass I got the following (here presented. Scss, let's talk about. Sass later):
@mixin punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0) { /* Stuff you may want to change */ $punch-sizeIn: $punch-size * 0.86; $punch-shadowOffset: $punch-size / 20; $punch-shadowSize: $punch-size / 20; $punch-bgShadowOffset: $punch-size / 10; $punch-bgShadowSize: $punch-size / 5; left: $punch-left; top: $punch-top; box-shadow: inset 0px $punch-shadowOffset $punch-shadowSize rgba(0,0,0,0.5); z-index: $punch-z-index; @include punch-shadow($punch-size); .punch-white { box-shadow: inset 0px (-$punch-shadowOffset) $punch-shadowSize rgba(255,255,255,0.3); @include punch-shadow($punch-size); .punch-in { position: absolute; top: ($punch-size - $punch-sizeIn) / 2; left: ($punch-size - $punch-sizeIn) / 2; width: $punch-sizeIn; height: $punch-sizeIn; z-index: $punch-z-index + 1; border-radius: $punch-sizeIn / 2; background: $punch-background; /* You can fix the background to the top/left corner of your page */ /* This should create a cool effect if you have a grid of little punches (about 30px) */ @if $punch-grid{ background-position: (-$punch-left) (-$punch-top); } @else{ background-position: 0 0; } box-shadow: inset 0px $punch-bgShadowOffset $punch-bgShadowSize rgba(0,0,0,0.8); .punch-content { overflow: hidden; border-radius: $punch-sizeIn / 2; max-height: $punch-sizeIn; max-width: $punch-sizeIn; } } } .punch-shadow { @include punch-shadow($punch-size); } } @mixin punch-shadow($punch-size){ position: absolute; width: $punch-size; height: $punch-size; border-radius: $punch-size / 2; } ')
From the very first line you can notice the difference - in Less we can work directly with the css class and give it arguments:
.punch(@punch-size: 100px, @punch-left: 0px, @punch-top: 0px, @punch-background: none, @punch-grid: false, @punch-z-index: 0) what's not possible in sass
@mixin punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0) where to go through the function
@mixin methodName($arguments...) I will give an example on the same project than it is bad / good. To call
@mixin($arguments...) we have to go through @include methodName($arguments...) while Less is easier .class(@arguments[]) Less
/* file extension .less */ @import "punches"; /* */ body { background-image: url("foreground.jpg"); } #punch { /* punch */ .punch(300px, 30px, 50px, url("background.jpg"), true); } Sass
/* .scss ( .sass */ @import "punches.scss"; body { background-image: url("foreground.jpg"); } #punch { @include punch(300px, 30px, 50px, url("images/background.jpg"), true); } Another point is that in Sass compared to Less, one @mixin () cannot be inside another. Therefore, I had to render a function ( I’m not quite right in saying a function as it is function () in Sass that returns a variable, @mixin () doesn’t, but I’m not going to talk about function () here ) punch-shadow beyond the first @mixin punches ().
Less
.punch(@punch-size: 100px){ /* .punch-shadow */ .punch-shadow; .punch-shadow { position: absolute; width: @punch-size; height: @punch-size; border-radius: @punch-size/2; } } Sass
@mixin punch(){ @include punch-shadow($punch-size); } @mixin punch-shadow($punch-size){ position: absolute; width: $punch-size; height: $punch-size; border-radius: $punch-size / 2; } 2) In the next step, we note that variables are defined by "@" in Less, "$" in Sass. Trifle, but still. Another small point that I noticed is that in Sass if two numbers / variables stand one after another and the second has a minus, Compass will do the subtraction, so you need to close the parentheses ( this is not a problem in Less ).
Less
background-position: -@punch-left -@punch-top; Sass
background-position: (-$punch-left) (-$punch-top); 3) It will be about if else, for-loop and conditional statement. In Less, he is missing, which led my friend to the next entry.
Less
.punch-grid (@punch-grid) { background-position: 0 0; } .punch-grid (@punch-grid) when (@punch-grid = true) { background-position: -@punch-left -@punch-top; } I could play it the next way.
Sass
@if $punch-grid{ background-position: (-$punch-left) (-$punch-top); } @else{ background-position: 0 0; } This is a known problem of Less - it also lacks for-loop, so it’s harder to write something like this on Less ( I want to note that in Sass for-loop and arrays start with index-a 1, not 0 )
Sass
/* for-loop */ $authors: nick me you her; @each $author in $authors{ .author-#{$author}{ background: url(author-#{$author}.jpg); } // Sass backlass "//", .css. // for-loop @for $i from 1 through 3 { .item-#{$i} { top: $i * 30px; } } // while @while $v1 < 7{ .item-#{$v1}{ top: $v1 * 2; } 4) I would also like to make a note on - # {} syntax - I'm not sure if it is in Less - it allows you to send parameters in the part of the css code as you see on
background: url(author-#{$author}.jpg);-#{$1} // .item-#{$v1} And so my code came out on 74 lines, from a friend of 69. But then the most interesting part of Sass appears - there are two ways of writing - one is .scss and .sass. Compass has a built-in “sass-convert” method (previously it was possible to convert from less to sass but due to many changes in syntax of both, it was removed. And so we go and go to the terminal, go to the folder where we have our punches.scss and write:
~$ sass-convert punches.scss punches.sass The difference between .scss and .sass is basically syntax (but there are a couple of handy things).
one)
@mixin methodName($arguments...) now just =methodName($arguments...) 2)
@include methodName($arguments...) now just +methodName($arguments...) 3) The main difference. Sass - no end ";" at the end of the lines.
Sass (.sass)
=punch($punch-size: 100px, $punch-left: 0px, $punch-top: 0px, $punch-background: none, $punch-grid: false, $punch-z-index: 0) /* Stuff you may want to change $punch-sizeIn: $punch-size * 0.86 $punch-shadowOffset: $punch-size / 20 $punch-shadowSize: $punch-size / 20 $punch-bgShadowOffset: $punch-size / 10 $punch-bgShadowSize: $punch-size / 5 left: $punch-left top: $punch-top box-shadow: inset 0px $punch-shadowOffset $punch-shadowSize rgba(0, 0, 0, 0.5) z-index: $punch-z-index +punch-shadow($punch-size) .punch-white box-shadow: inset 0px -$punch-shadowOffset $punch-shadowSize rgba(255, 255, 255, 0.3) +punch-shadow($punch-size) } So did that help us? I won with these 2 lines and 0.1 KB in file size compared to LESS (I lost 0.1 KB with .scss).
The result is the future for LESS and Sass, less code is always good, but do not forget about readability - the code is written all the same for people. Good luck everyone. If you have questions or something wrong write under the cat.
PS I would like to add that a couple of weeks ago the second part of Assembling Sass Part 2 was published - here it’s the focus on .sass. It is also free.
Source: https://habr.com/ru/post/164795/
All Articles