SCSS入门

1.SCSS的注释：

 例如在SCSS文件中输入以下信息：

#color{
  background-color: #fff;
}
//SASS      //这个不会编译到CSS文件当中
/*SASS1*/    //这个会编译到CSS文件当中
//   /*!SASS2*/   在这个时候在这里使用的感叹号的主要作用是将一些信息在压缩模式下也可以输出到CSS文件中，通常用来添加版权信

 那么这个时候在CSS文件当中，就会 出现以下信息：

/*SASS1*/
/*!SASS2*/

2.变量的定义与使用：

变量以美元号$开头

$width:1000px;
$height:500px;

然后在引用的时候，直接对其进行引用：

body{
       width:$width;
       height:$height;
}

但是在这里一定要注意不能跨作用域进行使用：

例如定义一个body和#app元素，app的不能调用body当中的元素

body{
       $color:black;

}

#app{
       color:$color;//注意在这里是会报错的，不能跨作用域进行调用，如果实在是像调用，那么就可以  
      // 在#color后面加上一个 !global   表示将该变量转化为全局变量
}

3.数据类型的基本介绍：

//判断数据类型
type-of("$变量");

4.数据类型之字符串：

A.双引号

B.单引号

C.无引号

以上三种类型都可以

$string1:"good";
$string2:'bad';
$string3:worst;

注意，我们在已经定义好字符串的时候，在从SCSS编译成CSS的时候，一般不会变换其引号的形式，但是当放在#{ }中的时候，有引号将被变换成无引号。

5.数据类型之数字型：

在SCSS当中数字类型可以为带单位数字，也可以为不带单位数字，如 10， 10em。

就是说如果前面是数字，但是以字母结尾，那么这个时候也可以称之为数字类型。

注意数字加上单位也可以进行运算。

$number1:100px;
$number2:100;

6.数据类型之空值null:

因为它表示空，所以其不能进行运算

因为null表示空值，基本没有什么大的作用，所以null在SCSS语法当中基本无什么用途。

$width:null;
body{
       width:$width;
}

 7.数据类型之布尔值：

   true和false

注意只有自身是false或者null才会返回false，其他的均返回true.

$bolean1:true;
$bolean2:false;

 8.数据类型之数组，map，颜色

数组：

const arr1=[12,12,32];
const arr2=[[12,23],[52,69,55],[89,96,799]];

map(与javascript当中的对象相似)

const map={
      key1:"lao",
      key2:"zhi",
      key3:"chi"  //记住在map当中要用逗号分开
}

颜色：

$color:blue;

9.数字运算符

//纯数字型
$add1=1+1;  //2
$add2=1+1px   //2px
$add3=2px + 3px //5px



//字符型
//在字符型当中，如果第一个字符有引号，那么结果的字符就有引号
$add4="a"+"b"   //"ab"
$add5=a+"b"    //ab
$add6=a+b      //ab


//数字和字符型
$add7=1+a   //1a
$add8="a"+1  //"a1"
$add9="1"+a  //"1a"
$add10="1"+1   //11



//乘法型运算
$num1=1*9  //9
$num2=1px*2  //2px
$num3=2px *2px //编译不通过
$num4=1*2abc  //2abc

注意在这里使用取余%符号的时候，必须要保证两个字符间用空格隔开，否则会被误认为是字符串而无法运行

$num1=10px%10px   //这个时候在这里会被误认为是字符串而无法运行
//必须要加上空格才可以运行
$num2=10px % 10px  //这个时候结果就为0

 10.关系运算符：

//在这里的关系是true或者false
$a: 2>1  //true
$b: 1>2  //false

11.相等运算符

$a: 1==1px    //true
$b: "a"==a    //true
//等号前面的数字如果不带引号，那么比较的是数字
//如果等号前面的数字带引号，那么在比较的时候，忽略引号，逐一比较字符，完全相同才可以返回true

12.布尔运算符 ：

$a: 2>1 and 2>3  //false
//在使用and的时候，要用空格分开，要不然会被误认为是字符串
$a: 2>1 or 2>3  //true
$a: not 2>1  //false

13.颜色值运算

SCSS当中的颜色是按分段计算的

p{
   color:#112312+#565656;
  //这个时候在这里表示11+56   23+56 12+56

}


//同样乘法也是一样的
p{
   color:#112312*2;
  //这个时候在这里表示11*2   23*2    12*2

}


//在使用rgba( )的时候，要注意要一样alpha才可以进行运算

p{
   color:rgba(200,2,36,0.75) + rgba( 255,69,23,0.75);     //rgba(455,71,59,0.75);
    //必须要保证alpha都是0.75才可以进行运算
}

 14.运算优先级

 15.SCSS的嵌套语法

    
        
        
            

        
    

//这个时候我们在这里就可以直接用嵌套模式对style样式进行改动

#app{
      span{
              color:blue;
          }
        .lao{
                p{
                     color:red;
                 }
            }
}

16.模板字符串：

#n:font;
//先定义一个变量
//然后将变量当作属性选择器进行使用
#app .#{$n}{
         color:red;
}

17.父选择器：

以前我们会有这样的代码：

button{
        background-color:red;
}
button:hover{
        background-color:blue;
}

在SCSS当中可以用父选择器进行调整

button{
        background-color:red;
        &:hover{
                   background-color:blue;     //在这里的&表示指向的父元素
        
               }
}

18.！defalut作用

19.！global将变量定义为全局变量  

#app1{
       $num:111;
}
#app2{
       color:$num;  //这时候如果直接调用是错误的，一定要在$num:111后面加上一个!global将其转化为
       //全局变量才可以
}

20.！optional作用：

21.@import作用：

 

 22.继承@extend知识点

举例：如果我们这样子写的话

.p{
  color: aqua;
}
.two{
  @extend .p;
}

在CSS选择器当中会这样子显示：

.p, .two {
  color: aqua; }

23.三元运算符

 举例：

p{
    color:if (2==1;red,blue);  //这个表示利用三元运算符将最后的颜色得出来
}

 24.if-else条件语句

$color:1;   //定义变量
p{
     @if ( $color==1){

                         color:blue;    //在这里使用if-else条件语句，如果成立就执行
                                              //如果不成立，并且后面没有相关语句，就返回null
                     }   @else if{
                                   color:pink;
                                 } 
                             @else{
                                color:red;
                             }
}

25.for循环语句：

 26.while循环语句：