Sass basis

Sass profile

What is a CSS preprocessor?

• The CSS preprocessor defines a new language. The basic idea is to add programming features to CSS in a specialized programming language, generate files with CSS as the target, and then simply code in that language.
• In plain English, “A CSS preprocessor uses a specialized programming language to style a Web page and then compiles it into a normal CSS file for your project. The CSS preprocessor adds programming features to CSS, regardless of browser compatibility. For example, you can use variables, simple logic programs, functions, and other basic programming language features in CSS to make your CSS cleaner, more adaptable, and more readable. Easier code maintenance, among other benefits.

What is Sass?

The Sass website describes Sass like this:

• Sass is a meta-language that is superior to CSS in that it can be used to describe file styles in a clear and structured way and has more power than normal CSS.
• Sass provides a cleaner, more elegant syntax, while providing multiple capabilities to create maintainable and manageable stylesheets.

Sass lived and lived

Sass is one of the earliest CSS preprocessors and has more power than LESS, but the initial indented syntax (an older version of Sass, more on that later in the course) was not accepted by the general public, but thanks to its power and Ruby on Rails, Many developers still choose Sass.

Sass is a CSS preprocessing language written in Ruby language, it was born in 2007, is the largest mature CSS preprocessing language. Originally designed to work with HAML (an indent HTML precompiler), it has the same indent style as HTML.

Why was it LESS popular than LESS in its early days?

Although the indentation style can effectively reduce the amount of code and enforce the coding style, it is not accepted by most programs, and on the other hand, it does not work with existing CSS code. This is the reason why Sass, although the earliest, is far LESS popular than LESS.

What’s the difference between Sass and Less?

The difference

Less is simpler than Sass

The installation of Cass requires the Ruby environment to be installed. Less is based on JavaScript, so you need to introduce Less. Js to process the code and output CSS to the browser. There are tools like less. App, SimpleLess, codekit. app, as well as online address editing.

Less is easier to use than Sass

Less does not tailor the original features of CSS, but adds programmatic language features to CSS based on the existing CSS syntax. It’s easy to get started as long as you know the basics of CSS.

In terms of functionality, Sass is slightly more powerful than Less

Sass has variables and scopes:

• $variable, like PHP;

• {$variable} like ruby;

• Variables can be global or local and have a priority.

② Sass has the concept of function:

• @function and @return and function arguments (as well as indefinite arguments) allow you to encapsulate the logic you want just like js development.
• Mixin is similar to function but lacks the programming logic like function. It is more about improving the reuse and modularity of CSS code segments. This is also used by the most people.
• Ruby provides a very rich set of built-in native apis.

③ Process control:

• Condition: @if @else;

• Loop through: @for @each @while

• Inheritance: @ the extend

• Reference: @ import

④ Data structure:

• $list type = array;

• $map =object;

• Other types are string, number, function, and so on

Less and Sass have different processing mechanisms

The former is handled by the client and the latter by the server, so the former is a bit slower than the latter

The only difference between Less and Sass variables is that Less uses @ and Sass uses $.

In common

Less and Sass share some common syntax, such as the following:

• Mixins – classes within classes;

• Parameter mix – classes that can be passed as arguments, just like functions;

• Nested rules – Nested classes within classes to reduce duplication of code;

• Arithmetic – CSS uses mathematics;

• Color function – you can edit colors;

• Namespace — grouping styles so that they can be called;

• Scope – locally modify style;

• JavaScript assignment – Using JavaScript expressions to assign values in CSS.

Why use Sass over Less?

• There are some mature Sass frameworks on the market, such as Compass, and there are many frameworks that use Sass, such as Foundation.

• In terms of foreign buzz, Sass is definitely better than LESS.

• In terms of tutorials, Sass is better than LESS. In the domestic LESS concentrated tutorial is LESS Chinese official website, and Sass Chinese tutorial, slowly in the country is also more common.

• Sass is also one of the mature CSS preprocessors and is maintained by a stable, strong team.

• Sass 3 is Scss(Sassy CSS). It is compatible with the original syntax, except that the original indentation is replaced by {}.

• The latest version 4 of Bootstrap (Web framework) uses Sass.

