今天完成的事情：
学习了less和sass，sass更加好用，准备使用sass来做任务11
和css相比less和sass都能使编写更简单，更容易维护
less和sass有一定区别
less符号使用@，sass使用$
编码环境不一样，less要配置less.js文件，sass要ruby
less是基于javascript的
sass与less相比的优势：
SASS 拥有条件语句，循环语句还可以自定义函数
1、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护
2、Sass对于我来说参考的教程多
3、Sass有一些成熟稳定的框架，特别是Compass，新秀还有Foundation之类
4、还有一个原因是国外讨论Sass的同行要多于LESS
sass:
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.important {
@extend.text-left;
@extend.text-right;
}
输出css:
.text-left, .important {
text-align: left;
}
.text-right, .important {
text-align: right;
}
修改任务10中间样式，是其具有自适应
代码由
<div class="number-one">
<input type="radio" name="size" id="A" class="radio"><label for="A"
class="radio">内经</label>
<input type="radio" name="size" id="B" class="radio"><label for="B"
class="radio">外经</label>
</div>
<div class="number-two">
<label for="">长 <input type="number" class="number"> mm</label>
<label for="">长 <input type="number" class="number"> mm</label>
</div>
<div class="number-two">
<label for="">宽 <input type="number" class="number"> mm</label>
<label for="">宽 <input type="number" class="number"> mm</label>
</div>
<div class="number-two">
<label for="">高 <input type="number" class="number"> mm</label>
<label for="">高 <input type="number" class="number"> mm</label>
</div>
修改为
<div class="number-two">
<input type="radio" name="size" id="A" class="radio"><label for="A"
class="radio">内经</label>
<label for="">长 <input type="number" class="number"> mm</label>
<label for="">宽 <input type="number" class="number"> mm</label>
<label for="">高 <input type="number" class="number"> mm</label>
</div>
<div class="number-two">
<input type="radio" name="size" id="A" class="radio"><label for="A"
class="radio">内经</label>
<label for="">长 <input type="number" class="number"> mm</label>
<label for="">宽 <input type="number" class="number"> mm</label>
<label for="">高 <input type="number" class="number"> mm</label>
</div>
利用flex弹性布局完成
明天的计划：
会使用sass
完成任务11
返回列表
评论