发表于： 2016-07-12 22:30:36
1 1363
今天完成的事情：
1、学习less，把less的语法、函数都学习了一遍；
明天计划的事情：
1、开始写task12；
2、把less的内容看完并总结完；
遇到的问题：
1、理论都明白了，就是缺乏实践；
2、自己没有一个系统的完整的可靠的reset.css可供使用；
收获：
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、使用&代表同一个元素，使用&纸箱组选择器，会产生新的组选择器；
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、变量具有作用范围，先在局部环境中匹配，未果后在全局环境中匹配；
返回列表
评论