What’s the difference between Sass and SCSS?

Sass and SCSS are the same thing. They are usually called Sass, but they are different in two ways:

• The Sass file name extension is.sass, while the SCSS file name extension is.scss

• Sass is written with strict indented grammar rules, without braces ({}) and semicolons (;). SCSS syntax is written very much like our CSS syntax.

Let’s start with an example:

Sass syntax

$font-stack: Helvetica, sans-serif // Define variable $primary-color:# 333// Define the variable body font:100% $font-stack
  color: $primary-color
Copy the code

SCSS grammar

$font-stack: Helvetica, sans-serif;
$primary-color: # 333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
Copy the code

The compiled CSS

body {
  font: 100% Helvetica, sans-serif;
  color: # 333;
}
Copy the code

The basis of Sass

Sass variable

Sass declares variables

Syntax for defining variables: In some programming languages (e.g., JavaScript) variables are declared with the keyword “var”, but Sass does not use this keyword, instead using the dollar sign “$” :

The figure above makes it very clear that the variables of Sass consist of three parts:

• Declare variable symbol “$”
• The variable name
• The value assigned to the variable

To take a simple example, suppose your button color can declare several variables for it:

$brand-primary : darken(#428bca.6.5%) !default; // #337ab7
$btn-primary-color : #fff! default; $btn-primary-bg : $brand-primary ! default; $btn-primary-border : darken($btn-primary-bg, 5%) !default;
Copy the code

If the value is followed by! Default indicates the default value.

Note: If you know the Sass version of Bootstrap, you can see that the above example code is the color of the primaryButton defined by Bootstrap.

Call to the Sass variable

Once variables are declared in Sass, they can be called where they are needed. The method of calling a variable is also very simple.

Let’s say we define variables

$brand-primary : darken(#428bca.6.5%) !default; // #337ab7
$btn-primary-color: #fff! default; $btn-primary-bg : $brand-primary ! default; $btn-primary-border : darken($btn-primary-bg, 5%) !default;
Copy the code

Called in the button, which can be called as follows

.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}
Copy the code

Compiled CSS:

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #2e6da4;
} 
Copy the code

Sass common and default variables

Common variables

Once defined, it can be used globally.

$fontSize: 12px;
body{
    font-size:$fontSize;
}
Copy the code

Compiled CSS code:

body{
    font-size:12px;
}
Copy the code

The default variable

The default variable for sass only needs to add! After the value. The default.

$baseLineHeight:1.5! default;body{
    line-height: $baseLineHeight; 
}
Copy the code

Compiled CSS code:

body{
    line-height:1.5;
}
Copy the code

The default variable of sass is used to set the default value and then override it as required. The override method is as simple as declaring the variable before or after the default variable.

$baseLineHeight: 2;
$baseLineHeight: 1.5! default;body{
    line-height: $baseLineHeight; 
}
Copy the code

Compiled CSS code:

body{
    line-height:2;
}
Copy the code

You can see that the compiled line-height is now 2, instead of the default 1.5.

! The most important thing about default is that you can use it broadly when you’re developing your framework. Once you’ve defined this, the following things, like the background, or the font color, don’t have to be defined. It will implement the default color first

Sass local and global variables

The scope of variables in Sass has changed a bit over the years. Until recently, the scope of rulesets and other scope-declared variables was local by default. If there is already a global variable with the same name, since version 3.4, Sass has been able to handle the concept of scope correctly and create a new local variable instead.

Global variables and local variables

Let’s look at some code examples:

$color: orange ! default; // Define global variables (in selectors, functions, mixed macros... Global variables are defined outside of.block {
    color: $color; // Call global variables}em{$color: red; // Define local variablesa {
        color: $color; // Call a local variable}}span {
    color: $color; // Call global variables}Copy the code

CSS results:

.block {
    color: orange;
}
em a {
    color: red;
}
span {
    color: orange;
}
Copy the code

As you can see from the example above, variables defined inside an element do not affect other elements. A global variable is a variable defined outside an element, as shown in this code:

$color:orange ! default;Copy the code

