sass语法

know

• 安装
  npm install -g sass

sass文件不可以直接链接在html里面

• 编译

将scss文件编译成css文件

sass input.scss output.css

然后将转化好的css 链接在html里面

• 监听

sass --watch input.scss:output.css

监听scss文件的变化，如果变化了自动转化为css文件

• 四种转化格式

    nested 嵌套   ？？
    compact 紧凑  ？？
    expanded 扩展
    compressed 压缩
    
    使用形式：
    sass --watch  one.scss:two.css --style compressed
  

监视一个文件夹：
sass --watch scss文件路径:css文件夹路径

语法

• $ 声明一个变量

$bg-color:red;

嵌套

• 元素的嵌套

ul{
    li{
        color:red;
    }
}

& 引用父选择器

body{
    :hover{
       color:green
   }
}


//编译成css 语法
body :hover{
    color:green
}

此时我们需要用 &
body{
    &:hover{
       color:green
   }
}
//编译的结果
body:hover{
    color:green
}


当然我们也可以这样使用
& &-text{
    font-size:15px;
}

.nav .nav-text{
    font-size:15px;
}

• 属性的嵌套

body{
    font:{
        family:Arial;
        size:15px;
        weight:normal;
    }
}

• @mixin

@mixin alert {
    color: aliceblue;
    background-color: aqua
}

body{
    @include alert;
}

传参的问题

*注：传递的参数要带上$

@mixin alert($tex-color,$bg-color) {
    color: $tex-color;
    background-color: darken($bg-color,10%);
}

body{
    @include alert(red,green);  //调用
}

//转化为css
body {
  color: red;
  background-color: #004d00;
}

• darken 加深指定的颜色

color:darken(red,10%)   //将红色加深10%

• @extend

.alert{
    padding: 1px;
    color: pink;
}
.alert a{
    font-weight: hold;
}

.alert-info{
    @extend .alert;   //继承
    color: green;
}


//css代码
.alert, .alert-info {
  padding: 1px;
  color: pink;
}

.alert a, .alert-info a {  //会继承它所有的样式
  font-weight: hold;
}

.alert-info {
  color: green;
}

• @import

在一个sass文件内部导入另一个sass文件

可以在将各个小部分的Partials 文件名必须以下划线开头 编译的时候 不会编译该文件名的文件

通过import引入到一个总的sass文件里面，通过编译总的sass文件，将其引入页面

//one.scss
@import "another";

div{
    padding: 1px;
    color: pink;
}

//_another.scss  !!!!!!!!文件名加上 _
a{
    color: yellow;
}


//编译结果  two.css
a {
  color: yellow;
}

div {
  padding: 1px;
  color: pink;
}

• 注释

•   1.多行注释
    
    2.单行注释
  
    3.强制注释
    
    /* 多行注释
     * 会包含在没有压缩之后的 CSS 文件里面*/
    //我是一个单行注释
    /*！我是一个强制注释 会包含在没有压缩之后的 CSS 文件里面*/
    
    编译结果：(在没有压缩的css环境下编译)
    /* 多行注释
     * 会包含在没有压缩之后的 CSS 文件里面*/
    /*！我是一个强制注释 */
  

• 数据

sass -i  //到sass交互模式下

>>type-of(5px)   或者 type-of(5)
number

>>type-of(hello)  或者 type-of("hellow")
string

>>type-of(1px solid black)  以空格分割开
list

