[外门弟子]JS-8|2019年04月11日的日报-技能树.IT修真院

发表于： 2019-04-11 10:01:22

1 670

Day 51 task14-3

今天完成的事情

1.修改task12-1，如果屏幕过窄时，设置左边的文字被截断出现”…”省略号

2.修改task12-2，使得自我介绍部分有更好的展示效果

3.开始task14

4.拆分组件库

设置项目的基础CSS重置和基础样式

设置全局的依赖样式，如变量、颜色、度量等

设置布局样式

拆出相应的组件块

组件快拆出模块

为组件模块等设置样式

将组件放到布局中来，组成整个页面

5.不能使用bootstrap，完成栅格系统

遇到的问题

1.【solved】reset样式，在html文件中添加以下代码，即可引入normalize.css文件

<link rel="stylesheet" href="http://cdn.staticfile.org/normalize/3.0.1/normalize.min.css" type="text/css" />

2.【unsolved】@import 没办法直接引入scss文件

只能在scss里编写css样式，重新编译成普通的css然后通过link引入

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为.scss 或 .sass 的文件并将其导入。

@import "foo.scss";

或

@import "foo";

都会导入文件 foo.scss

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=\#{$family}");

3.【solved】完成了栅格系统，使用了@for和@each。

首先，定义Container

/* 容器样式设置 */  
.container,
.container-fluid {
padding-left: 15px;/* 设置padding是为了后面Column直接嵌套Row预留 */
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}

.container *,
.container-fluid * {
box-sizing: border-box;
}

然后，定义row

.row {
margin-left: -15px;
margin-right: -15px;  /* Container设置了padding，所以Row需要设置-margin让Row占满Container的宽度 */
}
.row:after { /* float会引起父元素的高度塌陷，所以要使用一些clearfix技巧来清除浮动 */
content: "";
display: table;
clear: both;
}       

接下来，定义Column，同时要考虑Gutter的设置

 [class*='col-'] {
float: left;
min-height: 1px;
padding: 15px;  /* Gutter的设置 同时和前面Container设置的一样，所以Column里面可以直接嵌套Row，而不需要Container */
border: 1px solid #F6A1A1;
background-color: #FFDCDC;
}

实现响应式

定义每个单元列为Container的1/12

使用@each遍历$grid-prefix-list列表，并返回3个值，$grid-prefix插入到类名中，$son-width插入到媒体查询中，$con-width插入到.container的为width的值，

同时使用@for循环1-12，得到的$i同时插入到.col#{$grid-prefix}-#{$i}类命中和width的值中，这里做了一个运算，width: (100 / 12) * $i + %; 100/12得到一格的宽度，然后随着for循环，得到$i的值为1-12，两者相乘得到总宽度，使用+字符串运算给值加上%单位。

$grid-prefix-list: (-sm 576px 540px) (-md 768px 720px) (-lg 992px 960px) (-xl 1200px 1140px);

@each $grid-prefix,$son-width,$con-width in $grid-prefix-list {
@media only screen and (min-width: $son-width) {
.container {
width: $con-width;
}

@for $i from 1 through 12 {
.col#{$grid-prefix}-#{$i} {
width: (100 / 12) * $i + %;
}
}
}
}

$grid-prefix-list这个变量对应了多个值，而且是有组织的，相当于数组里面还有数组

sass的列表值大致有三种形式分隔，分别为空格，逗号和小括号。空格比较常见

这里的$grid-prefix-list使用了两种分隔，分别为空格和小括号

@each循环先得到用小括号分隔的

然后在@each里面通过$grid-prefix,$son-width,$con-width三个变量取得小括号里面用空格分开的列表值。

收获

1.占位符和继承

混合器@mixin好处在于它能够传参数进行操作...

2.sass的maps

一般声明变量的时候，会使用各种单词的取名。

通常没有比较系统的写法。

$font-color: #424242;

$base-color: #ff6599;

$light-grey: #efefef;

可以使用maps来将这些变量声明为maps类型。

$map: (

key1: value1,

key2: value2,

key3: value3

);

maps类型内存储着一个个的键值对，(”key = value”)属性名为键、属性值为值。

这样就可以将上面的颜色写成。

$colors: (

light-grey: #efefef,

font: #424242,

base: #ff6599,

);

这里要注意声明maps类型的时候，要使用（）圆括号.因为maps类型也是一个变量，只是其中存储的是键值对。

和声明其他变量的写法类似。

$变量名：（键值对）；

正常使用maps类型内的单个键值对信息则需要

background: map-get($colors, lt-grey);

- -使用map-get语句。需要哪一个，就取出哪一个的值、

//屏幕类型map
$sr-type-maps: (sm:768px, md:992px, lg:1200px);

//container宽度map
$container-maps: (sm:750px, md:970px, lg:1170px);

//重置box-sizing
* {
box-sizing: border-box;
}

//container类
.container {
padding: {
left: $gutter/2;
right: $gutter/2;
}

margin: {
left: auto;
right: auto;
}

//遍历生成.container在不同分辨率下的宽度
//$e:屏幕类型，$v屏幕类型对应的宽度
//  Java泛型中的标记符含义： 
//  E - Element (在集合中使用，因为集合中存放的是元素)
//  V - Value（值）
@each $e, $v in $sr-type-maps {
@media (min-width: $v) {
$width: map_get($container-maps, $e);
width: $width;
}
}
}