Color is a global variable, and variables defined inside elements, such as’ color ‘, are global variables, and variables defined inside elements, such as’ color:red; ‘is a local variable.

In addition, Sass now offers one! Global parameters. ! Global and! Default is useful for defining variables. We will discuss the use of these two parameters and their functions in more detail later.

Shadow of a global variable

When in local scope (selectors, functions, mixed macros…) When you declare a variable that already exists in the global scope, the local variable becomes a shadow of the global variable. Basically, a local variable overrides a global variable only locally.

In the example above, the variable $color in the EM selector is the shadow of a global variable.

$color: orange ! default; // Define global variables.block {
    color: $color; // Call global variables}em{$color: red; // Define local variables (global variable $colorShadow)a {
        color: $color; // Call a local variable}}Copy the code

When do you declare variables?

My advice is to create variables only when it feels necessary. Don’t declare new variables just for some hacking, it doesn’t work. A new variable can only be created if all of the following criteria are met:

1. This value is repeated at least twice;
2. The value is likely to be updated at least once;
3. All of the behavior of this value is variable dependent (not coincidental).

Basically, there’s no reason to declare a variable that never needs to be updated or only used in a single place.

Sass nested

Sass also provides the ability to nest selectors, but that doesn’t mean you can’t nest too much in Sass, because the deeper you nest the CSS, the deeper the selectors will be in your compiled CSS code, which is often not desirable. This feature is currently being abused by many developers.

Selector nesting gives style sheet authors a way to achieve global selection by nesting local selectors within each other. There are three types of nesting in Sass:

• Selectors are nested
• Attributes are nested
• Pseudo classes nested

Selectors are nested

Suppose we have a structure like this:

<header>
<nav>
    <aHref = "# #" > Home < /a>
    <aHref = "# #" > About < /a>
    <aHref = "# #" > Blog < /a>
</nav>
<header>
Copy the code

To select the a tag in the header, you can use a nesting of selectors in Sass:

nav {
  a {
    color: red;
    header & {
      color:green; }}}Copy the code

The &concatenated character is compiled as follows:

nav a {
  color:red;
}

header nav a {
  color:green;
}
Copy the code

Attributes are nested

Sass also provides nesting properties. CSS has some properties with the same prefix but different suffixes, such as border-top/border-right, and similar properties such as margin, padding, and font. Suppose your style uses:

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
Copy the code

In Sass we can write:

.box {
    border: {
        top: 1px solid red;
        bottom: 1pxsolid green; }}Copy the code

Pseudo classes nested

Pseudo-class nesting is very similar to attribute nesting, except that it uses the &symbol to work with it. Take the classic “Clearfix” example:

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden; }}Copy the code

Compiled CSS:

clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}
Copy the code

Sass mixed macros

If you have several small styles that are similar throughout your site, such as colors, fonts, etc., and you can use variables in Sass, this is a good option. But as your styles become more complex and need to reuse large sections of styles, using variables won’t do the job for us. This is where hybrid macros in Sass become very meaningful. In this section, I’ll introduce you to Sass’s hybrid macros.

Declaring a hybrid macro

Mix macros with no parameters

In Sass, use “@mixin” to declare a mixed macro. Such as:

@mixin border-radius{
    border-radius: 5px;
}
Copy the code

@mixin is the keyword used to declare mixed macros, similar to @media and @font-face in CSS. Border-radius is the name of the hybrid macro. Inside the braces are the reused style codes.

Calling mixed macros

A mixed macro is declared in Sass by the @mixin keyword, so in the actual call, it matches the keyword “@include” to invoke the declared mixed macro. For example, define a hybrid macro “border-radius” with rounded corners in your style:

@mixin border-radius{
    border-radius: 3px;
}
Copy the code

To invoke the defined hybrid macro “border-radius” in a button, use this:

button {
    @include border-radius;
}
Copy the code

This time the compiled CSS:

button {
  border-radius: 3px;
}
Copy the code

Mixed macro parameters

Sass’s hybrid macros have a powerful ability to pass arguments, so there are several ways to pass arguments in Sass:

Pass a parameter with no value

In a mixed macro, you can pass an argument with no value, such as:

@mixin border-radius($radius){
  border-radius: $radius;
}
Copy the code

