less and sass
首先他们是一种预处理语言,主要功能是帮助我们完成一些CSS中无法完成的能力,可以减少重复代码,节省开发的时间。在使用这两个语言之前,需要先安装nodejs,然后在管理员程序中使用。如下代码来进行安装less和sass
npm install less -g / npm install sass -g
安装完之后,就可以通过如下指令将写好的less或sass文件转换为css文件
首先要在管理员程序中找到less或sass所在的文件夹,找到之后用指令
“lessc 文件名.less 文件名.css 即可”或
“ sass 文件名.scss 文件名.css 即可”(注意sass文件名的是后缀是scss)
less语法
在了解到如何安装和转化为CSS之后,还有一些简单的用法。
less中基本用法
定义了一个变量
@color:#000000;
引用这个变量
.box{ color:@Color; }
p{ border: 1px solid @mainColor; }
如下所示,在less中可以直接将类引用到格子里,这就是混入
.box1{ border: 1px solid red;}
div{ width: 100px; .box1; }
嵌套
.box2{ width: 100px;
ul{ width: 20px;
li{ width: 10px;
a{
font-size: 20px;
}
&:hover{font-size:15px;}
}
}
}
还可以引用其他less
@import"1.less";
可以进行简单运算,下方引用后高是宽的一半
@kd:500px;
.box3{ width: @kd; height: @kd/2; }