发表于: 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中重复写选择器的过程。

比如

header {
background: #5fc0cd;
color: white;
height: 4rem;
line-height: 4rem;
text-align: center
}

header .close {
float: left;
margin-left: 1rem;
}

header .login {
display: inline-block;
font-size: 1.125rem;
}

header .registe {
float: right;
margin-right: 1rem;
}



header {
display: flex;
justify-content: space-between;
height: $height-size;
background: #5fc0cd;
.close {
margin-left: $left-and-right;
color: $color;
}
.login {
font-size: .18rem;
color: $color;
}
.registe {
margin-right: $left-and-right;
color: $color;
}
}

可以写成这样。

一个规则块,既可以像普通的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;

  }

}


这个有点不太理解

.hoverlink {
@extend a:hover;
}
.comment a.user:hover {
font-weight: bold;
}

为什么会编译成这样呢?

.comment a.user:hover, .comment .user.hoverlink {
font-weight: bold;
}

我一开始会以为编译成

.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


返回列表 返回列表
评论

    分享到