一、 任务情况：
1. 应用sass及应用文件组件化：
/*!
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| |– _colors.scss # colors type
|
|– components/
| |– _buttons.scss # Buttons
| |– _form-input.scss # Form-input
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _forms.scss # Forms
|
`– main.scss # Main Sass file
*/
@import
"abstracts/mixins",
"abstracts/variables";
@import
"base/reset",
"base/typography",
"base/colors";
@import
"layout/grid",
"layout/header",
"layout/forms",
"layout/footer";
@import
"components/buttons",
"components/form-input";
2. 媒体查询：
① 通过变量来确定断点，也方便调整断点；
② 通过混合宏，可以方便@include respond-to(断点名称）{ 样式定义 }来实现，在不同的分辨率范围内应用不同的样式或宽度；
变量（variables)：
$breakpoints: (
"xs": (max-width: 576px),
/* Extra small devices (portrait phones, less than 576px) */
"sm": (min-width: 576px),
/* Small devices (landscape phones, 576px and up) */
"md": (min-width: 768px),
/* Medium devices (tablets, 768px and up) */
"lg": (min-width: 992px),
/* Large devices (desktops, 992px and up) */
"xl": (min-width: 1200px),
/* Extra large devices (large desktops, 1200px and up) */
);
// 声明在不同设备下的通用断点地图
$bp-keys-list: map-keys($breakpoints);
// 声明断点名称的列表
混合宏（mixins):
@mixin respond-to($breakpoint) {
$raw-query: map-get($breakpoints, $breakpoint);
@if $raw-query {
$query: if(
type-of($raw-query) == "string",
unquote($raw-query),
inspect($raw-query)
);
@media #{$query} {
@content;
}
} @else {
@error 'No value found for `#{$breakpoint}`. '
+ 'Please make sure it is defined in `$breakpoints` map.';
}
}
// 声明用于检测是否存在媒体查询范围的混合宏
3. 栅格系统（参考bootstrap的栅格系统，去除边距值）：
① 通过混合宏将通用的样式提取出来并方便给条件函数应用；
② 通过@for顺序循环函数，来遍历所有列数即1~12，通过@each来遍历断点地图的key值，再根据上述的媒体查询的混合宏来对应相应的分辨率范围即value值，从而实现在相应的分辨率内，得出各个列数的col宽度值；
③ 由此只需更改$col-numb：12！default ，把12改为想要的列数，就可以得到想要的栅格系统；
④ 都是一下一下地试出来，尤其先@each遍历断点地图后，再用@include来应用媒体查询作为父元素，其子元素再用@for来遍历所有列数，这样才能，媒体查询内一次性包含所有列数的样式，而不会分散；
混合宏：
@mixin col-bp {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
// 声明各个断点的col无数字后缀的平分空间效果
@mixin col-auto {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
// 声明各个断点的col-auto的自动填充效果
@mixin row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
// 声明行的通用样式
变量及函数：
@import
"grid-mixins";
// 引用同目录下的混合宏文件
@import
"../abstracts/mixins",
"../abstracts/variables";
// 引用abstracts目录下的变量和混合宏文件
$col-numb: 12!default;
// 声明栅格系统的总列数
.row-no-gutters {
@include row;
margin-right: 0;
margin-left: 0;
}
// 定义行的布局
%col {
position: relative;
width: 100%;
} // 声明col通用样式的占位符
@for $i from 1 through $col-numb {
@each $bp-key in $bp-keys-list {
.col {
&,
&-#{$i},
&-auto,
&-#{$bp-key}-#{$i} {
@extend %col;
}
}
}
}
// 定义所有类型的col的宽度
.col {
& {
@include col-bp;
}
&-auto {
@include col-auto;
}
}
// 定义在所有分辨率下的无后缀及auto时的自动布局
@for $i from 1 through $col-numb {
.col-#{$i} {
$max-width: ($i / $col-numb) * 100%;
-ms-flex: 0 0 $max-width;
flex: 0 0 $max-width;
max-width: $max-width;
}
}
// 定义在所有分辨率下共用的栅格系统
@each $bp-key in $bp-keys-list {
@include respond-to($bp-key) {
.col {
&-#{$bp-key} {
@include col-bp;
}
&-#{$bp-key}-auto {
@include col-auto;
}
@for $i from 1 through $col-numb {
&-#{$bp-key}-#{$i} {
$max-width: ($i / $col-numb) * 100%;
-ms-flex: 0 0 $max-width;
flex: 0 0 $max-width;
max-width: $max-width;
}
}
}
}
}
// 定义在各个分辨率下各自的栅格系统
4. 字体大小的媒体查询
① 同样先引用全局变量所在的abstracts文件夹内的文件，来引入断点管理和媒体查询混合宏；
② 同样通过@each来遍历每个分辨率范围，再通过index（）函数来提取每个分辨率名称所对应的索引号，从而获得递增数列，根据计算来算出每个分辨率采用哪个字体大小；
③ 但，全屏的字体大小太大，还是直接应用@media，来根据实际情况调整字体大小比较好，可以断点不会那么多；
@import
"../abstracts/variables",
"../abstracts/mixins";
@each $font-bp in $bp-keys-list {
body {
@include respond-to($font-bp) {
$i: index($bp-keys-list, $font-bp);
font-size: 0.625rem * (0.2 * $i + 0.8);
}
}
}
// 定义body标签在不同断点下的字体大小
5. 其他则同以前css的样式一样，只不过分在各种类型的文件内；
二、 任务问题：
1. 分不同类型的文件时还是有点混乱，全部字体放一个文件内，全部布局放另一个文件内，这就导致定义布局时，要记住字体大小，同样其他组件也要引用颜色、全局变量等文件，还是会是相互影响，只有组件尽可能避免；
2. 编译成css时，还是遇到很多问题，尤其对中文识别出错，所以一定要做到以下情况：
（https://blog.csdn.net/weixin_41849462/article/details/82193368）
① 找到ruby的安装目录，里面也有sass模块，如这个路径，只要是sass-3.3.14的子文件夹内：
C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb，添加一行代码（同方法1）
Encoding.default_external = Encoding.find('utf-8')
放在最后一个require XXXX 的下一行即可
解决：sass报错Invalid GBK character "\xE5"
② 编译路径，都不能有中文，也不能有空格，空格用 - 破折号代替；
③ 所有文件，只要是@import引用的文件，只要里面有中文出现，都要在第一行添加：
@charset "utf-8";
3. 虽然通过sass编写后再编译成css，但还是没有完全脱离bootstrap的css样式，还是要看下bootstrap的代码来应用到自己的sass文件内，方便自己调用，只是一些动效就要看摸索了，尤其Jquery库里的；
返回列表
评论