8.24 冯娜

学习日志

​ 今天学习了Sass文件如何转换成css文件，如何做注释，变量，嵌套，导入，混合器，继承，运算，函数，指令。

一、注释

1. 多行注释

2. 单行注释

二、变量

1. $变量名 : 值 ;

   • 使用$声明变量，使用 : 赋值。可以将需要多次使用的数据声明为一个变量，反复使用
   • \(b_red:#f00;
     \)b_white:#fff;

2. 变量的命名规则

   • 变量的命名规则基本同选择器命名规则是一致的

3. 作用域

   • 同js，只在最近的大括号中有效

4. 变量名重复

   • 默认情况下，后写的覆盖先写的。但是可以通过在结尾处添加!default，让之前的变量值有效

   • !default规则

     • 如果之前定义一样的变量名，使用之前的变量值
       如果之前没定义一样的变量名，使用现在值

三、嵌套

scss可以让我们以嵌套的方式简化样式的编写且可读性更高

1. 结构嵌套

2. 群组嵌套

   注意：伪类选择器的嵌套，需要在伪类选择器之前，添加占位符&，不然会有空格

3. 属性嵌套

四、导入

1. 局部scss文件

   • 文件名称以_开头，就是局部scss文件。局部scss文件不会被转换成css文件。可以在一个全局scss文件中，导入多个局部scss文件，最后生一个css文件

2. 全局scss文件

   • 不以_开头的scss文件，可以导入其他全局文件和局部文件

3. 导入的语法

   • 局部

   • 全局

五、混合器

把一段样式进行封装，需要使用的地方直接调用混合器名称

1. 定义混合器

2. 调用混合器

3. 带参数的混合器

4. 调用带参数的混合器

六、继承

一个选择器可以继承另外一个选择器所有的样式

1. @extend #d1;

七、运算

任何数字、颜色、字符串等变量都可以进行运算

1. 加，字符串拼接

   带""的字符串去拼接不带""的，结果带""
   不带""的出去拼接带""的，结果不带""

2. 减法

   由于scss变量可以使用-，而系统分辨不出-到底是减法运算还是变量的一部分。所以写减法的时候，减号前后添加空格，做区分。

3. 除法

   1. 在scss中 / 会被认为是分隔符

   2. 在以下情况下，被认为是除法

      a.当除号两边有变量的时候，被认为是除法

      b.除法计算式，被括号包裹，被认为是除法

      c.除法计算式，是其他计算式的一部分，我们认为是除法

4. 乘法

5. 插值操作

6. 颜色的运算

   1. 颜色需要分段运算，红+红 绿+绿 蓝+蓝

   2. 分段运算之后，结果超过255，就取值255

   3. rgba的运算，要求alpha值相同才可以计算

八、函数

1. 数学函数

   1. round($val);

      将数值四舍五入，转换成一个最接近的整数

   2. ceil($val);

      向上取整

   3. floor($val);

      向下取整

   4. min(\(v1,\)v2,$v3.....);

      找出几个数值之间的最小值

   5. max(\(v1,\)v2,$v3....);

      找出几个数值之间的最大值

   6. random();

      随机数

2. 字符串函数

3. 自定义函数

   Scss支持自定义函数使用关键词@function定义，需要调用 @return 输出结果。变量之前添加$

九、指令：if-else

1. \(s:100;
   p::after{
   @if(\)s>=95){
   content:"牛逼";
   }@else if(\(s>=90){
   content:"学霸";
   }@else if(\)s>=60){
   content:"差不多";
   }@else{
   content:"5天不给吃饭";
   }
   }

   2.@if(){
   }@else if(){
   }@else{}

今天感觉还是很吃力，这次考试考的烂到爆炸，自己落下啦很多，，，要加把劲。