Sass简介

Posted 2023-05-04

参考技术A 1.Sass是一门脚本语言

2.Sass的语法规则有前后代两种方式“缩进语法”、“花括号语法”这两种语法针对的文件分别为sass,scss

3.兼容CSS3语言，在 CSS 基础上增加嵌套 (nesting)、变量、混合 (mixins) 、内置函数(inner  function)、、Sass拓展（自定义函数、存储缓存、自定义导入）

4.提供控制指令 (control directives)等高级功能

5.自定义输出格式（Sass脚本编译后CSS多种输出样式）

极品Sass简介

什么是Sass

1.世界上最成熟、最稳定、最强大的专业级CSS扩展语言
2.Sacc是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.
3.能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表
4.css预处理器

Sass的原理

Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能.
但是浏览器不认识Sass语法,开发者写完Sass的语法文件后需要通过工具转为Css语法

在Sass中使用变量

使用$定义变量

在{}号外面定义的变量是全局变量$color:red;
$color:red;  //全局变量
a{
	$color:blue;   //花括号内定义的是局部变量
	color:$color;   //bulie
}
.bb{
	color:$color;   //red;
	
		$color:yellow !global;   //变成全局变量
		默认变量  $color:red !default;
}

Sass中的继承@extend

.btn{
	width:100px;
}

.dd{
	@extend .btn;
	height:50px;
}

Sass中的引入@import

如 _aa.scss

@charset="utf-8";
*{
	padding:0px;
	margin:0px;
}

b.scss引入_aa.scss文件

@import "_aa"

Sass中的函数

$colors:(red:red,light:white,dark:black);
@function color($key){
	@if not map-has-key($colors,$key){
		@warn "警告，gulp不会终端"
		@error "会终止监听"
	}
	@return map-get($colors,$key);
}
//函数调用
body{
	background-color:color(red);
}

Sass中的控制指令

$a = red;
.box{
	@if $a == red{

	}@else if $a ==blue{
		
	}@else{

	}
}

Sass中的循环

@for
$count: 12;
//包含结束位置
@for $i from 1 through $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
}

//不包含结束位置
@for $i from 1 to $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
}

Sass中的@each

$icons: success warning error primary info;
@each $icon in $icons{
    #box li:nth-child(#{$icon}){
        background: url(images/#{$icon}.png) no-repeat;
    }
}

Sass中的@while

$i : 6;
@while $i > 0 {
    li:nth-child(#{$i}){
        font-size: #{$i*16}px;
    }
     $i : $i - 1;
}

这里就是我的简介