sass学习笔记

主要看sass自己的中文文档,配合着b站的视频（老师的声音太苏了）(https://www.bilibili.com/video/av24719712/?p=1)
个人笔记，稍显凌乱，如有错误，欢迎评论

要注意空格和符号！！！

scss自动编译：sass --watch sass:css

定义变量
$parameter

定义函数

@mixin name($text-color,$background){
	color: $text-color;
	background-color:$background;
	a{
		color:darken($text-color,10%);//通过改变颜色的亮度值，让颜色变暗，创建一个新颜色
	}
}

调用函数

@include functionName

继承

.alert{xxx}
.alert-info{@extend alert;}//继承alert样式

@import 将scss模块化

Partials文件要以 _ 开头 ，不会被编译，用总文件引入该文件 @import "base"即可（原有的会被覆盖）

Data Type

sass -i 测试sass的函数

进行加减乘除的混合运算

数字函数

• 字，1, 2, 13, 10px

• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

• 布尔型，true, false

• 空值，null

• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

  map-has key($colors,light)//读取key

除法计算：（a/b）

插值语句

//#{}插值语句可以在选择器或属性名中使用变量

& 在sassscript中也是指代父元素的意思

！defalut

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。变量是 null 空值时将视为未被 !default 赋值。

$content: "second" !defalut

@media(css)

针对不同媒体类型定义不用的样式

@media screen and (max-width: 300px) {//宽度小于300px更改背景颜色
    body {
        background-color:lightblue;
    }
}

scss允许嵌套在css规则内

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

Interpoliation 插入变量名

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

control directive

@if boolean{

}

@else if boolean{}

@for $var from <开始> to <结束>{}//不包含结束值
@for $var from <> through <>  //包含结束值
@each $var in $list //循环列表中值
 @while 条件{}

函数

@function(){}

@function color($sky){
    @return map-get($color,$key);
}
body{
    background-color:color(light);
}

警告

@function color($key){
    @if not map-has-key($color,$key){
        @warn "xxxx"//在命令行会出现警告信息
    }
}
body{
    background-color:color(gray);
}