Sass usage

preface

Anyone who has studied CSS knows that it is not a programming language. Can’t write logical programming, can only write style line by line CSS properties. Large projects write repetitive styles, and maintenance is also troublesome.

Naturally, some people started adding programming elements to CSS, called CSS preprocessors. The basic idea is that it is developed in a specialized programming language and then compiled into a normal CSS file.

Among the CSS preprocessors, SASS is more suitable for writing CSS development habits.

The purpose of this article is to organize the usage of SASS in everyday development. Make the development of SASS easy to understand, easy to find, there is no need to go to the official website to see the English version.

Sass Chinese document

The installation

SASS is written in Ruby, but the syntax is unrelated. If you don’t know Ruby, use it anyway. You just have to install Ruby first and then SASS.

Download Ruby Ruby install

Assume you have Ruby installed

NPM install

npm install -g sass
Copy the code

For more installation methods, please visit sass-lang.com/install

Check the SASS version after installation

sass --version
Copy the code

use

SASS files are plain text files where CSS syntax can be used directly. The file name extension is.scss

Create a test. SCSS file, open the terminal in the current file path, and run the following command to compile the test. SCSS file into a test. CSS file

sass test.scss test.css
Copy the code

SASS provides four options for compilation styles:

nested: nested indented CSS code, which is the default.
expanded: Unindented, extended CSS code.
compact: Concise CSS code.
compressed: Compressed CSS code.

You can also have SASS listen for a file or directory and automatically generate a compiled version if the source file changes.

// watch a file
sass --watch input.scss:output.css

// watch a directory
sass --watch app/sass:public/stylesheets
Copy the code

SASS official website, provides an online converter. You can test run the following examples there.

variable

Variables start with $

$blue : #1875e7;div{color : $blue;
}
Copy the code

If a variable needs to be embedded in a string, it must be in #{}.

$side : left;

.box-#{$side} {
    color: # 000;
}
.rounded{border-#{$side}-radius: 5px;
}
Copy the code

Computing functions

SASS allows the use of formulas in code:

body{margin: (14px/2);top: 50px + 100px;right: $var * 10%;
}
Copy the code

nested

SASS allows selectors to be nested. For example, the following CSS code:

div h1{color : red;
}
Copy the code

It can be written as:

div{{hicolor:red; }}Copy the code

Attributes can also be nested, such as the border-color attribute, which can be written as:

p{border: {color: red; }}Copy the code

Note that the border must be followed by a colon.

Within a nested code block, you can use & to reference the parent element. For example, the hover pseudo-class can be written as:

a{&:hover { color: #ffb3ff; }}Copy the code

Or the & references the parent element name as the selector name

.box{
    color: #ccc; & -left{
        color: red; }}#app{
    font-size: 14px;
    &-big{
        font-size: 16px; }}Copy the code

annotation

There are two annotation styles in SASS.

Standard CSS comments /* comment */ are reserved for the compiled file.

Single-line comment // comment, which only remains in the SASS source file and is omitted after compilation.

Add an exclamation point after the /* to indicate an “important note”. This line of comment is retained even when compiled in compressed mode and can often be used to declare copyright information.

.box{
    font-size: 14px; /* Font size */
    color: # 333; // Font color}/ *! Important note! * /
Copy the code

inheritance

SASS allows one selector to inherit from another selector

.class1{border: 1px solid #ddd;
}
.class2{
    @extend .class1;
    font-size: 14px;
}
Copy the code

Mixin

Blocks of code that can be reused.

Using the @mixin command, define a block of code.

Call this mixin using the @include command.

@mixinleft {float: left;margin-left: 10px;
}
div {
    @include left;
}
Copy the code

The power of mixins is that you can specify parameters and defaults.

@mixin left($value: 10px) {float: left;margin-right: $value;
}

div{@include left;
}

p{@include left(20px);
}
Copy the code

$value: 10pxIs for the$valueVariable defaults

Here is an example of a mixin that generates browser prefixes.

