Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use the SASS style of CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the SASS style of CSS.

Take writing a property of the .weather class as an example:

First list @ extend (s)

CSS Code copies content to the clipboard

.weather {

@ extends% module

...

}

This enables developers to maintain a clear train of thought, to immediately know the relationship between this class and its attributes and other classes and their attributes, to maintain the consistency of attributes and a clear idea of attribute reuse.

Ordinary style

CSS Code copies content to the clipboard

.weather {

@ extends% module

Background: LightCyan

..

}

@ include (s)

.weather {

@ extends% module

Background: LightCyan

@ include transition (all 0.3s ease-out)

...

}

This allows developers to see at a glance the deployment of @ extend (s) and @ include (s), making it easier for themselves and other developers to interpret the code. You may also decide whether to distinguish between custom @ includes and public source @ includes in some cases (especially considering the reusability and timeliness of the code)

Selector nesting

CSS Code copies content to the clipboard

.weather {

@ extends% module

Background: LightCyan

@ include transition (all 0.3s ease)

> h4 {

Border-bottom: 1px solid white

@ include transform (rotate (90deg))

}

}

Within the nested section, continue to use the above style rules. The nested part should always be at the end.

All vendor prefixes use @ mixins

The manufacturer prefix (CSS prefix) is very timely. Due to the update of modern browsers, the use of these prefixes will become less and less. You can adapt to these changes by updating the content in mixins (or some libraries used in your mixin will be updated automatically). It doesn't matter if the mixin is only a short line.

However, when the privatization of some vendor prefixes is very serious, these prefixes will be very difficult to standardize and the loss of applying other prefixes or unprefixed versions will outweigh the gain. I will choose to abandon the @ mixin prefixes. Like-webkit-line-clamp,-mscontent-zoom-chaining or something like that.

No more than 3 levels of nesting

CSS Code copies content to the clipboard

.weather {

.cities {

Li {

/ / no more!

}

}

}

If you have more than three nests, you are likely to write a bad one. ) selector. The reason for this is that the selector is too dependent on HTML's architecture (unstable), too detailed (too powerful and inflexible), or poor reusability (not very available). At the same time, too many nesting levels can easily lead to obscure code.

If sometimes there is so much code related to the class that you have no choice but to use the tag selector. You may need to be very specific about a class to avoid unnecessary cascading. Even, if possible, use extend to use some of the reusable features of CSS.

CSS Code copies content to the clipboard

.weather

> h4 {

@ extend% line-under

}

}

No more than 50 lines of nested code

If there are more than 50 lines of nesting in SASS, it is likely that it will not be fully displayed on a page of the compiler, which will make the code difficult to read and understand. Nesting is originally intended to facilitate and simplify the organization of thinking and code. If it violates reading, please don't nest it.

Global and regionalized SASS file sequences are equivalent to table contents

In other words, they don't have any fixed style. Developers should remind themselves to keep the style of all parts consistent and orderly.

First list the vendor / global libraries, then the custom libraries, then the patterns, and finally the libraries used by each division.

In this way, the 'directory' looks as clear at a glance as the following example:

CSS Code copies content to the clipboard

/ * Vendor Dependencies * /

@ import "compass"

/ * Authored Dependencies * /

@ import "global/colors"

@ import "global/mixins"

/ * Patterns * /

@ import "global/tabs"

@ import "global/modals"

/ * Sections * /

@ import "global/header"

@ import "global/footer"

These files are like a compass. Colors and mixins do not produce compiled CSS code, they are purely independent libraries. After that, a pattern is introduced to make rewriting more secure without specific conflicts.

Reasonable division of SASS into multiple small files

There is nothing wrong with doing so. When circumstances permit, try to use multiple files that are small and sophisticated, making it easier for developers to look for specific files instead of looking for needles in a haystack in several large files with lengthy code.

CSS Code copies content to the clipboard

@ import "global/header/header/"

@ import "global/header/logo/"

@ import "global/header/dropdowns/"

@ import "global/header/nav/"

@ import "global/header/really-specific-thingy/"

What I often do is reference these files one by one in a global scss file, instead of referencing a _ header.scss file, and then referencing them one by one in the _ header.scss file. This can reduce the indexing time and improve the reading efficiency.

You may use Globbing when too many of these files cause the import sequence to be too long.

Remember to name Partials _ partial.scss

This is a common naming for files that cannot be compiled by themselves. Such files are more or less dependent on other files, making it impossible to compile on their own. Personally, I like to add an underscore before the file name, such as _ dropdown-menu.scss

Add a line mapping at local compilation time

Look here, this means that the development tool can tell you the source of every rule, even an imported partial file.

When deploying, remember to compile condensed files

Running web pages always only need to use a compact CSS.

No need to submit .css file

This may take some time, but it can be wonderful not to put .css files in the vault. File compilation is completed at deployment time. So the only thing you can see are the beautifully formatted sass files that have been streamlined. This makes the description of the file very useful. The file description is used to compare some of the changes made by the version publisher. For streamlined .css files, the file description is basically unnecessary.

Generous use of notes

Few people will regret leaving comments in their code. Whether they are useful or obscure comments, they will eventually be erased when compiled into a condensed CSS file, with no additional cost for developers.

.overlay {

/ * modals are 6000, saving messages are 5500, header is 2000 * /

Z-index: 5000

}

When it comes to comments, you may also need to make some standardized adjustments to it. In SASS,'/ /'is ideal for adding comments, and'/ / 'makes it very convenient to comment and uncomment.

Convert some commonly used values and special values into variables

If you find yourself reusing a number (which is common in front-end designs), you'd better convert it to a variable. In this way, you can remind yourself of the meaning of this value by naming it, and be consistent when writing code. Yes, you don't need to adjust this value line by line when you change it.

If a number has an obvious meaning, it is essential to convert it into a variable.

CSS Code copies content to the clipboard

$zHeader: 2000

$zOverlay: 5000

$zMessage: 5050

.header {

Z-index: $zHeader

}

.overlay {

Z-index: $zOverlay

}

.message {

Z-index: $zMessage

}

These numbers may be stored in a single file and imported as @ imported. This way you can manage all the z-index or other variables in a unified way.

Convert colors into variables

Except black and white. Many colors will not be used just once, even if you think you will never use it again. But if you convert it to a variable, you may find that it is also used in other places. For color variables, there are color functions in sass that can handle them, such as lighten () and darkern (). This makes it easy for you to control the overall color (once modified, once and for all)

Nest and name your library

The ability to nest media libraries in sass means that 1. You don't have to rewrite the selector elsewhere and cause unnecessary errors; 2. The rules you rewrite become clear, and it can be very confusing when the code is at the end of your css code or in other files.

CSS Code copies content to the clipboard

.sidebar {

Float: rightright

Width: 33.33%

@ include bp (mama-bear) {

Width: 25%

}

}

Put Shame at the end

In your global stylesheet, introduce a _ shame.scss file at the end.

CSS Code copies content to the clipboard

@ import "compass"

...

@ import "shame"

At this point, I believe you have a deeper understanding of "how to use the SASS style of CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.