>>type-of(#fff)  或者type-of(red)  或者type-of(rgb(255,0,0))
color

• number

*注：除法运算写在()里面 eg：（8/2）

• 数字函数

>> abs(10)
10
>> abs(10px)
10px
>> abs(-10px)
10px
>> round(3.5)  //四舍五入函数
4
>> ceil(3.2)   //进位函数 向上取整
4
>> floor(3.9)  //退位函数 向下取整
3
>> percentage(650px/1000px)
65%
>>min(1,2,3)
>>max(2,3,4)

• 字符串
• 字符串函数

>> $hello:"red"
"red"
>> $hello
"red"
>> to-upper-case($hello)  //将字符串变为大写的
"RED"
>> to-lower-case($hello)  //转化为小写的
"red"
>> str-length($hello)     //字符串的长度
3
>> str-index($hello,"ed")  //匹配到所在字符串开始的位置  没有找到就是null
2

>> $hello:"hello world"
"hello world"
>> str-insert($hello,"hah",6)   //插入字符传到指定的位置
"hellohah world"

• 颜色的函数

hsl (色相,饱和度,明度)
hsla (色相,饱和度,明度,透明度)
lighten($base-color,30%)  //降低明度（要设置的颜色  要增加的明度）  此处的明度用负号会报错
darken()
saturate()  //增加纯度(饱和度)
desaturate() //降低纯度

transparentize() 让颜色变的更加透明
opacify() 增加颜色的不透明度  相当于透明度相加

• 列表

可以用空    padding:5px,10px,20px,10px
逗号        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial
或者括号分割    padding: 5px 10px (5px 20px)

• 列表函数

>> length(5px 10px 2px) //查看列表的数据长度
3
>> nth(5px 10px,1)  //（列表项,选择某项） 可以查看列表某项的值
5px
>> 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

>> $colors:(light:#fff,dark:#000) //定义一个map
(light: #fff, dark: #000)
>> length($colors)
2
>> map-get($colors,dark)
#000
>> map-keys($colors)
light, dark
>> map-values($colors)
#fff, #000
>> map-has-key($colors,light)
true
>> map-merge($colors,(light-gray:#e5e5e5)) //将两个map的结果和为一项
(light: #fff, dark: #000, light-gray: #e5e5e5)

>> $colors:map-merge($colors,(light-gray:#e5e5e5))   //将两个map 和为一项并赋值给$colors
(light: #fff, dark: #000, light-gray: #e5e5e5)
>> $colors
(light: #fff, dark: #000, light-gray: #e5e5e5)

>> map-remove($colors,light,dark)  //移出列表的项
(light-gray: #e5e5e5)

• 布尔值

and or not(否定)

• #{变量}

interpolation将一个值插入到另一个值里面

$version:"0.0.1";
/* 版本号为 #{$version} */

$name:"info";
$attr:"border";

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


//编译为css
/* 版本号为 0.0.1 */
.alert-name {
  border-color: #ccc;
}

• 控制指令 循环

---------------------------------@if----------------------------------------
$use:true;  

//@if 条件{     //*注：此处判断的时候必须加{}
//}@else if 条件{
//    }@else{
//    }

body{
    @if $use{    //也可以带括号 @if($sure)  或者@if($sure==false)
        font-size: 20px;
    }
}
---------------------------------@for---------------------------------------
//@for指令
$num:4; 
@for &index from 1 through $num{  //包含结束循环 此处相当于执行了4次

}

@for &index from 1 to $num{  //不会包含结束循环  相当于执行了3次

}
$num:4;
@for $i from 1 through $num{
    .col-#{$i}{
        padding:10px 0;
    }
}
---------------------------------@each---------------------------------------
//@each 循环列表里面的项目
$lists:1 2 3 4;
@each $list in $lists{
   .icon_#{$list}{
       background-image: url(../images/lists/#{$list}.png);
   }
}

.icon_1 {
  background-image: url(../images/lists/1.png);
}

.icon_2 {
  background-image: url(../images/lists/2.png);
}

.icon_3 {
  background-image: url(../images/lists/3.png);
}

.icon_4 {
  background-image: url(../images/lists/4.png);
}
---------------------------------@while---------------------------------------
@while 条件{  ////循环

}

• 用户自定义函数

@function 名称 （参数1，参数2）{
    @return 
}

//这是一个栗子
$color:(light:#fff,dark:#000);
@function color($value){
    @return map-get($color,$value);
}

body{
    background-color: color(light)
}
//编译的结果为：
body {
  background-color: #fff;
}

• 警告与错误

@warn "显示警告的信息，在命令行中"   
@error "显示错误提示的信息，在编译代码中"