sacc常用语法

混入

// 混入
@mixin name {
	// 加深颜色 函数
	color: darken($color,10%);
}

// 使用
div{
	@include name
}

继承

.class{
	background-color: #ffffff;
}

.classIfo{
	@extend .class
}

占位符

继承子级 利用占位符

%dispal{
	display: flex;
}


.a{
	font-size: 12px;
	.b{
		@extend %dispal
	}
}


.c{
	@extend %dispal
}

引入

引入其他文件的sacc文件不需要写扩展名，根据路径写入就可以引入成功

@import 'base';

注释

单行注释不会输出到编译文件中

多行注释可以输出到编译后的文件中

强制注释可以在压缩模式中编译到文件中

// 普通注释


/*
		多行注释
*/


/*!
		强制注释
*/

数字函数

// 绝对值
abs()
// 四舍五入取整
round()
// 向上取证
ceil()
// 想下取整
floor()
// 百分数
percentage()
// 获取最小值
min()
// 获取最大值
max()

字符串函数

// 英文大写
to-upper-case()
// 英文小写
to-lower-case()
// 字符串长度
str-length()
// 开始位置
str-index($str,'Hello')
// 插入字符         位置
str-insert($str,'.net',14)

颜色

body{
	background-color: rgba(255,255,0);
  // a 表示阿尔法通道
	background-color: rgba(255,255,0,0.5);
	// 色相 饱和度  明度
	background-color: hsl(0, 10%, 20%);
  // 色相 饱和度  明度  透明度
	background-color: hsla(0, 10%, 20%,0.5);
  // 调整色相   角度
	background-color: adjust-hue($baseColer,10deg);
  
  // 改变明度 
  // 增加
  lighten($color,30%)
  // 减小
  darken($color,20%)
  
  
  // 改变饱和度
  // 增加
  saturate($color,50%)
  // 减小
  desaturate()
  
  // 修改阿尔法的值  透明度
  // 增加 
  opacify($color,0.3)
  // 减少
  transparentize($color,0.3)
  
}

列表

// 长度
length(5px 2px)
>> 2

// 获取项目
nth(5px 10px,2)
>>10px

// 获取索引
index(1px solid red,solid)
>>2

// 添加新项目
append(5px 10px, 5px)
>> 5px 10px 5px


// 合并列表
join(5px 10px, 5px 0)
>> 5px 10px 5px 0
// 合并分割方式
join(5px 10px, 5px 0,comma)
>> 5px,10px,5px,0

map

// 创建一个map 
$color:(light:#ffffff,dark:#000000)

// 获取长度 
length($color)
>>2

// 获取值
map-get($color,light);

// 获取所有的key
map-keys($color)
>>light,dark

// 获取所有的value
map-values($color)
>> #ffffff,#000000

// 是否含有这个key
map-has-key($color,light)
>> true

// 合并map
map-merge($color,(light-gray:#e5e5e5))
>> light:#ffffff,dark:#000000,light-gray:#e5e5e5

// 删除 key
map-remove($color,light,dark)
>>light-gray:#e5e5e5

Boolean

5px < 10px
>> true

//相当于&& 都为true 是返回是 true
(5px > 3px) and (5px > 10px)
>> false
(5px > 10px) and (5px < l0px)
>> true

// 相当于 || 一位为true 返回为true
(5px > 3px) or (5px  > 10px)
>> true
(5px >3px) or (5px < 10px)
>> true

// 相当于! true 
not(5px < 2px)
>> true
not(5px > 2px)
>> false

Interpolation

把一个值插入到另一个值里面

$version:'0.0.1';
/* 当前项目版本：#{$version} */

$name:'info';
$attr:'border';

.alert-#{$name}{
	#{$attr}-color:#ccc
}

@if

条件可以不加括号

$use-info:true;
$theme:'dark';

.as{
	@if $use-info{
		background-color: green;
	}
}

.a{
	@if($theme == dark){
		background-color: saddlebrown;
	}@else if ($theme == light){
		background-color: salmon;
	}@else {
		background-color: pink;
	}
}

@for

$columns:4;

//从一到四
@for $i from 1 through $columns{
	.col-#{$i}{
		width: 100% / $columns * $i;
	}
}


//从一到三
@for $i from 1 to $columns {
	.col-#{$i} {
		width: 100% / $columns * $i;
	}
}

@each

循环列表

$icons:success error warning;

@each $icon in $icons{
	.icon-#{$icon}{
		background-image: url(#{$icon}.png);
	}
}

@while

$i:6;

@while $i>0 {
	.item-#{$i} {
		width: 100% / $i;
	}

	$i:$i - 2;
}

function

$colors:(light:#fff,bark:#000);

@function color($key){
	// 返回数据
	@return map-get($colors,$key)
}

.asa{
	// 调用
	color: color(bark);
}

警告和报错

只存在于函数中

$colors:(light:#fff,bark:#000);

@function color($key){
	// 警告 在运行的命令行中的提示
	@if not (map-has-key($colors, $key)){
		@warn "在 $colors 里没有找到 #{$key} 这个值"
	}

	// 报错 在生成文件中提示
	@if not (map-has-key($colors, $key)) {
		@error "在 $colors 里没有找到 #{$key} 这个值"
	}

	// 返回数据
	@return map-get($colors,$key)
}

.asa{
	// 调用
	color: color(bark);
}