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

This article mainly explains "what is the basic syntax of Scss and how to import SASS files". 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 "what is the basic syntax of Scss and how to import SASS files?"

Introduction to Sass grammar

Sass has two syntax formats, Sass (early indentation format: Indented Sass) and SCSS (Sassy CSS)

At present, SCSS is the most commonly used, and any css file that changes the suffix to scss can be written directly in Sassy CSS syntax.

All valid CSS are also valid SCSS.

Use variables

Sass uses the $symbol to identify variables.

The function of variables is to let you save and reuse some information or data throughout the stylesheet.

Such as storing colors (color), font sets, or any CSS values you want to reuse.

1. Variable declaration

Much like the declaration (property declaration) of the css attribute!

For example, declare the variable $highlight-color with a value of # F90, and the font set variable:

$highlight-color: # F90 witch Fontmuri stack: Helvetica, sans-serif; body {font: 100% $font-stack; color: $highlight-color;}

The output is as follows:

Body {font: 100% Helvetica, sans-serif; color: # F90;}

A variable has scope and can only be used within a css rule block when it is defined within that rule block.

two。 Variable reference

Variables can be used wherever a standard value of the css attribute (such as 1px or bold) can exist.

When css is generated, variables are replaced by their values.

$color:#A34554;.box {width: 300px; height: 400px; &-left {width: 30%; color: $color;}}

The generated css is:

.box {width: 300px; height: 400px;} .box-left {width: 30%; color: # A34554;}

When you declare a variable, the value of the variable can also refer to other variables, such as the $highlight-color variable used in the $highlight-border variable:

1px solid $highlight-color;.selected {border: $highlight-border;} / / compiled. Selected {border: 1px solid # F90;}

3. Middle dash (hyphen) and underscore (underscore) in variable name

Variable names in sass can be underlined and underlined, variables declared with underscores can be referenced by underscores, and vice versa.

That is, there is no difference between the middle underscore and the underscore in the variable name, and the two are interlinked.

For example, in the following example, the $link-color in the middle line can be referenced by the $link_color underlined.

$link-color: blue;a {color: $link_color;} / / compiled a {color: blue;}

Relatively, the use of horizontal lines is more common!

Nesting (Nesting)

The rewrite selector in css is very annoying. Especially nested html element styles, such as:

# content article h2 {color: # 333} # content article p {margin-bottom: 1.4em} # content aside {background-color: # EEE}

Nesting of Scss

In Sass, by nesting sub-rule blocks in rule blocks, the repeat selector can be written only once, avoiding repetition and making it more readable.

For example, in the above example, with scss nesting:

# content {article {h2 {color: # 333} p {margin-bottom: 1.4em}} aside {background-color: # EEE}}

The rule of scss nested opening (parsing) is: from the outer layer to the inner layer, the nested rule block is opened, the parent selector is placed in front of the child selection to form a new selector, and then cycle to open the internal nested block processing.

Identifier of the parent selector &

Typically, when sass parses nesting, the parent selector (# content) is connected to the front of the child selector (article and aside) with a space to form (# content article and # content aside), that is, the descendant selector is generated.

But for pseudo-classes: hover, for multiple class names, etc., you should not connect in the form of a "descendant selector", such as:

Article a {color: blue;: hover {color: red}}

The default generated article a: hover causes all child elements linked by a within the article element to turn red when they are hover, which is obviously incorrect (it should be applied to an itself).

For this reason, sass provides a special selector: parent selector &. It can better control the nesting rules!

You can also use & in nesting wherever the selector can be placed.

Article a {color: blue; &: hover {color: red}}

When expanded, & is directly replaced by the parent selector:

Article a {color: blue} article a:hover {color: red}

Through & it is very flexible to add a selector before the parent selector within a nested block.

Such as:

# content aside {color: red; body.ie & {color: green}}

Group selector nesting

In css, using split group selector, you can apply styles to multiple selectors at the same time, such as:

H2, h3 {margin: 0;}

However, if you want to use the group selector for multiple elements within a particular container element, there will be a lot of repetitive work.

.container h2, .container h3, .container h4 {margin-bottom: .8em}

On the other hand, the nesting feature of sass, when unlocking an embedded group selector, combines each embedded selector correctly:

.container {h2,h3,h4 {margin-bottom:.8em;}}

Sass will be combined into .container H2, .container h3, .container h4 group selectors: .container H2, .container h3, .container h4 {xxx}.

Similarly, the nesting within the group selector is resolved in this way:

Nav, aside {a {color: blue}} / / nav a, aside a {color: blue}

Sub-combination selector and same-layer combination selector: >, + and ~

These three selectors must be used in conjunction with other selectors.

/ * Sub-combination selector > * / article > section {border: 1px solid # ccc} / * adjacent combination selector + the specified element immediately after the selection element * / header + p {font-size: 1.1em} / * all the same-level combination selector ~, select all the same-layer article elements that follow article * / article ~ article {border-top: 1px dashed # ccc}

When used in sass, you can generate the correct result directly through nesting (either behind the outer selector or in front of the inner selector! Without the need to use &.

Article {/ * in front of inner selector * / ~ article {border-top: 1px dashed # ccc} > section {background: # eee} / * after outer selector * / dl > {dt {color: # 333} dd {color: # 555}} nav + & {margin-top: 0}}

The unlocked css is:

Article ~ article {border-top: 1px dashed # ccc} article > footer {background: # eee} article dl > dt {color: # 333} article dl > dd {color: # 555} nav + article {margin-top: 0}

In the last sentence, nav + & after using the parent selector &, the default nesting rules no longer apply, but are the result of applying & composition directly.

Property nesting

In sass, properties can also be nested!

Disconnect the attribute name from the underlined -, add a colon after the attribute:, followed by a {} block, and write the sub-attributes in the {} block. In this way, you can achieve the nesting of attributes.

Nav {border: {style: solid; width: 1px; color: # ccc;}}

The compilation is generated as follows:

Nav {border-style: solid; border-width: 1px; border-color: # ccc;}

Combined with the abbreviated form of attributes, you can implement special sub-attributes that indicate the need for additional styles in nested attributes.

Nav {border: 1px solid # ccc {/ * child attribute * / left: 0px; right: 0px;}} / * after generation * / nav {border: 1px solid # ccc; border-left: 0px; border-right: 0px;}

Interpolation (Interpolation)

Similar to the interpolation expression in es6, Sass also provides a way to calculate interpolation.

Interpolation can be used almost anywhere as an embedded result of an SassScript expression.

The interpolation of Sass is: # {$variable_name}.

Dynamically generate selectors, attribute names and values using interpolation

You can use interpolation to get a variable or function call to a selector, or a property value.

For example:

$bWidth:5px;$style: "blue"; .nav {border: # {$bWidth} solid # ccc; & .nav-# {$style} {color: # {$style};}} / / compiled to: .nav {border: 5px solid # ccc;}. Nav.nav-blue {color: blue;}

Property names use interpolation variables

One advantage of using interpolation is that you can use the variable value directly as the property name.

As follows, through interpolation, the attribute name is directly replaced by a variable, so that the attribute can be generated dynamically.

Instead of using interpolation, using the variable $property directly at the location of the attribute will be treated as an assignment to the variable!

$value:grayscale; $property:filter;.nav {# {$property}: $value;} / / compiled to: .nav {filter: grayscale;}

Use interpolation in @ mixin

The @ mixin mixer is described in the next section.

Interpolation is very useful when writing mixin, such as creating a selector by passing parameters (from the official website):

@ mixin define-emoji ($name, $glyph) {span.emoji-# {$name} {font-family: IconFont; font-variant: normal; font-weight: normal; content: $glyph;}} @ include define-emoji ("women-holding-hands", "")

The compiled CSS is:

@ charset "UTF-8"; span.emoji-women-holding-hands {font-family: IconFont; font-variant: normal; font-weight: normal; content: ";}

Special function of css (Special Functions [for understanding only])

Many functions in CSS can be used normally in Sass, but there are some special functions that are different.

For all special functions, the call returns a string without quotes.

Url ()

The url () function is common in CSS, but its arguments can be quoted or unquoted URL.

URL without quotation marks is invalid in Sass, so special logic is required for parsing.

The following is an example of url (). If the argument of url () is valid, URL,Sass parses it as is without quotation marks, and the interpolation expression can be used without quotation marks; if it is not a valid unsigned URL, the variables or functions are parsed and converted to normal CSS function calls.

$roboto-font-path: ".. / fonts/roboto"; @ font-face {/ / parse src as a normal function call: url ("# {$roboto-font-path} / Roboto-Thin.woff2") format ("woff2"); font-family: "Roboto"; font-weight: 100 } @ font-face {/ / uses mathematical expressions to resolve to ordinary function calls src: url ($roboto-font-path + "/ Roboto-Light.woff2") format ("woff2"); font-family: "Roboto"; font-weight: 300;} @ font-face {/ / Special treatment as an interpolation expression src: url (# {$roboto-font-path} / Roboto-Regular.woff2) format ("woff2") Font-family: "Roboto"; font-weight: 400;}

Calc (), clamp (), element ()

The conflict between the arithmetic expression calc () and Sass; the parameters of element () can be color.

When using them, Sass will keep the parsing as it is except for interpolation!

Min () and max ()

Sass predates CSS to support the use of min () and max (), which requires special handling for compatibility.

If the min () and max () functions call normal CSS, they are compiled to min () and max () of CSS.

Normal CSS (Plain CSS) contains nested calls to calc (), env (), var (), min (), max (), and interpolation.

However, as long as you include the features of SassScript, such as Sass variables and function calls, min () and max () are treated as functions of Sass.

Post {/ / max () does not use Sass features other than interpolation, so it will be compiled to CSS's max (). Padding-left: max (# {$padding}, env (safe-area-inset-left)); padding-right: max (# {$padding}, env (safe-area-inset-right));}. Sidebar {/ / should be that the sass variable is not used through interpolation, where Sass's built-in max () padding-left: max ($padding, 20px); padding-right: max ($padding, 20px);}

Annotation

Sass also provides a comment syntax that is different from the css standard comment format / *. * /, that is, silent comments, starting with / / until the end of the line.

In the generated css, silent comments are erased so that some comments can be erased as needed without having to show them all to others.

Body {color: # 333; / / such comment content will not appear in the generated css file padding: 0; / * this kind of comment content will appear in the generated css file * /}

When the standard comment / *... * / appears where the native css is not allowed, it is also erased in the compiled css.

Multiline comments / *... * / will be removed in compressed mode, but if / *! At the beginning, it is still included in the generated CSS.

Import SASS Fil

Use @ import to import another sass file (related files are imported when the css file is generated). Variables defined in the imported file, mixer maxin, etc., can be used in the imported file.

It is not common for @ import in css to import other css files because it does not load other css files until the @ import rule is executed, which can lead to slow page loading, style confusion, and delays.

Note: Sass officials are currently planning to replace the @ import rule with @ use, so the use of @ use is encouraged. However, @ use is currently supported only by Dart Sass, so @ import is mainly used at this stage.

For scss to import sidebar.scss files, you can use the following rules:

@ import "sidebar"; @ import "sidebar.scss"

Sass partial file (or partial file, partial file)

Some sass files are specifically imported by the @ import command without the need to generate a separate css file, which is called a partial file.

The convention of sass is that the file name of the sass partial file begins with an underscore _, and sass will not compile and output the file to css at compile time.

When you use @ import partial files, you can omit the underscore and .scss suffix at the beginning of the file, and you don't need to write the full name of the file.

Local files can be introduced by multiple different files. It is useful for styles that need to be used in multiple pages or even multiple projects.

Default variable value

Typically, when a variable is declared repeatedly, only the last declaration is valid (that is, using the value assigned by the last declaration).

Sass defines a default value through the! default tag (similar to the! important tag of css).! default means that if the variable is declared to be assigned, the newly declared value is used, otherwise the default value is used.

For example, in a partial file:

$fancybox-width: 400px! default;.fancybox {width: $fancybox-width;}

If the user declares a $fancybox-width variable before importing the sass partial file, then the operation in the local file to assign 400px to $fancybox-width is invalid. If the user does not make such a declaration, $fancybox-width defaults to 400px.

That is, variables declared later with! default do not overwrite the same variable values that were previously declared as assignments.

Nested import

Sass can use @ import inside a nested rule block to import a partial file [the partial file is inserted directly into the css rule where it is imported].

For example, the content of partial file _ blue-theme.sass is as follows:

Aside {background: blue; color: white;}

Import it into a CSS rule:

.blue-theme {@ import "blue-theme"}

The result is exactly the same as what you write in the _ blue-theme.scss file directly in the. blue-theme selector.

. blue-theme {aside {background: blue; color: # fff;}}

Support for native CSS import

The import of native css is supported in sass, which generates native scc @ import (download and parse when the browser parses css).

The conditions for @ import in sass to generate native css imports are:

The name of the imported file ends with .css

The name of the imported file is an URL address (such as http://www.sass.hk/css/css.css%EF%BC%89)

The name of the imported file is the url () value of CSS.

If you want to import the original css file as sass, you can directly change the .css suffix to .scss (the sass syntax is fully compatible with css).

At this point, I believe you have a deeper understanding of "what is the basic syntax of Scss and the method of importing SASS files". 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.