A parameter “$radius” with no value is defined in the hybrid macro “border-radius”.

When called, you can pass a parameter value to the mixed macro:

.box {
  @include border-radius(3px);
}
Copy the code

This means that a “border-radius” value of “3px” was passed to the mixed macro.

Compiled CSS:

.box {
  border-radius: 3px;
}
Copy the code

Pass a parameter with a value

In Sass mixed macros, you can also pass a default value to the parameters of the mixed macro, such as:

@mixin border-radius($radius:3px) {border-radius: $radius;
}
Copy the code

Pass a parameter “$radius” to the hybrid macro “border-radius” and give it a default value of “3px”.

There is an extra opportunity to call a mixed macro like this, if the corners of your page are “3px” in many places, just call the default mixed macro “border-radius” :

.btn {
  @include border-radius;
}
Copy the code

Compiled CSS:

.btn {
  border-radius: 3px;
}
Copy the code

Sometimes, however, some elements in the page have different values for the rounded corners, so you can randomly pass values to the mixed macro, such as:

.box {
  @include border-radius(50%);
}
Copy the code

Compiled CSS:

.box {
  border-radius: 50%;
}
Copy the code

Pass multiple parameters

Sass hybrid macros can pass multiple arguments in addition to a single argument. For example:

@mixin center($width, $height) {width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
Copy the code

Multiple parameters are passed in the hybrid macro “Center”. The actual invocation is the same as its invocation of other mixed macros:

.box-center {
  @include center(500px.300px);
}
Copy the code

To compile CSS:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}
Copy the code

There is a special parameter “…” . When a mixed macro passes too many parameters, it can be replaced with parameters, such as:

