发表于: 2018-09-25 22:50:15
1 808
今天完成的事情:
修改了任务十输入表单,限制非数字字符的输入。
学习了sass的用法:
CSS预处理器
- 定义了一种新的专门的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑浏览器的兼容问题,让CSS更加简洁,适应性更强,可读性更佳,更易于代码的维护等诸多好处。
- 文件扩展名不同:“.sass”和“.scss”;
- Sass是以严格缩进式语法规则来书写的,不带大括号和分号;而SCSS的语法和CSS书写语法类似。
- 编译方法:
sass命令编译(在命令终端输入sass指令来编译sass,最直接,最简单)。
编辑器编译需要安装相应的插件。
普通变量和默认变量
- 普通变量声明后可以在全局范围内使用;
- 默认变量仅需在值后面加上!default 即可;
- 默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式是在默认变量之前重新声明下变量即可.
sass
的变量名可以与css
中的属性名和选择器名称相同,包括中划线和下划线。
父选择器的标识符
一般情况下,
sass
在解开一个嵌套规则时就会把父选择器(#content
)通过一个空格连接到子选择器的前边(article
和aside
)形成(#content article
和#content aside
)。这种在CSS里边被称为后代选择器,因为它选择ID为content
的元素内所有命中选择器article
和aside
的元素。但在有些情况下你却不会希望sass
使用这种后代选择器的方式生成这种连接。明天计划的事情:
使用sass重新编写任务5和6的页面。
遇到的困难:
暂无。
收获:
学会了sass的编写方式,使用sass编译css文件。
css的样式分离:
CSS样式分离,一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有用的。当然,对于一些重要的页面,例如淘宝首页,直接将CSS嵌在了页面头部,其降低链接请求的重要性要大于样式的重用。
评论