马木木的个人博客

记录一些学习路上的点滴

less基础

//看的一个视频整理的,貌似是尚硅谷

//入门很简单,而且很有用,最近的代码一直在用less写。

//个人认为最重要的特点是嵌套,这样整个网页的结构就会被把握的很好。

less要点:变量,混合,嵌套,函数&运算,扩展

1、链接
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.2/less.js"></script>


2、注释
/*块注释*/
//行注释(不会输出到编译后的css文件中)


3、变量(Less中的变量充许你在样式中的某个地方对常用的值进行定义,然后应用到样式中,这样只要改变你定义的变量参数值就可以了)
//延迟加载:全局唯一,多次定义,只使用最后一个
//@开头
//选择器和属性名   @{color}  
//url  @{url}
eg:
@color: #4d926f;//然后之后就可以用了
background:url('@{img}/widget.png') no-repeat;

计算功能:可计算//只要一个加单位就好
height:@height+11 
4、嵌套
在一个选择器中嵌套另一个选择器来实现继承
&(当前选择器的父选择器)


div {
  &:hover{
    color:yellow;
  }
p{
   color:darkturquoise;
  }


}
5、混合(Mixin)
//从一个规则集引入另一个规则集
//和扩展很类似,一个是定义子类,一个是定义父类
//试了一下,选择器前面必须带# 或者 .
1)无括号//会带到css中
2)有括号无参数
//特殊()不会带到css
@color: pink;
#pp() {
  color: blue
}
div {
  #pp();
}
(//带一些参数)
3)参数
.pp(@color,@w) {
  color: @color;
 font-size: @w;
}
div {
  .pp(red,30px)
}
4)默认值
.pp(@color,@w:40px) {
  color: @color;
 font-size: @w;
}
div {
  .pp(red)
}
5)命名参数
.pp(@color,@w:40px) {
  color: @color;
 font-size: @w;
}
div {
  .pp(@color: red)


5)匹配模式
.pp(@_,@c){//公共部分,第一个参数为@_
  background: darkturquoise;
}
.pp(L,@c){//第一个参数不带@,用来匹配
  color: @c;
  font-size:30px
}
.pp(R,@c){
  color: @c
}
div {
  .pp(L,@c:red)
}
6)arguments(语法糖)//定义时,一个变量代替所有参数


6、扩展
extend
&:extend(.inline);//增加一个父类


9、避免编译
width:~' calc(100% - 35)';
阅读更多
文章标签: less css
个人分类: 前端
想对作者说点什么? 我来说一句

Less的概括

2018年04月06日 6.42MB 下载

less ,移动端less常见问题处理

2018年01月31日 1.52MB 下载

没有更多推荐了,返回首页

不良信息举报

less基础

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