发表于： 2019-08-15 19:15:41
1 833
今天完成的事情:
昨天提交了任务十二但是由于某些原因造成了有了一些小瑕疵，所以被打回来了，完成修改后提交通过了。
今天在师兄的教导下，初步掌握了SCSS的一些具体用法。详细的了解了SCSS里面的一些属性：《变量》，《嵌套》，《引入》，《混合》，《继承》，《操作符》。
其中对于《混合》@mixin 和变量 有了进一步了解和实验：
其中我将@mixin都设置成了中文，变量也是。
将变量设置为《display：flex》属性中的《center》然后使用@mixin来进行混合使用。由于理解的不是很深刻，最后在提交任务的时候还是注释掉了。
明天计划的事情：
完成任务十三并且提交。
遇到的问题 ：
在任务十三中，涉及到了CSS框架，具体情况还在摸索中。
在SCSS的学习中了解到了 《变量》，《嵌套》，《引入》，《混合》，《继承》，《操作符》，其中操作符这个东西暂时用不到，所以了解的也不多。
变量
变量用来存储需要在CSS中复用的信息，例如颜色和字体。SASS通过$符号去声明一个变量。
上面例子中变量$font-stack和$primary-color的值将会替换所有引用他们的位置。
嵌套
SASS允许开发人员以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护：
CSS许多属性都位于相同的命名空间（例如font-family、font-size、font-weight都位于 font命名空间下），Scss当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该 命名空间之下。
但是我暂时没有感觉到他有什么不一样的作用。
引入
SASS能够将代码分割为多个片段，并以underscore风格的下划线作为其命名前缀（_partial.scss），SASS会通过这些下划线来辨别哪些文件是SASS片段，并且不让片段内容直接生成为CSS文件，从而只是在使用@import指令的位置被导入。CSS原生的@import会通过额外的HTTP请求获取引入的样式片段，而SASS的@import则会直接将这些引入的片段合并至当前CSS文件，并且不会产生新的HTTP请求。下面例子中的代码，将会在base.scss文件当中引入_reset.scss片断。
SASS中引入片断时，可以缺省使用文件扩展名，因此上面代码中直接通过@import 'reset'引入，编译后生成的代码如下：
混合
混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。
@mixin border-radius($radius) {
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
上面的代码建立了一个名为border-radius的Mixin，并传递了一个变量$radius作为参数，然后在后续代码中通过@include border-radius(10px)使用该Mixin，最终编译的结果如下：
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
这个东西是真的好用，节省很多代码量。
其中我在资料中了解为便于书写，@mixin 可以用=表示，而 @include 可以用 + 表示，而这个写法我暂时还没有尝试过。
今天的收获：
完成了任务十二，对SCSS有了进一步理解，并且能初步运用，
返回列表
评论