初识less
1、认识less
众所周知,css是层叠样式,是构建页面(HTML)必不可少的;使用css我们可以实现很多漂亮的页面展示,各种不一样的动画效果等等,虽然css功能很强大,可以实现很多效果,但它也有一些不足,如没有变量的说法,没有函数,简单易懂,毫无逻辑,单纯写很繁琐等等;面对这些问题,作为一名优秀的程序员,当然就会去解决这些问题,于是就诞生了sass,less, stylus预处理语言。
less向后兼容css,less与css很相似,所以易懂,但它在css的基本上添加很多新的特性,如变量,函数,混合,嵌套等,它让css写起来不在那样的繁琐,加快了开发。
2、使用less
2.1安装
全局安装less
npm install less -g
安装具体版本(在less后加上@VERSION)
npm install less@2.7.1 -g
开发模式安装
npm i less --save-dev
2.2使用
less文件是无法直接在浏览器中使用的,需要转成css文件,或者引入官网中的less.js文件。
例如:
1、在cmd里编译less文件
lessc bootstrap.less bootstrap.css
2、在koala等编译程序中编译less文件为css
3、在浏览器中引入(文件可在官网中下载)
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
变量
1、普通变量(以@开头)
@bgColor: red;
.box {
background: @bgColor
}
2、选择器变量(变量用{}括住)
3、属性变量
@borderStyle: border;
.box{
@{borderStyle}: 2px solid red
}
4、url变
@img: "../img";
a {
background: url(”@{img}/cat.jpg“)
}
5、变量作用域
就近原则
如果是同一级后面的生效,类似于提升。
混合方法
把公共的样式抽离出去,成为一个方法,然后在需要用到它的选择器中混入;
“.”与“#”都可以作为方法前缀。
无参数
条件语句
less不想其他语言,拥有if-else;它只有when,and,not 和 ”,“来实现条件判断。
and相当于&&,”,“相当于||, not相当于!
命名空间和嵌套
@var: red;
.page {
.header
{ color: @var; // white }
@var: white;
}
.box7{
.page .header(); // 也可以.page > .header形式
}
// css
.box7 {
color: white
}
属性拼接语法
+_(空格),+(逗号)。
空格
避免编译(~)
.box9{
width: ~‘calc(90px-70px)’
}
//css
.box9 {
width: calc(90px-70px)
}
结束语
以上就是我对现阶段less的学习。less是一个很好的css预处理语言,它能帮我们解决一些css的短处,也让我们写起来很舒服;经过几天的less学习,对于less基本的语法我已掌握了,但一些比较高深的还是有点欠缺,我会更加努力学习相关知识的。