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{}

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1