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

less

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

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

参考链接：

Less 中文网

LESS « 一种动态样式语言

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

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

猜你喜欢

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

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