less知识点总结

刺骨的言语ヽ痛彻心扉 2022-09-12 15:56 177阅读 0赞

less

​ less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
​ 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
​ LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

  1. less的中文官网：http://lesscss.cn/

less初次使用：

1.定义变量（@zero:0）并运用，凡是页面中使用0，都用@zero代替;
2.子元素需要放在父元素中，此时子元素可以放心使用class，因为他已经有前提条件是父元素
不用再继续担心对同名class值样式的影响

  1. <style type="text/less">
  3. 3.  style标签的类型需要改成less
  4.          4.  根据官网我们需要一个less编译的    less.js 文件，并在最下方引入，
  5.         因为需要读取页面中所有less相关的文件，才可以进行编译
  7. less --- 支持原生js,node
  8. sass --- ruby环境
  9. stylus --- node -- 开发项目中我们使用stylus

Less编译工具

​ koala 官网:www.koala-app.com
​

less中的注释

​ 单行注释：以//开头的注释，不会被编译到css文件中
​ 多行注释：以/**/包裹的注释会被编译到css文件中
​

less中的变量

使用@来声明一个变量：@pink：pink;
​ 1. 作为普通属性值来使用：直接使用@pink

  1. 作为选择器和属性名：#@{selector的值}的选择器形式, @{selector的值}属性名
  2. 作为URL：@url
  3. 在其他位置使用变量

​ 语法：@{变量名}

  1. 变量引用变量

    语法：@@变量名

    1. 将其他属性作为变量使用

    语法：$属性名

  2. 变量的延迟加载：

    • 先找子元素，如果子元素中有两个或者多个相同变量，我们默认拿最后一个
      • 在找父元素，把子元素东西排除掉,如果没有，向上一层去找
      • 如果自身没有，就会往外找 无论在那一层找 都是使用这一层的最后一个

    @var: 0;
    .class {

    1. @var: 1;
    2. .brass {
    3.   @var: 2;
    4.   three: @var;   // 3
    5.   @var: 3;
    6. }
    7.   one: @var;        // 1

    }

less中的嵌套规则

​ 1.基本嵌套规则

​ 在使用嵌套的时候 ，要注意合理的嵌套；一旦发现有定义比较特殊的class 或者id值等情况，就可以单独拿出来写

​ 2.&的使用

​ &代表当前元素，也可以说成是，前边所有祖先选择器的集合；

​ 所有与伪元素、伪类选择器相关的 一般情况下都搭配&，如 &:hover

less加减乘除运算

​ less可以进行加减乘除运算，使用时要注意运算符左右必须带空格。

  1. /*是在less文件里写*/
  2. @width:10px + 5;
  3. div {
  4. /*其实就变成了15px的边框*/
  5.     border:@width solid skyblue;
  6. }
  7. /*生成的css文件是这样的*/
  8. div {
  9.     border:15px solid skyblue;
  10. }
  11. /*甚至还可以带小括号，比如说下面这种 和数学中的一样，先算小括号再去相乘*/
  12. width:(@width + 5) * 2;

less扩展 :extend()

通过extend() 可以使用其他样式来扩展当前样式

  1. // 源码
  2. .box1{
  3.     width: 100px;
  4.     height: 100px;
  5. }
  6. .box2{
  7.     &:extend(.box1);
  8. }
  10. // 编译后
  11. .box1,
  12. .box2{
  13.     width: 100px;
  14.     height: 100px;
  15. }

less中的混合 Mixin

​ 混合就是将一系列属性从一个规则集引入到另一个规则集的方式。

​ mixin的作用：将一些代码集成到一个混合器中，提高代码重用的能力。

​ 1.普通混合
​ 2.带参数的混合
​ 3.带参数并且有默认值的混合
​ 4.带多个参数的混合

​

  1. // 商品列表布局
  2. //设置Mixin
  3. .hideBox(@box,@num,@w,@h,@mr){
  4. //  @box  父容器选择器
  5. //  @num  每行的列数   商品个数
  6. //  @w    商品容器宽度
  7. //  @h    商品容器高度
  8. //  @mr   商品容器右边距
  9. //<div class="box">
  10. //  <div class="hideBox">
  11. //    <div class="item"></div>
  12. //    <div class="item"></div>
  13. //    <div class="item"></div>
  14. //    <div class="item"></div>
  15. //  </div>
  16. //</div>
  17.   .@{box}{
  18.     width: (@w * @num) + ( @num - 1) * @mr;
  19.     border: 1px solid #000;
  20.     margin: 0 auto;
  21.     overflow: hidden;
  22.     .hideBox{
  23.       width: (@w + @mr) * @num;
  24.       .item{
  25.         width: @w;
  26.         height: @h;
  27.         margin-right: @mr;
  28.         margin-bottom: 30px;
  29.         background: pink;
  30.         float: left;
  31.       }
  32.     }
  33.   }
  34. }
  36. .hideBox(@box:inner,@num:4,@w:200px,@h:300px,@mr:50px);

​

less中引入外部文件 @import

  1. //引入外部less文件
  2. @import "mixins/mixin.less";

发表评论

表情：
评论列表 （有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读