发表于: 2018-05-29 23:09:16

1 518


今天完成的事:


1、没做什么别的,主要是在看sass;


明天的计划:

1、开始做任务11;


遇到的困难:

1、对于sass的初步理解,开始有点像引入了函数的思想了,继承、混合宏(官网叫混合器)、占位符都还可以理解,但是到了插值什么的就不太理解了。先是看了一下CSDN关于sass的博客,额,有回去看了一下中文官网的文档。

收获:

额,大致浏览了一门新的语言,要理解的挺多额。

(下面摘自我的有道云笔记)

学习sass(为何不去学less呢?):这个我去看下知乎什么的,觉得学一下顺带ruby也挺好。然后选了sass;

sass和scss其实是一个东西,统称为sass;

两者只是书写格式的不同,前者没有大括号好分号,

后者有,所以好看很多,对于CSS的传统写法学习者容易接受。

可是他么的sass到底是什么鬼东西???接下来我们看看:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
现在用 Sass 的语法格式来编写:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
 font: 100% $font-stack
 color: $primary-color
我们使用 SCSS 语法格式将按下面这样来书写:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
 font: 100% $font-stack;
 color: $primary-color;

}

scss比较美观,至少比较能接受。

用 Sass 新的语法规则,而文件扩展名依旧使用的是“.sass”,这也就造成血案了,编译时说编译不出来。“.sass”只能使用 Sass 老语法规则(缩进规则),“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。

sass语法:

定义变量的语法:

Sass 的变量包括三个部分:
1、声明变量的符号“$”
2、变量名称
3、赋予变量的值

所以一开始我认为,这有点类似于java里面的变量声明...

实际上,在sass的大多数地方,中划线命名的内容和下划线命名的内容是互通的,比如bg-color和bg_color是一样,除了变量,也包括对混合器和Sass函数的命名


css里的&符号是代表什么意思呢?

第一次看到有点蒙,后面理解了就是代词的意思,中文中的代词,多用来代替父类在伪类中的用法

 .el-row {

                margin-bottom: 20px;

                &:last-child {

                        margin-bottom: 0;

                }

        }

实际上相当于:(&和中文的代词差不多)

sass语法,等同于

.el-row {

  margin-bottom: 20px;

}

.el-row:last-child {

  margin-bottom: 0;

}

然后,我花了大部分时间在理解继承、混合器(混合宏)还有占位符的相关知识。

下面是我自己的理解:

1、混合宏有点像于多变量参数的的函数,
声明方式:@mixin  name($+参数:变量);
调用方式:name(参数变量值)
2、继承相当于定值参数函数,
声明方式(和class类似):.name{ } ;
调用方式:@exdent  .name
3、占位符也有点相当于定值参数函数,
声明方式:%name{  },调用方式:@exdent %name;
继承和占位符的用法很像,都是用@exdent,都是多来传递定量的属性为主,但是!!!

编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”

今天大概就看了这些,明天开始写scss。

进度:CSS-任务11


开始时间:2018.05.29晚

  

结束时间:2018.05.30

有无延期风险: 无。

禅道:http://task.jnshu.com/zentao/my-task.html






返回列表 返回列表
评论

    分享到