Geekly Articles each Day
📜 ⬆️ ⬇️

SCSS - a little practice, part I

image

Articles about SASS ( SCSS ), Less on the habrahabr are already full, but in my opinion there is not enough one in which there would be some real practice. I will try to fill this gap. About a year ago, one of the SASS articles “hooked” me, and since then I have loved this technology so much that manual typing of regular CSS code seems to me a waste of time. This article is dedicated to those layout makers (or web programmers) who have not heard about SCSS yet, or have not tried it in action yet. More experienced comrades, I believe, there is nothing to catch in it.

What is SCSS


SCSS is a "dialect" of the SASS language. What is SASS? SASS is a language similar to HAML (a very concise template engine), but intended to simplify the creation of CSS code. Simply put, SASS is a language whose code is translated by a special ruby ​​program into regular CSS code. The syntax of this language is very flexible, it takes into account many details that are so desirable in CSS. Moreover, it even has logic (@if, each ), mathematics (you can add both numbers, strings, and colors). Perhaps some of the SCSS features will seem redundant to you, but, in my opinion, they will not be superfluous, they will remain "in reserve".
')
The difference between SCSS and SASS is that SCSS is more like ordinary CSS code. SASS code example:

 $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue

And the same thing on SCSS:

 $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

I chose SCSS in view of the fact that it is easier for colleagues to see with him who was not yet familiar. Another thing worth noting is that regular CSS code fits perfectly into the SCSS syntax.

Installation and use


First you need to install ruby . Then you need to install sass-gem ( gem install sass in the console). If everything went smoothly, now the console program sass is available to you. You can read about all the nuances of its use here - sass --help . I will tell only about two basic possibilities:

--watch


If you run sass with the --watch key, the program will monitor the files you specified. In case of their change, it will automatically rebuild all necessary css-files (not all in general, but only those associated with the modified ones).

Suppose you have the following project structure:

 -- css ---- scss ------ style.scss ---- style.css

It is necessary for sass to track all changes in css/scss/* and save the result in css/*.css . In this case, run sass like this - sass --watch css/scss:css/. . Those. sass --watch []:[] .

--update


If you need to update css-files once, then in place of --watch use --update . No surveillance will be conducted, as well as checks for the need to update.

It is worth noting that, unlike Less , SASS not able to compile its code directly in the browser. In my opinion, this approach (compilation on a server or a PC-coder) is the only correct one.

Practice


So, we come to the most important thing. Let's start with @import .

@import


Initially, before using SCSS, all the CSS engine code, with which I have to work on duty, was in the 1st huge style.css file. My IDE (Netbeans (by the way, here's a plugin for syntax highlighting)) worked with it with significant brakes. To break it into many smaller files, and, if necessary, to glue them into 1 - no one wanted. SCSS resolves this issue automatically.

It is worth noting 1 nuance. If you feed sass not a specific source file, but a directory, then css files will not be generated for files starting with _ . Those. the presence of the style.scss file will create style.css , and the presence of the _some.scss file _some.scss not.

So, in order to include the contents of the file _template.scss or template.scss we write

 @import "template"; //

In the end, instead of the 1st large style.css file, I got more than a hundred small scss files. At first glance it may seem that such an amount is too large and will lead to terrible agony. However, I find the file I need right away based on a convenient directory structure. In addition, I believe that due to caching such a "scheme" is more productive.

@ nesting


One of the most desirable features for CSS is the nesting of selectors. Example:

 #some { border: 1px solid red; .some { background: white; } } /* => */ #some { border: 1px solid red; } #some .some { background: white; }

Another example:

 input { border: 1px solid gray; background: white; &[type=text] { color: black; } &.some_class { display: none; } } /* => */ input { border: 1px solid gray; background: white; } input[type=text] { color: black; } input.some_class { display: none; }

The & symbol is equivalent to the parent selector. Suppose the <body> tag has a class of ie_7 , if we have Internet Explorer 7 as a browser. The following code allows you to get rid of all the "hacks" and special comments:

 $IE_7: 'body.ie_7'; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }

$ variables


Variables are handy. They are defined as:

 $some: red;

Variables are not constants, they can be changed in the course of the code :) One of my first thoughts resulted in a _const.scss file, which contains all the basic colors, font sizes, etc.

 $link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: black; ...

It is assumed that the color of links on the site is $link .

 a { color: $link; } span.link { color: $link; text-decoration: underline; }

If it turns out later that the color of the links has changed - it is enough to change 1 variable (in the case of CSS, you would have to go through the auto-replace on files, maybe even selectively). Suppose that, suddenly, it turns out that in some module of contacts , the color of the links is different. There are at least two solutions.

The first:

 $contacts_link: orange; //     $contacts_link  $link

Second

 $__link: $link; $link: orange; //   $link: $__link;

Variables are not typed, so with equal success may contain strings, numbers and colors.

@maths


We divide math into 2 categories - colors and numbers. Let's start with the numbers. A simple example:

 .block { $block_width: 500px; padding: 5px; border: 1px solid black; width: $block_width - ( 5px * 2 ) - ( 1px * 2 ); }

If desired, you can also set the padding with the border. It all depends on the complexity of the layout.

Another example:

 .block { $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element { width: ( $all_width / $count ) - $margin_left; margin: 0 0 0 $margin_left; } }

I want to note that this kind of manipulation is used very often. Without them, I like without legs.

And now the colors. Colors can be folded, multiplied:

 .some { $color: #010203; color: $color; border-color: $color - #010101; &:hover { color: #010203 * 2; } } /* => */ .some { color: #010203; border-color: #000102; } .some:hover { color: #020406; }

Pretty handy thing, when too lazy to pick colors. Features such as opacify and transparentize are also available (in more detail ).

@ line


SASS is able to add lines, and also supports the construction #{}

 $image_dir: 'images/web/'; $page: 12; .some { background-image: url( $image_dir + 'pen.gif' ); &:before { content: " #{ $page }!"; } } /* => */ .some { background-image: url("images/web/pen.gif"); } .some:before { content: " 12!"; }

I believe that the greatest application of operations on strings can be found in @ mixins and variables indicating the paths to images, etc.

Article


In view of the fact that the article was quite voluminous, I decided to break it into 2 parts. In the next article I will review (syntax and scope):


Links


Source: https://habr.com/ru/post/140612/

More articles:


All Articles