Less和Sass入门

一.介绍

Less/Sass这样的基于CSS的另一种语言，通过工具编译成CSS，添加了很多CSS不具备的特性。

二.安装和使用

  • Less：

    • Node.js环境中使用：

      • npm install less
      • lessc xxx.less

    • 浏览器环境中使用

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

      • <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>

  • Sass：

    • npm install node-sass
    • node-sass xxx.scss

三.嵌套和变量

  • Less：

    1
    @bgColor: red;
    2
    .container{
    3
      background: lighten(@bgColor,20%);
    4
      .nav{
    5
        ...
    6
      }
    7
    }

  • Sass(Sass嵌套没有花括号，SCSS是其升级版本，嵌套有花括号)：

    1
    $bgColor: red;
    2
    .container{
    3
      background: lighten($bgColor,20%);
    4
      .nav{
    5
        ...
    6
      }
    7
    }

四.mixin代码复用

  • Less：

    1
    .box1{...}//可以传参数.box1{@xxx}
    2
    .box2{
    3
      .box1();//.box1(@xxx);
    4
      ...  
    5
    }

  • Sass：

    1
    @mixin box1($xxx){...}
    2
    .box1{
    3
      @include box($xxx);
    4
      ...
    5
    }

五.extend

mixin直接复制代码（用于复杂场景），extend提取选择器，把公共样式写在一起。

  • Less：

    1
    .block{...}
    2
    .container{
    3
      .nav:extend(.block){
    4
        ...
    5
      }
    6
      .content{
    7
        &:extend(.block);
    8
        ...
    9
      }
    10
    }

  • Sass：

    1
    .block{...}
    2
    .container{
    3
      .nav{
    4
        @extend .block;
    5
        ...
    6
      }
    7
      .content{
    8
        @extend .block;
    9
        ...
    10
      }
    11
    }

六.import

1
//多个import写在一起编译后会在一起
2
@import "./xxx";
3
@import "./yyy";

七.预处理框架

提供现成mixin，类似JS类库，封装常用功能。

  • Less：Lesshat/EST
  • Sass：Compass

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

办法总比困难多