How to use Sass
Most people do not understand the knowledge of this "how to use Sass" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Sass" article.
What is a CSS preprocessor?
The CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass may be the most popular preprocessor, but other common examples include Less and Stylus.
What is SASS?
Sass (SyntacticallyAwesomeStyleSheets) is an extension of CSS that allows you to use variables, nested rules, inline imports, and so on. It also helps keep your organization organized and allows you to create stylesheets faster.
Sass is compatible with all versions of CSS. The only requirement to use it is that Ruby must be installed.
How to use Sass?
Syntax:
Sass contains two syntax options:
1. SCSS (SassyCSS): use the .scss file extension, which fully conforms to the CSS syntax
2. Indented (simply called 'Sass'): use .sass file extension and indentation instead of parentheses; it does not fully conform to the CSS syntax, but it is faster to write
Note that you can use the sass-convert command to convert files from one syntax to another.
Variabl
Like other programming languages, Sass allows the use of variables that store information that can be used throughout the stylesheet. For example, you can store color values in a variable at the top of the file, and then use this variable when setting the color of an element. This allows you to change colors quickly without having to modify each line individually.
For example:
$font-stack:Helvetica,sans-serif
$primary-color:red
Body {
Font:100%$font-stack
Color:$primary-color;}
The following CSS will be generated:
Body {
Font:100%Helvetica,sans-serif
Color:red
}
2.jpg
Nesting
Nesting is a double-edged sword. While it provides an excellent way to reduce the amount of code that needs to be written, it can also lead to overqualified CSS if not carefully implemented. The idea is to nest CSS selectors in a way that mimics the HTML hierarchy.
The basic navigation styles that use nesting are shown below:
Nav {
Ul {
Margin:0
Padding:0
List-style:none
}
Li {display:inline-block;}
A {
Display:block
Padding:6px12px
Text-decoration:none
}}
The CSS output is as follows:
Navul {
Margin:0
Padding:0
List-style:none
}
Navli {
Display:inline-block
}
Nava {
Display:block
Padding:6px12px
Text-decoration:none
}
The above is about the content of this article on "how to use Sass". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
