sass notes-2|Sass basic syntax makes style sheets more organized and readable

This article mainly details the 3 most basic ways to keep sass organized and readable - nesting, importing and comments.

zero.variable

The function of the variable itself is to maintain the maintainability of the attribute value, put all the attribute values that need to be maintained in the same place, change quickly, and take effect everywhere, which can be described as worry-free after sales.

1. Variable declaration

Variables are declared with a "$" symbol. Anything that can be used as a CSS property value can be used as the value of a sass variable, a single value, multiple values separated by spaces, and multiple values separated by commas:

$primary-color: #233;
$general-border: 1px solid #ddd;

Variables are generally declared at the beginning of the sass source code, outside the CSS rule block (outside the curly brackets), which is easy to find and maintain, but sometimes you also want to declare variables in the rule block. Can be used inside a block, similar to "block scope".

2. Variable usage

Variables can be used wherever the standard value of a CSS property can exist, and a variable can be referenced in the declaration of another variable:

$primary-color: #233;
$general-border: 1px solid $primary-color;

You may have also seen #{$val}variables like this, using #{and }wrapping. This is actually using variables as an expression. Such usage is called interpolation , which is described in the advanced features of sass.

1. Nesting - Hierarchy

Nested rules are like onions, layer by layer, very layered, i.e. readable and organized. The most common selector nesting, which is opened layer by layer, is generally expanded by the containing selector as a descendant selector of the containing selector:

/*sass*/
li{
	float:left;
	a{
		color: #c33;
	}
}
/*生成的css*/
li{
	float:left;
}
li a{
	color:#c33;
}

1. Parent selector identifier &

The parent selector identifier &can be placed anywhere a selector can appear, and it represents the literal meaning - parent selector, why do you have this thing? Because you don't want brainless to be expanded as a descendant, the most common example is when nesting pseudo-class selectors:

li{
	float:left;
	a{
		color: #233;
		&:hover{
			color:#c33;
		}
	}
}
/*这样生成的CSS是这样的*/
li{
	float:left;
}
li a{
	color:#233;
}
/*注意这里的a选择器和伪类选择器间没有空格，&被父选择器直接替换*/
li a:hover{
	color:#c33
}

When nested rules containing parent selector identifiers are turned on, they are not simply spliced as descendant selectors, but &are directly replaced by parent selectors.

Pseudo-class is a common usage, of course, this "Master Biao" --- &can also be placed behind the selector (remember &that it is not normally spliced when it is opened, it can be replaced):

#content aside{
	color:red;
	body.ie & { color:green }
}
/*输出的css是这样的*/
#content aside{
	color:red;
}
body.ie #content aside { color:green }

2. Complex selector nesting

Group selectors, like h1,h2,h3{ a{...} }or div{ h1,h2,h3{...} }, are handled correctly by sass, opening groups separately h1 a, h2 a, h3 a{...},div h1, div h2, div h3{...}
Subcombination selectors and sibling selectors: >, +and ~, sass are handled correctly regardless of whether they are before or after the selector

3. Attribute Nesting

Writing a bunch of background styles is background-XXannoying, and property nesting can help you reduce the workload. Break the property name at the underscore, add a colon after the root property, followed by a block of curly braces, and write sub-properties in curly braces:

div{
	background:{
		image: url(./img/233.png);
		repeat: no-repeat;
		size: contain;
	}
}

2. Import - @import

Sass's @import is not the same as CSS's. For CSS @import, other CSS files are downloaded only when they are executed, which affects page loading; while for Sass, @importrelevant files are imported when CSS files are generated.

1. @import syntax of sass

Sass @importdoes not need to specify the full name of the imported file, i.e. it can be omitted .sassor the .scssextension.

In addition, each sass file is generally output as a CSS file, but in fact, when we @importimport a sass file, we only want to generate an overall css file, and each sass file does not need to be output as css, such a file is It is called "sass local file", that is, it will not be compiled and output into css separately for import.

Sass partial files need to start with an underscore. When @importimporting, not only the extended suffix but also the leading underscore can be omitted.

So, assuming we have a "_nav.scss" and an "article.scss" to import, we can just write:

@import "nav"
@import "article"

Also, sass @importcommands can be written inside CSS rules, which will cause the generated CSS rules to be inserted directly where imported. You can think of the @importcommand as a macro, where it is written, it is replaced by the source code of the sass file to be imported.

2. Customizable after import

The import mechanism allows your sass to be divided into several sections according to a certain basis (such as according to different areas), then import a sass file, which completely determines the style of this part, such as color, font, font size, etc.

And if you want to import, you can also modify some values to customize the style you need, such as color, size, etc. Especially when Xiaoming wants to import your sass file, the imported style settings may not satisfy his own well. There are two approaches at this time:

After importing, Xiao Ming re-declares the variable he wants to modify, and gives a new value. The value written in the back will overwrite the previous one;
You modify the variable value in your sass source file !defaultto set the default value of the variable, and then publish it for others to use, eg $link-color:red !default. At this time, if Xiaoming only introduces and does not want to change, then this is the value. If he wants to change, he can redeclare the variable anywhere , and it will become Xiaoming's value.

Both ways have to be re-declared, is it "take off your pants and fart"? Hmm, kind of means it! The difference is that:

After the variable value is !defaultmodified, there is a default value. No matter where the variable is declared, the declared value will be used, which means that you can declare this variable for you before importing the sass file containing the variable value that needs to be modified. The value of the variable you declare will not be overwritten by the value in the file imported later.

3. How to return to the native @import mechanism of CSS

Either of the following will cause the CSS native @import mechanism to be used:

The name of the imported file .cssends with;
The name of the imported file is a URL address;
The name of the imported file is the CSS url() value.

3. Notes—visible and invisible

There are two forms of Sass comments, one is the comment style from CSS, with \*and *\wrapped, this kind of comment will be output when the Sass file is compiled to output css,

Another way of commenting is a single-line comment //starting with a silent comment , because such a comment will not be output to the CSS file when it is compiled to output CSS. In addition, this kind of comment is simple and fast to write. what.

4. Summary

There are 3 basic ways to keep order and readability, split Sass files in different sections, and then import them through @import; nested selectors and attributes can not only help increase the level and order, but also reduce the amount of typing (reduce in disguise) typos); comments are always a good habit.