sass、scss

sass、scss

sass的安装

sass基于Ruby语言开发，所以在安装sass前需要安装Ruby,安装时需要注意勾选Add Ruby executables to your PATH添加系统环境变量

在有Ruby之后在vsCode中直接使用gem install sass、gem install compass来进行安装。

SASS转换成CSS有两种 可以使用 sass sass文件路径 需要导出到的css路径或者sass sass–watch 文件路径 需要导出到的css路径，在使用SASS导出时路径不要允许出现中文，否则会报错。

SASS和SCSS介绍

SASS

它是一种高于CSS的语言，他能清晰、结构化地描述样式，所以在使用时他比CSS更好，比CSS更加强大。他的扩展名都是.sass，它使用时没有大括号，它是以空格来区分属性和选择器的，属性和属性值中间需要隔一个空格。

$num = 100;
div 
     width: $num//写入语法时一定要注意空格的使用，属性值前一定要有空格，不然就会报错。
     height: $num
     background-color: blue

SCSS

SCSS是SASS 3 引入的新语法，是css3语法的超集，也就是所有有效CSS3样式也是同样适合于SASS,他的扩展名是.scss,他就可以使用花括号，这样就和我们写

$num:50px;
div{
    width:$num;
    height: $num;
    background-color: blue;
}

它的写法很贴近CSS，所以更适合我们去使用，SCSS就是SASS的升级版。

SASS常用一些语法

变量的声明

$color:red;
$width:300;//直接使用$符号来声明变量，后面用冒号连接。

选择器的嵌套

div{
   span{color: $color_1}
   div{color: $color_2}
}//直接在标签中书写，表示div后代中的span,div,如果向表示子代只需要在前面使用>就可以。

父选择器 $

div{
  color: red;
  &:hover{
    color: blue;
  } //$就是指div本身，他的意思就是给div自身加了hover效果。
}

选择器的嵌套

div{
   ~ div{  border-top: 1px dashed #ccc }//div后所有div兄弟元素
   > span { background: #eee }//div中所有子代的span标签
    nav + & { margin-top: 0 }//div中nav后的第一个div兄弟元素
}

属性嵌套

div{
    border{
        style:red;
        width:1px;
        color:#ccc
    }
}//将div的border属性拆分。

导入文件

@import 'a';//导入a.sass文件，不用写后缀

普通类型混合器

@mixin divRadius{
      width:50px;
      height:50px;
      border-radius:25px
}//定义一个混合器 就类似与函数 使用@mixin
div{
    @include divRadius;//使用@include调用 类似于调用函数
}

传参混合器

@mixin divRadius($a){
      width:$a;
      height:$a;
      border-radius:$a/2
}//在定义后的括号中传参
div{
    @include divRadius(50px);//传入参数
}

混合器传参默认值

@mixin divRadius($a:50px){//直接给参数一个默认值
      width:$a;
      height:$a;
      border-radius:$a/2
}//在定义后的括号中传参
div{
    @include divRadius;
}

继承

.div1{
     width:50px;
     height:50px;
     background-color:red
}
.div2{
    @extend .div1;//直接使用extend来继承，这样.div2就拥有了.div1的样式
}

条件语句

@@mixin setBlock($w,$h,$c:red) {
    @if $w>500px {$w:500px}//直接使用@if作为条件语句
    @else if $w<50px {$w:50px}//@else当条件不满足时进入
    width: $w;
    height: $h;
    background-color: $c;
}

循环

@for $i from 1 through 3{
    .item-#{$i} {//相当于字符串模板
         @include setBlock(50px*$i ,50px*$i);
    }
 }//类似于for循环从1到3

@each $name in a , b , c , d {
    #{$name}-img{
        background-image: url('#{$name}.jpg');
    }
}//类似于for each循环

更多写法可以直接去SASS官网上查询 https://www.sass.hk/。