@mixinbox-shadow($shadows...) {@if length($shadows) >= 1 {
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(# 000.25);
    box-shadow: $shadow; }}Copy the code

In the actual call:

.box {
  @include box-shadow(0 0 1px rgba(#000.5),0 0 2px rgba(#000.2));
}
Copy the code

Compiled CSS:

.box {
  box-shadow: 0 0 1px rgba(0.0.0.0.5), 0 0 2px rgba(0.0.0.0.2);
}
Copy the code

The downside of hybrid macros

Hybrid macros bring us a lot of convenience in actual coding, especially for reuse of repeated code blocks. But its biggest drawback is that it generates redundant code blocks. For example, when the same mixed macro is called in different places. Such as:

@mixin border-radius{
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}
Copy the code

The example calls the defined “border-radius” hybrid macro in both “.box “and”.btn “. First look at the compiled CSS:

.box {
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
Copy the code

As you can see from the example above, Sass does not intelligently combine the same style code blocks when calling the same mixed macro. This is where Sass’s hybrid macros fall short.

Sass inheritance

Inheritance is familiar to those of you who know CSS. Let’s start with a picture:

[] (http://img.m

The code in the figure shows that “.col-sub. block li,.col-extra. block li “inherits the” padding: 0; “of the”.item-list ul li “selector. And “list-style: None outside None;” in the “ul Li” selector. Box-sizing :inherit; .

There is also inheritance in Sass, which is a block of style code in an inherited class. In Sass, the code inherits from an existing class style block by using the keyword “@extend”. As follows:

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
Copy the code

After compiling:

//CSS
.btn..btn-primary..btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}
Copy the code

As you can see from the example code, inheritance in Sass can be inherited from all the style codes in the class style block, and the compiled CSS will combine the selectors together to form a combination selector:

.btn..btn-primary..btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
Copy the code

Sass placeholder %

The % placeholder in Sass is a powerful, useful feature, and one I really like. It can replace the redundant code situation caused by base classes in CSS. Because the % declaration code, if not called by @extend, does not produce any code. Here’s a demo:

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
Copy the code

This code is not called by @extend, it does not generate any code blocks, it just lies in one of your SCSS files. Only calls via @extend generate code:

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend%pt5; }}Copy the code

The compiled CSS

//CSS
.btn..block {
  margin-top: 5px;
}

.btn..block span {
  padding-top: 5px;
}
Copy the code

As you can see from the compiled CSS code, the compiled code combines the same code with the placeholder called @extend. This is what we want to see, and it makes your code cleaner.

Sass hybrid macros VS inheritance VS placeholders

Beginners often struggle with the question “When to use mixed macros, when to use inheritance, and when to use placeholders?” In fact, they each have their own advantages and disadvantages, let’s take a look at their use effect:

Mixed macros in Sass

@mixin mt($var){
    margin-top: $var;  
}

.block {
    @include mt(5px);

    span {
        display:block;
        @include mt(5px); }}.header {
    color: orange;
    @include mt(5px);

    span{
        display:block;
        @include mt(5px); }}Copy the code

** Summary: ** Compiled CSS makes it clear that it does not automatically merge the same style codes. Calling the same hybrid macro in a style file will result in multiple corresponding style codes, resulting in code redundancy, which is one thing CSSer cannot tolerate. But he doesn’t have nothing to do. He can pass parameters.

Personal advice: If your block of code involves variables, it is recommended to use mixed macros to create the same block of code.

Sass inherit

Similarly, take the mixed macro from the above code, represent it with the class name, and invoke it by inheritance:

.mt{
    margin-top: 5px;  
}

.block {
    @extend .mt;

    span {
        display:block;
        @extend.mt; }}.header {
    color: orange;
    @extend .mt;

    span{
        display:block;
        @extend.mt; }}Copy the code

• ** Summary: ** When inheritance is used, the compiled CSS combines the inherited code blocks and presents them to you with a combination of selectors, such as.mt,.block,.block span,.header,.header span. The resulting code is much cleaner than hybrid macros, which IS what CSSer expects. But he can’t pass variables.

• Personal advice: If your code block does not require any specific variable arguments and a base class already exists in the file, it is recommended to use inheritance from Sass.

A placeholder

Finally looking at the placeholders, replace the base class. Mt in the above code with the Sass placeholder format:

%mt{
    margin-top: 5px;  
}

.block {
    @extend %mt;

    span {
        display:block;
        @extend%mt; }}.header {
    color: orange;
    @extend %mt;

    span{
        display:block;
        @extend%mt; }}Copy the code

** Summary: The compiled CSS code is basically the same as using inheritance, except that the placeholder MT selector is not generated in the code. The main difference between placeholders and inheritance is that “placeholders are defined independently and do not generate any code in CSS when not called; Inheritance is that there is a base class, and the style of the base class will appear in the compiled CSS code whether it is called or not.

Here’s a table:

[

Sass interpolation# {}

One of the main reasons for using a CSS preprocessor language is to get a better architecture with Sass. Let’s say you want to write cleaner, more efficient, and object-oriented CSS. Interpolation in Sass is an important part. Let’s take a look at the following example:

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each$prop in $properties { #{$prop}-#{$side}: $value; }}.login-box {
    @include set-value(top, 14px);
}
Copy the code

It makes variables and properties work perfectly. The above code is compiled into CSS:

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}
Copy the code

This is a simple example of Sass interpolation. When you want to set the value of the property you can insert it with a string. Another useful use is to build a selector. It can be used like this:

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }}@include generate-sizes("header-text".12px.20px.40px);
Copy the code

Compiled CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
Copy the code

Once you’ve discovered this, you’ll start thinking about super cool mixins to generate code or generate another mixins. However, this is not entirely possible. The first restriction, which may remove interpolation for Sass variables.

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}
Copy the code

When the above Sass code is compiled, you get the following information:

Error style. SCSS (Line 5: Undefined: “$margin-“.)

Therefore, the #{} syntax is not ubiquitous and cannot be inserted into an existing variable

Nor can you call it in a mixin:

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}
Copy the code

The above code will also report an error when translated into CSS:

error style.scss (Line 7: Invalid CSS after “… nclude updated-“: expected “}”, was “#{$flag};” )

Fortunately, interpolation is available using @extend. Such as:

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}
Copy the code

The Sass code above is executable and can be dynamically inserted into.class and %placeholder. Of course they can’t accept parameters like mixin.

The code above compiles CSS:

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status..navigation {
    font-weight: bold;
}
Copy the code

Sass annotation

