发表于： 2016-07-14 21:24:14
2 1348
今天完成的事情：
1、总结less的语法、函数，把12号的日报补充完整；
明天计划的事情：
1、写task12；
2、把less的内容看完并总结完；
3、好好的弄一个自己的主页，防一个网站；
遇到的问题：
1、缺乏实践；
2、着急；
收获：
1、关于bootstrap的精妙之处，container有15px的padding，row有-15px的margin，column有15px的padding，保证了各个colunm之间有30px的间隙，两侧的column距离边框有15px的间隙，同时column可以直接作为一个container，向里面嵌套一个row，所以一个container里面不应该再有另一个container；
2、关于自适应和响应式的理解，自适应是根据不同屏幕尺寸设置断点提供不同样式，一旦确定布局就不再变化，响应式根据屏幕的不同宽度一直在变化，不是固定的；
3、user-scalable=no可以禁用用户缩放；IOS系统下的Safari会默认将文本放大，禁用这一功能通过下面的语句实现：
html{
-webkit-text-size-adjust: none;
}
4、客户端引入less，在<head>内添加
<link type="text/css" rel="stylesheet/less" href="css/task12.less">
<script type="text/javascript" src="js/less.min.js"></script>
注意在less.js之前加载自己的样式变，多个less样式变不能互访变量和命名空间；
5、mixin是less很重要的特性，类和ID都直接对应mixin的样式库，用法如下：
.border(@px;@color){需要注意，显示定义不带参数或者带参数的样式库，不会输出到编译后的CSS文件中；上面代码中的.border的样式就不会在编译后的CSS文件中出现；同样的
border:solid @px @color;
font-size:@px*5;
}
.mixin{
.border(5px;@color);
}
@px:@height;上面代码的.border的样式也不会在编译后的CSS文件中出现，但是如果将（）去掉，如下面的代码，.border的样式就会在编译后的CSS文件中出现
.border(){
border:solid @px @color;
font-size:@px*5;
}
.mixin{
.border();
}
.border{
border:solid @px @color;
font-size:@px*5;
}
.mixin{
.border;
}
6、使用...令mixin接受数量不定的参数，使用@rest定义入参数组，@arguments定义所有参数；
7、使用&代表同一个元素（所有同一级别的选择器），使用&组选择器，会产生新的组选择器；也可以使用&生成重复的参数：
.header{编译结果
&-top{
color:red;
}
&-middle{
color:red;
}
&-bottom{
color:red;
}
}
.header-top {
color: red;
}
.header-middle {
color: red;
}
.header-bottom {
color: red;
}
8、less的单行注释使用//，无法显示在编译后的CSS中，所以推荐使用多行注释；
9、less的default()函数，必须在条件语句中使用，用来实现上方条件未执行时的动作；
10、extract(@x,3)：用来提取@x参数组中的第三个参数，length（@x）：返回@x参数组的参数个数；
11、ceil(@number):取最接近的大于@number的整数，floor(@number)与ceil()相反，round(@x;@y):取@y位数的@x的近似值，pow(@;@y):@x的@y次方，convert转换可转换的单位，unit去除或增加单位，isnumber(isstring,isem,ispixel...)判定类型；
12、变量具有作用范围，先在局部环境中匹配，未果后在全局环境中匹配，没有先定义后使用的要求；
13、extend可以对应所有选择器，mixin仅对应类和ID选择器；
14、extend的两种形式：
.cc:extend(#divv){}括号内加上all，匹配所有带有divv的选择器，除此之外必须精确匹配选择器，并且父选择器不支持变量形式；
.dd{
&:extend(#divv);
}
15、编写在@media内部的extend只匹配同一级@media声明内的选择器，向上、向下（嵌套）都不会匹配；编写在@media外的顶级extend则会匹配一切
@media screen{
.x:extend(.b){}//不匹配
.y:extend(.c){}//匹配
@media (min-width:1023px){
.b{
color:red;//不匹配
}
}
.c{
color:yellow//匹配
}
}
.z:extend(.b){}//匹配
16、显示定义带参数的mixin，调用时一定要匹配参数才能成功；下面的代码就会报错，在调用时匹配参数就可以成功；
#div(@color){17、mixin的参数可以再（）内赋值，但赋值后就可以视为变量，匹配参数可以不匹配已赋值的参数，下面的代码时不会报错的
color:black;
font-size:@height;
}
.xx{
#div();
}
#div(@color;@height:20px){但是如果不赋值的话参数个数就必须匹配才能调用，也就是函数的重载，下面的代码就会报错
color:black;
font-size:@height;
}
.xx{
#div(green);
}
#div(@color;@height){
color:black;
font-size:@height;
}
.xx{
#div(green);
}
18、推荐使用；作为mixin参数的分隔符：.a(x1,x2,x3)//三个参数；a(x1,x2；x3)//两个参数，x1和x2为CSS属性列表；
19、在条件判断语句中，逗号代表或；
20、变量可以用于属性(rule）、属性(rule）部件、属性值、选择器和选择器部件，定义时的形式【@变量名：变量值】
引用时，用于属性值【@变量名】【@{变量名}】两种形式都可以，用于属性、属性部件、选择器、选择器部件、字符串拼接，都必须使用【@{变量名}】的形式；
21、我理解的，在下面的代码中，.header-top是选择器，top是选择器部件，font-size是属性，-size是属性部件，14px是属性值；
.header-top{22、extend的用途
font-size:14px
}
①避免添加基础类，即.a和.b部分属性一直，当.b需要覆盖.a部分属性的时候就可以使用extend；
②使用extend可以减少CSS代码量，使用mixin：
.a{编译结果
font-size: 11px;
}
.b{
.a
}
.a {使用extend
font-size: 11px;
}
.b {
font-size: 11px;
}
.a{编译结果
font-size: 11px;
}
.b{
&:extend(.a);
}
.a,
.b {
font-size: 11px;
}
返回列表
评论