发表于： 2018-07-03 22:04:50
1 744
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
任务11任务总结。
我的脑图。
官方脑图。
任务11主要是对sass的初步学习。
首先是初步学习和了解了sass的变量。通过$符号声明变量，毕竟类似于css的属性声明。
$highlight-color: #F90;
这时#90则是变量highlight-color的值。
任何css属性值的赋值都可以用作sass的变量值。
不过与css属性值的声明不同，变量可以声明在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。
- -也就是说变量声明在{}内则为局部变量，只能在{}之内的规则块内使用。声明在外部则为全局变量，在此sass文件的任何位置都能引用这个变量。
sass的变量名可以与css中的属性名和选择器名称相同。而且可以使用—或者_。
但是、hightlight-color和hightlight_color指向的是同一个变量。
然后学习了解了sass的嵌套规则。
通过使用sass的嵌套可以避免在css中重复写选择器的过程。
比如
可以写成这样。
一个规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他的规则块。
在编译sass文件的时候，会将嵌套规则逐步打开。将父级的类名放在子级选择器的前面
可以使用sass的@import规则，sass的@import规则在生成css文件时就把相关文件导入进来。将所有的样式归纳到了同一个css文件中。
使用sass的@import并不需要被导入文件的全名。可以省略.sass或.scss文件后缀。
如果不想使用导入文件的某些值。可以在变量的后面加上！default。
他的含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
接下来了解了sass的混合器。混合器使用@mixin标识符进行标识定义，然后通过@include标识符使用。
混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性
@include调用会把混合器中的所有样式提取出来放在@include被调用的地方
通过混合器，可以在样式表的不同地方共享样式。
然后是学习了sass的继承相关。
sass的选择器继承可以继承另一个选择器的所有样式。
通过@extend 选择器名。
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译后
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}
- -这个编译是错误的。。。
正确的应该是
.error,.seriousError {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
这也是为什么单独的样式会覆盖继承而来的样式。如果继承多个选择器的话且多个选择器内有相同的属性。
编译的顺序是按照继承的书写顺序依次排列。根据css的规则，后来居先，后定义的样式会覆盖前面相同的样式。
.seriousError将会继承样式表中任何位置处为.error定义的所有样式。.seriousError内的border-width则是单独给.seriousError的特殊样式，会覆盖继承来的有关属性。
以class="seriousError" 修饰的元素最终的展示效果就好像是class="seriousError error"
继承不仅会继承所继承的选择器的样式。还会继承与其有关的组合选择器的样式。
比如
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
border-width: 3px;
}
seriousError继承了error的样式，而error本身的子元素和父元素的样式也会一并继承过来。- -继承子元素的样式是因为这个子元素的样式本身就在error内。
那继承父元素的样式是因为父元素的样式被error继承了，然后又通过@extand被seriousError继承了？
在指令中使用 @extend继承 时（比如在 @media 中）有一些限制：
Sass 不可以将 @media 层外的 CSS 规则延伸给指令层内的 CSS
也就是说@media{}内的元素可以互相继承。
但是@media{}规则块内的元素，想要通过@extand继承外部的元素的规则，是不可以的。
下面这样是错误的。
.error {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
// INVALID EXTEND: .error is used outside of the "@media print" directive
@extend .error;
border-width: 3px;
}
}
这个有点不太理解
为什么会编译成这样呢？
我一开始会以为编译成
.comment a.user：hover，.comment .hoverlinke .user {
font-weight：bold
}
继承的是a：hover效果- -.
.user是a的子类。
那么为什么继承 .hoverlink会变成.user的子类呢？？
- -啊。。这个选择器不是子类是与选择器。。在class内类名要同时包括两个类名才会触发样式。那这样就理解了。
a.user则是 标签是a标签，且类名是.user才会有hover效果。
也就是继承后。则是需要类名有.user还要邮.hoverlink才会有样式效果。
明天计划的事情：（一定要写非常细致的内容） 、
开始任务12
遇到的问题：（遇到什么困难，怎么解决的）
sass的学习过程
收获：（通过今天的学习，学到了什么知识）
熟悉sass
返回列表
评论