Comments are extremely important to a programmer. Good comments help you and others to read the source code. There are two ways to comment in Sass, which I’ll call for the moment:

• Like CSS, use “/*” to start comments and “*/” to end comments.
• JavaScript like annotations, using “//”

The former is displayed in the compiled CSS, and the latter is not displayed in the compiled CSS. Here is an example:

// Define a placeholder %mt5 {margin-top: 5px;
}

/* Call a placeholder */

.box {
  @extend %mt5;
}
Copy the code

The compiled CSS

.box {
  margin-top: 5px;
}

/* Call a placeholder */
Copy the code

Sass data type

Sass, like JavaScript, has its own data types. Sass contains the following data types:

• Numbers: e.g. 1, 2, 13, 10px;
• Strings: quoted or unquoted strings, e.g., “foo”, ‘bar’, baz;
• Colors: for example, blue, #04a3f9, rgba(255,0,0,0.5);
• Boolean: for example, true, false;
• Null values: for example, null;
• List of values: separated by Spaces or commas, e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif.

SassScript also supports other CSS property values, such as Unicode ranges, or! Important statement. However, Sass does not treat these attribute values as if they were unquoted strings.

string

SassScript supports two string types of CSS:

• Quoted strings such as “Lucida Grande”, ‘sass-lang.com’;
• Unquoted strings such as sans-serifbold.

CSS files do not change their types when compiled. The only exception is that a quoted string is compiled as an unquoted string using the #{} interpolation statement, making it easier to refer to selector names in mixins.

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!"; }}@include firefox-message(".header");
Copy the code

Compile as follows:

body.firefox .header:before {
  content: "Hi, Firefox users!"; }
Copy the code

Note: When deprecated = Property Syntax (not understood yet), all strings will be compiled as unquoted strings, whether or not quotes are used.

List of values

The so-called value lists (lists) refer to how Sass handles the CSS:

margin: 10px 15px 0 0
Copy the code

Or:

font-face: Helvetica, Arial, sans-serif
Copy the code

A series of values separated by Spaces or commas like above.

In fact, independent values are also considered value lists (lists of values containing only one value).

The Sass list functions give more functionality to the list of values (more on Sass) :

1. The NTH function can directly access an item in the value list.
2. Join functions can join multiple lists of values together;
3. The Append function can add values to a list of values;
4. The @each rule (@each rule) is able to add styles to each item in the list of values.

The list of values can also contain lists of values, such as 1px, 2px, and 5px, 6px is a list of values containing lists of values 1px, 2px and 5px, 6px. If the inner and outer lists were separated in the same way, the inner list would be wrapped in parentheses, so it could also be written as (1px 2px) (5px 6px). When the list of values is compiled into CSS, Sass does not add any parentheses because CSS does not allow this. (1px 2px) (5px 6px) and 1px 2px 5px 6px are the same in compiled CSS files, but they have different meanings in Sass files. The former is a list of values with two lists of values, while the latter is a list of values with four.

You can use () to represent an empty list that cannot be compiled directly into CSS. For example, when compiling a font-family: (), Sass will report an error. If the list of values contains an empty list of values or null values, the null values are cleared at compile time, such as 1px 2px () 3px or 1px 2px null 3px.

Sass operation

Computations in programs are a common thing, but the only thing you can do with CSS is the calc() function. But in Sass, arithmetic is just one of its basic features. You can do all kinds of math in Sass. In the following chapters, I will talk about the math in Sass.

Addition/subtraction

Addition is one of the operations in Sass that can be performed on variables or properties. Such as:

.box {
  width: 20px + 8px;
}
Copy the code

Compiled CSS:

.box {
  width: 28px;
}
Copy the code

However, for different types of units, the Sass calculation will report an error, as shown in the following example:

.box {
  width: 20px + 1em;
}
Copy the code

“Incompatible Units: ’em’ and ‘px’.”

Subtraction is the same as addition

The multiplication

Multiplication in Sass is slightly different from addition and subtraction. While it is possible to support multiple units (e.g. Em,px, %), there is a problem when a unit declares two values simultaneously. Take the following example:

.box {
  width:10px * 2px;  
}
Copy the code

