The most mature, stable and powerful professional-level CSS extension language in the world!
Compatible with CSS
Sass is fully compatible with all versions of CSS. We have strict control over this so you can seamlessly use any available CSS library.
Rich features
Sass has more features and features than any other CSS extension language. The Sass core team has worked tirelessly to keep it ahead of the pack.
Mature
Sass has been carefully crafted by its core team for more than 8 years.
Industry recognition
Time and time again, the industry regards Sass as its preferred CSS extension language.
Large community
Several technology companies and hundreds of developers support Sass.
frame
There are countless frameworks built with Sass. For example, Compass, Bourbon, and Susy.
I installed it in vue scaffolding
1 Installation
npm install --save-dev sass-loader //sass-loader depends on node-sassnpm install --save-dev node-sass
2 Configuration: Add configuration in rules under the build folder
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
// I don't know why I can't package it after configuration, It's easy to use without configuration
3 Modify the style tag in
<style lang="scss">
4 Use
(1) Variables
1-1) Use variables
An important feature that sass benefits people is that it introduces variables to css. You can define the repeatedly used css attribute values as variables and then reference them by variable names without repeatedly writing this attribute value. Alternatively, for attribute values that have been used only once, you can give them an easy-to-understand variable name so that you can tell at a glance what this attribute value is for.
sass uses the $ symbol to identify variables (the old version of sass uses! to identify variables. Changing it to $ is probably because !highlight-color looks too ugly.)
1-2) Variable declaration
$back: red
#app
color: $back
// Variable declarations are also divided into global variables and local variables
// This is also easy to use
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//After compilation
.selected {
border: 1px solid #F90;
}
1-3) Variable Naming
Use - and _ in sass are actually the same. For example, $link-color and $link_color actually point to the same variable.
$link-color: blue;
a {
color: $link_color;
}
//After compilationa {
color: blue;
}
(2) Nested CSS Rules
Repeating the selector in css is very annoying. If you want to write a large string of styles pointing to the same piece in the page, you often need to write the same ID over and over again:
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
In this case, sass allows you to write it only once and makes the style more readable. In Sass, you can nest rule blocks in rules blocks like a Russian doll. When sass outputs css, it will help you handle these nested rules well to avoid your repeated writing.
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* After compilation */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
(2-1) Identifier of parent selector&;
When using descendant selectors and pseudo-classes, it may be more troublesome. I don't know how to write them. This time it will come in handy
article a {
color: blue;
&:hover { color: red }
}
// After compilation
// In fact & is equivalent to being a parentarticle a { color: blue }
article a:hover { color: red }
(2-2) Nesting of group selectors;
When processing groups, you only need to use them and split them, and you can perfectly analyze them without any troublesome things
.container {
h1, h2, h3 {margin-bottom: .8em}
}
<!--After compilation-->
.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}
This is the same
nav, aside {
a {color: blue}
}
//After compilationnav a, aside a {color: blue}
(2-3) Subcombination selector and same-layer combination selector: >, + and ~;
The above three combination selectors must be used in conjunction with other selectors to specify that the browser selects only elements in a specific context.
article {
// All combination selectors on the same level ~ article { border-top: 1px dashed #ccc }
// Direct child elements > section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
// adjacent combination selector of the same layer nav + & { margin-top: 0 }
}
(2-4) Nested properties;
In sass, in addition to the CSS selector, properties can also be nested. Although writing attributes involves repetitions that are not as bad as writing selectors, it is also very annoying to write border-styleborder-widthborder-color and border-*. In sass, you just need to type the border:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
// After compilationnav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
You can even write like this
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
// After compilationnav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
3 Import SASS files;
CSS has a particularly uncommon feature, namely the @import rule, which allows importing other css files into one css file. However, the consequence is that the browser will download other css files only when executing to @import, which causes the page to load particularly slowly.
sass also has an @import rule, but the difference is that sass' @import rule imports the relevant files when generating the css file. This means that all relevant styles are summarized into the same css file without the need to initiate additional download requests.
4 Default variable value
Generally, you declare a variable repeatedly, only the last declaration is valid and it will override the previous value. Give an example:
$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}
But you don't want this situation you can use the sass !default tag to achieve this. It is very similar to the opposite of the !important tag in the css attribute. The difference is that !default is used for variables, which means: if this variable is declared assigned, then use the value it declares, otherwise use this default value.
5 Comments
body {
color: #333; // This comment content will not appear in the generated css file padding: 0; /* This comment content will appear in the generated css file */
}
6 Mixer
If you have a few small stylings in your entire website (such as consistent colors and fonts), then using variables to handle this situation uniformly is a great choice. But when your style becomes more and more complex, you need large segments of reusing style code, and independent variables will not be able to cope with this situation. You can use sass mixer to reuse large segments of styles.
The mixer is defined using the @mixin identifier. It looks a lot like other CSS @ identifiers, such as @media or @font-face. This identifier gives a name to a large segment of style so that you can easily reuse the segment by citing the name. The following sass code defines a very simple mixer with the purpose of adding rounded borders across browsers.
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Then use this mixer in your stylesheet via @include, wherever you want it. The @include call will extract all the styles in the mixer and place them where @include is called. If you write like below:
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//Sass final generation:// After compilation.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
The mixer is so easy to use, you may overuse it if you are not careful. A large amount of reuse may cause the generated stylesheet to be too large and lead to slow loading. So, first we will discuss the use scenarios of mixers to avoid abuse.
(6-1) Transfer parameters to the mixer;
Mixers do not necessarily have to generate the same style. The exact style generated by the mixer can be customized by passing parameters to the mixer when @include the mixer. When @include mixer, the parameters are actually variables that can be assigned to the value of the css attribute. If you have written JavaScript, this method is very similar to JavaScript's function:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
When the mixer is @include, you can use it as a css function to pass the parameters. If you write like below:
a {
@include link-colors(blue, red, green);
}
//The final generation of Sass is:a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
In fact, there are many methods for @mixin. You can check it on the official website.
7 Use selector inheritance to streamline CSS;
When using sass, the last main feature of reducing duplication is selector inheritance. Based on the Nicole Sullivan object-oriented css concept, selector inheritance means that one selector can inherit all styles defined for another selector. This is implemented through the @extend syntax, as follows:
//Inherit the style through selector.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.seriousError will not only inherit all styles of .error itself, but any combination selector styles related to .error will also be inherited by .seriousError in the form of a combination selector, as follows:
//.seriousError inherits style from .error.error a{ //Apply to .seriousError a color: red;
font-weight: 100;
}
{ //Apply to font-size: 1.2rem;
}
There are two key points you should know about @extend.
Compared with the mixer, there is relatively less css code generated. Because inheritance is just a repeat selector and does not repeat properties, using inheritance is often smaller than the css volume generated by the mixer. If you are very concerned about the speed of your site, keep this in mind.
Inheritance follows the rules of css cascade. When two different css rules are applied to the same html element, and these two different css rules have different values for the modification of the same attribute, the css cascade rules will determine which style to apply. Quite intuitive: usually the selector with higher weights wins, and if the weights are the same, the rules defined behind wins.
The mixer itself does not cause the problem of css casing, because the mixer places the style directly into the css rule, and inherits the problem of style casing. The inherited style will keep the original defined position and selector weight unchanged. Usually this doesn't cause any problem, but it's not bad to know this.
The above is the information I learned on the official website. It is not comprehensive, but I think it is definitely enough for daily development. Attached the official website address:Sass official website address, I hope it will be helpful to everyone's learning, and I hope everyone will support me more.