Example Analysis of Common Operation of sass

This article is to share with you the content of sample analysis of common operations in sass. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I. variables

All variables start with $

$font_size: 12pxter.container {font-size: $font_size;}

If the variable is nested in a string, it needs to be written in # {}

$side: left;.rounded {border-# {$side}: 1px solid # 000;} II. Nested

Hierarchical nesting

.container {display: none; .header {width: 100%;}}

Note that you need to add a colon after border:

.container {border: {width: 1px;}}

You can refer to the parent element through &, which is often used in various pseudo-classes

.link {&: hover {color: green;}} III. Mixin

To put it simply, it is a reusable block of code, through the @ include command

/ / mixin@mixin focus_style {outline: none;} div {@ include focus_style;}

Build after compilation

Div {outline: none;}

You can also specify parameters and default values

/ parameter, default value @ mixin the_height ($h: 200px) {height: $h;} .box_default {@ include the_height;} .box_not_default {@ include the_height (100px);}

Build after compilation

.box _ default {height: 200px;} .box_not_default {height: 100px;} IV. Inheritance

With @ extend, one selector can inherit the style of another selector. Examples are as follows

/ / inherit .class1 {float: left;} .class2 {@ extend .class1; width: 200px;}

Build after compilation

.class1, .class2 {float: left;}. Class2 {width: 200px;} V. Operation

Go straight to the example

.container {position: relative; height: (200px/2); width: 100px + 200px; left: 50px * 2; top: 50px-10px;}

Build after compilation

.container {position: relative; height: 100px; width: 300px; left: 100px; top: 40px;} insert file

Insert external files with @ import

@ import "outer.scss"

You can also insert ordinary css files

@ import "outer.css"; Custom function

Customize the function through @ function

@ function higher ($h) {@ return $h * 2;} .container {height: higher (100px);}

Compiled output

.container {height: 200px;} comments

Notes in two styles

/ / single-line comments, disappear after compilation / * standard CSS comments will be retained in the compiled code * /

If you want to keep important comments after compression and compilation, you can add them after / *!

/ *! Important comments, compressed compilation will not disappear * / Thank you for reading! This is the end of this article on "sample analysis of common operations of sass". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!