less的学习

Less的安装与使用

1. npm install -g less

2. lessc -v //出现版本号表示安装成功

3. 将你的项目放到和lessc一个目录下（是全局安装的目录）

4. 并且将less程序包内dist文件夹下的less.js文件放入你的项目（test）中

<link rel="stylesheet/less" href="css/less/styles.less">

（这是你自己建的less，名字随便取，现用styles.less命名）

<script src="plugin/less.js"></script>（这是dist文件夹下的less.js）

5.lessc  test/css/styles.less  test/css/styles.css （之间空一个格）

（test/css/style.less  是根据lessc来说找寻styles.less的目录，这个要自己建一个）

（test/css/styles.css 是指根据lessc来说编译的css文件产生的目录，一开始不用建，输入命令行后会自动生成）

6.以下是HTML的引用和具体代码实现

        <link rel="stylesheet/less" type="text/css"  href="css/styles.less"/>

<script src="js/less.min.js"></script>

        <div class="containter">
    <div class="inner-div">

    </div>
        </div>

                .containter{
                    width: 10rem;
                    height: 10rem;
                    background: skyblue;
                    .inner-div{
                         width: 8rem;
                        height: 3rem;
                        background: plum;
                    }
                 }