[Common usage of Sass] Sass opening method of Css code

Sass

What is Sass (English full name: Syntactically Awesome Stylesheets)

• The world's most mature, stable and powerful professional-grade CSS extension language! (Official website introduction)

• Sass is a cascading style sheet language and an extension language for CSS

• Sass files have the suffix.scss

• The syntax and code format are very similar to CSS, but browsers do not support Sass code and need to be compiled into a css file

Why use Sass

• Sass extends CSS3, adding features such as variables, css nesting rules, mixers, inheritance, etc.
• It makes up for the shortcomings of css code that cannot be reused and nested , and improves the efficiency of code writing
• Perform style management, generate formatted CSS code, easy to organize and maintain
• As a code compression tool, the output is compressed code, which reduces the size of CSS files and improves compilation efficiency

以上介绍不能具体体现scss的优点,具体我们先看实例两个实例

array

Use an array to store multiple colors, the index starts at 1

$myColor: #1d1d1d #fff #ffae78 #62c500 #4b97e2;
.box{
    
    
	background: nth($myColor,1); /*#1d1d1d*/
	color: nth($myColor,6);
}

mixer

Use a function similar to

/*定义混合器宽高*/
@mixin wh($w,$h){
    
    
	width: $w;
	height: $h;
}
div{
    
    
    @include wh(300px,200px);/*传参调用*/
}

Sass installation and usage examples

sass installation

• Sass is developed based on the Ruby language, so you need to install Ruby before installing sass

• The detailed installation process and configuration of sass refer to official or other tutorials, so I won’t repeat them here

• Open cmd and enter the following commands one by one: ruby -v, sass -vthe version number appears and the installation is successful

Using sass in developing software

• Here we take HBuilder as an example , follow the steps in turn
  
  

Finally, restart the software and you can right-click in the sass file to use the compile command

• Note: browsers do not support Sass code, you need to import compiled css into html

file integration

• Import the file using @import the command

  Compile under this file to integrate the code of multiple SCSS files into one custom.cssfile

/*custom.scss文件下*/
@import "public.scss";
@import "indexstyle"; /*可以不写后缀*/ 

• Integrated code output style

Expanded output expanded: normal mode
compact output compact output line by line
compressed output compressed remove all newlines and spaces

Nested output nested (similar to expanded output, } position is at the end of the line)

For example, compressed output compressed

• Open the sass plug-in configuration and modify the configuration

  Modify the code output path and style

"--output-style",
"compressed"

note

• There are single-line comments //and /* */Sass

• Single-line comments will not be retained after compilation, but multi-line comments will be retained

• Multi-line comments will not be retained during compression compilation, write an exclamation mark at the first character! It can be forced to be retained

@charset "utf-8"; /*中文注释时不写会报错*/
/*!
强制保留
*/

Sass variables

Variables are used to store some information to achieve code reuse

Sass variables can store the following information:

• string
• number
• color value
• Boolean value
• the list
• null value

Sass variables use the $ symbol format:$var:value

!global means global scope, !default default value

$mFont: Helvetica,Arial, Verdana;
$mColor: red;
$mFontSize: 16px;
$mWidth: 200px;

body {
    
    
  font-family: $mFont;
  font-size: $mFontSize;
  color: $mColor;
}

div {
    
    
  $mColor:blue !global;  / * !global表示全局作用域*/
  color: $mColor;/*blue*/
  width: $mWidth;
}

$color: red !default; /*!default会使用已有的 $color 默认值*/

Global variables can be defined in the same file and imported using @import

Nesting improves writing efficiency

/*sass*/
.nav{
    
    
	ul{
    
    
		color: #000;
	}
	li{
    
    
		background: #ffaa7f;
	}
}
/*编译输出css*/
.nav ul {
    
    
  color: #000; }

.nav li {
    
    
  background: #ffaa7f; }

/* 属性嵌套*/
{
    
    
  font: {
    
    
  	size: 18px;
    weight: bold;}
}
/*输出*/
{
    
    
  font-size: 18px;
  font-weight: bold;
}

@extend inheritance improves code reuse

.box {
    
    
	height: 100px;
	width: 100px;
	background: #ffaa00;
}

.box1 {
    
    
	@extend .box; /* 继承 .box 的样式*/
	color: #000;
}

.box2 {
    
    
	@extend .box;
	color: #ffff7f;
}
/* 输出*/
.box, .box1, .box2 {
    
    
  height: 100px;
  width: 100px;
  background: #ffaa00; }

.box1 {
    
    
  color: #000; }

.box2 {
    
    
  color: #ffff7f; }

For other detailed usage methods, please refer to the official sass tutorial