@mixin rounded($vert.$horz.$radius: 10px) {border- # {$vert# {} -$horz}-radius: $radius; -moz-border-radius- # {$vert#} {$horz} :$radius; -webkit-border- # {$vert# {} -$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }

#footer { @include rounded(top, left, 5px); }
Copy the code

You can pass in default values when calling mixins

@mixin box($type) {.box-# {$type} {@content; }}@include box(left){
    left: 0;
};
@include box(right){
    right: 0;
};
Copy the code

The import file

The @import command is used to insert external files.

@import "path/filename.scss";
Copy the code

If you need to import SCSS or Sass files but do not want to compile them as CSS, you simply add an underscore to the file name. This will tell Sass not to compile these files, but you do not need to add an underscore to the import statement.

For example, naming the file _colors.scss will not compile the _colours.css file.

@import "colors";
Copy the code

In the above example, the file imported is actually _colors.scss

Note that underlined and ununderlined files of the same name cannot exist at the same time. Underlined files will be ignored.

Nested @ import

In most cases, @import is usually used at the outermost layer of the file (outside of the nesting rules). In fact, you can also nest @import within CSS styles, which will have the same effect as normal usage, except that the imported styles can only appear in the nested layer.

Suppose the example.scss file contains the following styles:

.example {
  color: red;
}
Copy the code

Then import it into the #main style

Will be compiled to

#main .example {
  color: red;
}
Copy the code

Conditional statements

@if can be used to judge:

p{@if 1 + 1= =2 { border: 1pxsolid; }@if 5 < 3 { border: 2pxdotted; }}Copy the code

With the @else command:

@if lightness($color) > 30%{background-color: # 000;
} @else{background-color: #fff;
}
Copy the code

Looping statements

The for loop

The @for directive can repeat the output format within limits, changing the output each time as required (the value of the variable).

This directive has two formats:

@for $var from <start> through <end>.
or@for $var from <start> to <end>.
The difference is thatthrough 与 toThe meaning of:
- When usingthrough, the condition range containsThe < start > and < end >The value of the
- While the use oftoThe condition range contains only<start>Does not contain the value of<end>The value of the.
In addition,$varIt could be any variable, for example$i;<start> 和 <end>Must be an integer value.

@for $i from 1 to 10{.border-# {$i} {border: # {$i} px solid blue; }}Copy the code

The while loop

$i: 6;

@while $i > 0{.item-# {$i} { width: 2em * $i; }$i: $i - 2;
}
Copy the code

The each command is similar to for:

@each $memberA, b, C, d {.#{$member} {background-image: url("/image/#{$member}.jpg"); }}Copy the code

Custom function

@function double($n) {@return $n * 2;
}

#sidebar{width: double(5px);
}
Copy the code

Object to write

Object syntax for SASS

(key: value)
Copy the code

$obj: (
    left: 0px,
    top: 0px
);

div {
    left: map-get($obj."left");
    top: map-get($obj."top");
}
Copy the code

Traverse object

$flex: (
    justify-content: center,
    align-item: center
);

.flex {
    display: flex;
    @each $key.$value in $flex {
        #{$key} :$value; }}Copy the code

Obj is an object written with (key:value), and then you want to get obj with (key:value). Value is an object, and then if you want to get obj, and you want to get the key of OBj, you have to use the map-get function Sass map function

You get the sense that this isn’t too much trouble, right? So let me give you a sense of how to write it with @mixin

/ / flex layout
@mixin flex($obj) {
  display: flex;

  @if (map-get($obj."justify")) {
    justify-content: map-get($obj."justify");
  }

  @if (map-get($obj."align")) {
    align-items: map-get($obj."align"); }}// Flex is horizontally centered
@mixin flex-c {
  @include flex((justify: center));
}

// Flex is aligned horizontally
@mixin flex-sb {
  @include flex((justify: space-between));
}

// Flex is horizontally and vertically centered
@mixin flex-cc {
  @include flex((justify: center, align: center));
}

// Flex is horizontally aligned and vertically centered
@mixin flex-sbc {
  @include flex((justify: space-between, align: center));
}
Copy the code

Refer to the article SASS Usage Guide Ruan Yifeng

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Sass common usage

Sass usage

preface

The installation

NPM install

use

You can also have SASS listen for a file or directory and automatically generate a compiled version if the source file changes.

variable

Computing functions

nested

annotation

inheritance

Mixin

The import file

Nested @ import

Conditional statements

@if can be used to judge:

With the @else command:

Looping statements

The for loop

The while loop

The each command is similar to for:

Custom function

Object to write

Traverse object

Sass common usage

Sass usage

preface

The installation

NPM install

use

You can also have SASS listen for a file or directory and automatically generate a compiled version if the source file changes.

variable

Computing functions

nested

annotation

inheritance

Mixin

The import file

Nested @ import

Conditional statements

@if can be used to judge:

With the @else command:

Looping statements

The for loop

The while loop

The each command is similar to for:

Custom function

Object to write

Traverse object

Related Posts

Mobile terminal H5 simulates long press events

Summary of the actual combat of Vue3.0 project

Vue fruit bookkeeping – navigation bar