SCSS: a couple of useful techniques
CSS - preprocessors are increasingly popular among web developers. Why?
Because they allow:
Currently, the most popular preprocessors are SASS and LESS.
About why SASS is better than LESS , you can read in this article . Whether it is better is a moot point, however, I switched from LESS to SCSS, if only because there is:
On comparing the syntax of SCSS and SASS , you can read in this article . Personally, I chose SCSS because of backward compatibility with CSS and, as a result, the ability to quickly incorporate old CSS files into a project using the import directive. To do this, they need to change the extension to .scss .
Faiwer 1 and AbleBoy 2 have already written about the basics of SCSS, but here I want to describe a couple of techniques that really helped me.
There are cycles in SCSS, and this is great!
Suppose we have a color palette of the site, and we want to color the menu in all its colors.
')
index.html :
style.scss :
There is no increment in SCSS (except that in for , but we need an analog foreach ), so this trick is required. But at the same time we get a full-fledged iterator for passing through the $ colors list!
Such compact code is transformed into such CSS - code :
style.css
Using this technique, you can compactly and conveniently write media queries for a “ responsive” layout.
style.scss
In CSS, this will not look so compact, especially considering the reuse of this mixin:
style.css
Learn more about mixins in SCSS and SASS by Chris Epstein (Chris Eppstein) 3
How do you make life more comfortable with SCSS?
1 - “SCSS - a little practice, part I”
2 - “Lazy typesetter's note on SCSS and Compass Framework”
3 - Chris Epstein, Github: gist, 1215856
UPD: The problem with a lot of media queries can be solved here with this jam.
Because they allow:
- Save time
- Apply DRY to CSS
- Make the code more readable.
Currently, the most popular preprocessors are SASS and LESS.
About why SASS is better than LESS , you can read in this article . Whether it is better is a moot point, however, I switched from LESS to SCSS, if only because there is:
- Cycles
- Conditional statements
- Lists
On comparing the syntax of SCSS and SASS , you can read in this article . Personally, I chose SCSS because of backward compatibility with CSS and, as a result, the ability to quickly incorporate old CSS files into a project using the import directive. To do this, they need to change the extension to .scss .
Faiwer 1 and AbleBoy 2 have already written about the basics of SCSS, but here I want to describe a couple of techniques that really helped me.
Iterators
There are cycles in SCSS, and this is great!
Suppose we have a color palette of the site, and we want to color the menu in all its colors.
')
index.html :
<!DOCTYPE html> <html> <head> <title> </title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <nav class="menu-main"> <ul> <li class="red"><a href="#"></a></li> <li class="orange"><a href="#"></a></li> <li class="green"><a href="#"></a></li> <li class="blue"><a href="#"></a></li> <li class="purple"><a href="#"></a></li> </ul> </nav> </body> </html> style.scss :
$colors: #f74a3a #fcbe26 #8cc687 #4da5f2 #b01395; $i:0; .menu-main ul li { @each $col in red, orange, green, blue, purple { $i: $i + 1; &.#{$col} { background: nth($colors, $i); } } } There is no increment in SCSS (except that in for , but we need an analog foreach ), so this trick is required. But at the same time we get a full-fledged iterator for passing through the $ colors list!
Such compact code is transformed into such CSS - code :
style.css
.menu-main ul li.red { background: #f74a3a; } .menu-main ul li.orange { background: #fcbe26; } .menu-main ul li.green { background: #8cc687; } .menu-main ul li.blue { background: #4da5f2; } .menu-main ul li.purple { background: #b01395; } Response-to
Using this technique, you can compactly and conveniently write media queries for a “ responsive” layout.
style.scss
// mixin @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 479px) { @content; } } @else if $media == wide-handhelds { @media only screen and (min-width: 480px) and (max-width: 767px) { @content; } } @else if $media == tablets { @media only screen and (min-width: 768px) and (max-width: 959px) { @content; } } } .menu-main { float: left; width: 300px; // @include respond-to(handhelds) { float: none; }; // @include respond-to(wide-handhelds) { float: none; }; // @include respond-to(tablets) { width: 240px; }; } In CSS, this will not look so compact, especially considering the reuse of this mixin:
style.css
.menu-main { float: left; width: 300px; } @media only screen and (max-width: 479px) { .menu-main { float: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .menu-main { float: none; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .menu-main { width: 240px; } } Learn more about mixins in SCSS and SASS by Chris Epstein (Chris Eppstein) 3
How do you make life more comfortable with SCSS?
1 - “SCSS - a little practice, part I”
2 - “Lazy typesetter's note on SCSS and Compass Framework”
3 - Chris Epstein, Github: gist, 1215856
UPD: The problem with a lot of media queries can be solved here with this jam.
Source: https://habr.com/ru/post/151679/
All Articles