less and sass

279 阅读1分钟

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; }

sass语法

sass中嵌套和引用与less一样


本文纯属个人学习记录!不严谨的地方请不要相信!