Error message “20px*px isn’t a valid CSS value.” is displayed during compilation.

If two values have the same units in multiplication, you only need to provide units for one value. The above example can be changed to:

.box {
  width: 10px * 2;
}
Copy the code

Compiled CSS:

.box {
  width: 20px;
}
Copy the code

Sass multiplication is the same as addition and subtraction in that it will report an error if there are different types of units in the operation.

division

Sass’s multiplication rules also apply to division. But there’s another special thing about division. It is well known that the “/” symbol is already used as a symbol in CSS. Therefore, when dividing in Sass, using the “/” sign will not take effect. It will not produce the desired result at compile time, nor will it cause an error. Let’s start with a simple example:

.box {
  width: 100px / 2;  
}
Copy the code

The compiled CSS looks like this:

.box {
  width: 100px / 2;
}
Copy the code

It doesn’t make any sense to anyone. To fix this, just add a parenthesis **()** to the outside of the operation:

.box {
  width: (100px / 2);  
}
Copy the code

The compiled CSS looks like this:

.box {
  width: 50px;
}
Copy the code

Except in the case above with parentheses, the “/” symbol is used as a division operator, and if the “/” symbol is in an existing mathematical expression, it is also used as a division symbol. For example:

.box {
  width: 100px / 2 + 2in;  
}
Copy the code

Compiled CSS:

.box {
  width: 242px;
}
Copy the code

In addition, in Sass division, the “/” symbol is automatically recognized as a division when using a variable, as shown in the following example:

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}
Copy the code

Compiled CSS:

.item {
  width: 100px;
}

.list {
  width: 100px;
}
Copy the code

To sum up, the “/” symbol is used as a division operator in the following ways:

• If the value or any part of it is stored in a variable or the return value of a function. • If the value is surrounded by parentheses. • If the value is part of another mathematical expression.

As follows:

p {
  font: 10px/8px; // Pure CSS, not divisionwidth: 1000px;
  width: $width/2; // Use the variable, is the division operationwidth: round(1.5) /2; // Use the function, is the division operationheight: (500px/2); // Use parentheses to dividemargin-left: 5px + 8px/2px; // Add (+); // add (+);Copy the code

The compiled CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }
Copy the code

There’s one more case for Sass division. Let’s just remember that when we multiply, if we have two values with the same units, when we multiply, we don’t get what we want. But in division, if two values have the same unit value, the division operation will result in a number without units. As follows:

.box {
  width: (1000px / 100px);
}
Copy the code

The compiled CSS looks like this:

.box {
  width: 10;
}
Copy the code

Color operation

All arithmetic operations support color values and are segmented. That is, red, green, and blue are individually computed. Such as:

p {
  color: # 010203 + # 040506;
}
Copy the code

The calculation formula is 01 + 04 = 05, 02 + 05 = 07 and 03 + 06 = 09, which are combined as:

The resulting CSS is:

p {
  color: # 050709;
}
Copy the code

Arithmetic operations can also work with numbers and color values, again piecewise. Such as:

p {
  color: # 010203 * 2;
}
Copy the code

The calculation formula is 01 * 2 = 02, 02 * 2 = 04 and 03 * 2 = 06, which are synthesized as:

p {
  color: # 020406;
}
Copy the code

RGB colors are converted to hexadecimal before being computed:

background: rgb(1.1.1) * 2;
Copy the code

Compile results:

    background: # 020202;
Copy the code

Character operation

Strings can be concatenated in Sass using the addition symbol “+”. Such as:

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}
Copy the code

Compiled CSS:

.box:before {
  content: " Hello Sass! ";
}
Copy the code

In addition to concatenating characters in variables, you can concatenate characters directly with + :

div {
  cursor: e + -resize;
}
Copy the code

Compiled CSS:

div {
  cursor: e-resize;
}
Copy the code

Note that if the quoted string is appented with an unquoted string (that is, the quoted string is to the left of the + sign), the result will be a quoted string. Similarly, if an unquoted string is appended with a quoted string (the unquoted string is to the left of the + sign), the result will be an unquoted string. Such as:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
Copy the code

Compiled CSS:

p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}
Copy the code