发表于： 2018-05-14 22:28:40
2 641
今天完成的事情：scss语法,sass安装、任务10深度思考
明天计划的事情：提炼使用预处理器语言特性的能力
遇到的问题：
父容器div内的子元素div为float时,父元素高度无法被撑开?
解决办法：
1.使用overflow
在父容器上设置 overflow:auto 可以让它自动包含子元素，从而具有了实际的height值.
在IE6中使用这一招时需要给父节点容器设置height或者width属性。因为实际情况中height常常是可变的，所以是设置width的值。对于苹果平台上的IE，设置overflow:auto将会给容器增加滚动条，所以最好是设置 overflow : hidden 。
2. 使用clearfix
clearfix通常搭配 :before 或者 :after 伪元素使用。使用伪元素就是在包含浮动元素的父容器的前面或者后面创造一个隐藏的元素。通过对 :before 伪元素使用 display:table 来创建一个匿名的table-cell元素，从而防止子元素的top margin消失。这一招在IE6和7中具有一致的效果。同样的，通过设置 :after 伪元素来防止子元素的bottom margin消失。
另外，需要对父容器使用 *zoom 属性触发hasLayout机制来解决IE6和7的一致性。hasLayout机制决定了元素应该怎样渲染和框住它的内容，以及元素间的位置关系。
收获：
一、sass语法
1.嵌套{{}}
书写方式：先写自身的样式，再嵌套子元素。
作用：充当选择器
2.变量
书写方式：$变量
作用：进行相应计算
3.继承
书写方式：@extend
作用：简化代码
4.注释
书写方式：标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
作用：注释
二、任务11深度思考
1.如何使用less?
在客户端使用
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
less样式文件一定要在引入less.js前先引入。 备注：请在服务器环境下使用！本地直接打开可能会报错！
服务器端
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
使用编译生成的静态 CSS 文件
通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。
3.进行相关设置
3.less和sass有什么区别？
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
6.Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
4.如何使用gulp编辑less？
gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。
任务进度：css-11
任务开始时间：2018年5月11日
禅道：http://task.ptteng.com/zentao/project-task.html
返回列表
评论