less 前端css利器 工程化、逻辑化 css 文件

less  

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数.

0.使用方式

koala

浏览器引入

node 编译 

 

1. 浏览器方式

1.1 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet/less" type="text/css" href="less.less">
</head>
<body>    
    <header id="header">
        <h2>hello h2 </h2>
         header 
         <p> something about header for <a href="https://www.baidu.com">the link</a> </p>
    </header>
    <footer id="footer"> footer </footer>
    <script src="less.js"></script>
</body>
</html>
View Code

1.2 less

  // LESS

  // 1.变量   定义一系列通用的样式，然后在需要的时候去调用 ( 比如规模性项目自定义主题 )
  // 变量作用于等同 js

  // @color: #4D926F;
  // #header {
  //   @color: #f00;
  //   color: @color;
  // }

  // change to
  // #header {
  //   color: #4D926F;
  // }


  // 2.混合   将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
  //          也可以带参数地调用，就像使用函数一样

  // .rounded-corners (@radius: 5px) {
  //   border-radius: @radius;
  //   -webkit-border-radius: @radius;
  //   -moz-border-radius: @radius;
  // }  
  // #header {
  //   .rounded-corners;
  //   border: 1px solid red;
  // }
  // #footer {
  //   .rounded-corners(50px);
  //   border: 1px solid red;
  // }

  // change to
  // #header {
  //   border-radius: 5px;
  //   -webkit-border-radius: 5px;
  //   -moz-border-radius: 5px;
  //   border: 1px solid red;
  // }
  // #footer {
  //   border-radius: 50px;
  //   -webkit-border-radius: 50px;
  //   -moz-border-radius: 50px;
  //   border: 1px solid red;
  // }



  // 3.嵌套  在一个选择器中嵌套另一个选择器来实现继承

  // #header {
  //   h2 {
  //     font-size: 26px;
  //     font-weight: bold;
  //   }
  //   p { font-size: 12px;
  //     a { text-decoration: none;
  //       &:hover { border: 1px solid red; }
  //     }
  //   }
  // }

  // change to
  // #header h2 {
  //   font-size: 26px;
  //   font-weight: bold;
  // }
  // #header p {
  //   font-size: 12px;
  // }
  // #header p a {
  //   text-decoration: none;
  // }
  // #header p a:hover {
  //   border: 1px solid red;
  // }


  // 4. 函数 & 运算    实现属性值和颜色的运算，处理复杂关系

  // @the-border: 1px;
  // @base-color: #111;
  // @red:        #842210;

  // #header {
  //   margin: 20px;
  //   width: 50%;
  //   border: 1px solid red;
  //   color: @base-color * 3;
  //   border-left-width: @the-border*10;
  //   border-right-width: @the-border * 20;
  // }
  // #footer { 
  //   margin: 10px;
  //   border: 1px solid red;
  //   color: @base-color + #003300;
  //   border-color: desaturate(@red, 10%);
  // }

  // change to
  // #header {
  //   margin: 20px;
  //   width: 50%;
  //   border: 1px solid red;
  //   color: #333333;
  //   border-left-width: 10px;
  //   border-right-width: 20px;
  // }
  // #footer {
  //   margin: 10px;
  //   border: 1px solid red;
  //   color: #114411;
  //   border-color: #7d2717;
  // }
View Code

 

1.2.1 less 监视模式   

在URL后面加上'#!watch'

/  在终端运行less.watch()来启动监视模式

 

1.2.2   less   常用包装方式

在#bundle中定义一些属性集之后可以重复使用:

#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}

只需要在 #header a中像这样引入 .button:

#header a {
  color: orange;
  #bundle > .button;
}


2. node  less 文件转 css

2.1 安装  npm install less -g

2.2 转换  lessc less.less css/less.css              如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了

 

3.扩展  淘宝 rem  方案布局 相关

经典 less 代码

//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
    .px2rem(height, 240);
}
//less翻译结果：
.container {
    height: 3.2rem;
}
View Code

相关文章

手机端rem布局详解

lib-flexible  git 地址

淘宝经典demo 

example less

 

 

参考链接：

Less 中文网

LESS « 一种动态样式语言

Less介绍及其与Sass的差异

posted @ 2019-01-10 20:00  justSmile2  阅读(287)  评论(0)  编辑  收藏  举报
喵