Less变量与父选择器&

原创 2018年04月15日 23:26:11
最近在研究Less,分享一些Less的知识与栗子,参考资料是Less官网,因为基本是全英文,所以看不惯英文的童鞋可以参考这篇文章,希望能有帮助。

LESS变量:
  • 变量声明(最基础的应用—用于css样式):
    • 使用“@”前缀标记变量;
    • @link-color: #428bca; // sea blue
  • Less变量用于选择器、URL、属性:
    // Variables
    @my-selector: banner;
    // Usage
    .@{my-selector} { //用花括号将变量名括起来
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
    }

    • // Variables
      @my-selector: banner;
      // Usage
      .@{my-selector} { //用花括号将变量名括起来
          font-weight: bold;
          line-height: 40px;
          margin: 0 auto;
      }
  • Less变量甚至可以用于变量名:
    • @primary: green;
      @secondary: blue;
      .section {
          @color: primary;
          .element {
              color: @@color;
          }
      }
  • 懒加载:
    • 变量的使用可以在定义之前(不建议)
  • 若一个变量定义多次,则以当前作用域最近的一次为准(和css样式作用域类似),若当前作用域不存在该变量,则往上层作用域查找,直到找到该变量或查找至根作用域为止

父选择器:
  • &代表父选择器
  • 定义伪类样式:
    • a {
          color: blue;
          &:hover {
              color: green;
          }
      }
  • 定义重复性的类的样式:
    • .button {
          &-ok {
              background-image: url("ok.png");
          }
          &-cancel {
              background-image: url("cancel.png");
          }
      }
    • Output:
      .button-ok {
          background-image: url("ok.png");
      }
      .button-cancel {
          background-image: url("cancel.png");
      }
  • 组合式&:
    • & > &
    • & &
    • &&
    • &,&-ish
    • 注意,如果多层嵌套,则&不仅代表其最近的父选择器,而是代表其所有的祖先选择器。如:
      .grand {
          .parent {
              & > & { color: red; }
          }
      }
      output:
      .grand .parent > .grand .parent { 
          color: red;
      }
  • 改变选择器顺序(在孙子的位置做老子的事):
    • .header {
          .menu {
              border-radius: 5px;
              .no-borderradius & {
                  background-image:
                  url('images/button-background.png');
              }
          }
      }
      output:
      .header .menu {
          border-radius: 5px;
      }
      .no-borderradius .header .menu {
          background-image:
          url('images/button-background.png');
      }

后面将继续分享Less继承(extend)与混合(mixin)等一些深层应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_27546161/article/details/79954890

Less变量详解

普通的变量 Css默认不支持变量,当我们使用less之后就可以使用。   其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色: @g...
  • lidiya007
  • lidiya007
  • 2016-10-08 17:51:02
  • 2821

关于Less里的css一些规则,了解入门less

1、.class1{ &:hover{ //&表示当前标签、类、id的hover       opacity: 0.9;     } } 2、.main-content{   background...
  • wangweiscsdn
  • wangweiscsdn
  • 2016-11-28 15:42:52
  • 1400

推荐大家使用的CSS&Less书写规范、顺序

1CSS书写顺序 2CSS书写规范 使用CSS缩写属性 去掉小数点前的0 简写命名 16进制颜色代码缩写 连字符CSS选择器命名规范 不要随意使用id 为选择器添加状态前缀 CSS命名规范规则 常用的...
  • sinat_34056695
  • sinat_34056695
  • 2017-07-26 11:30:05
  • 447

less笔记-变量

一、less变量的直观优点 比较下面CSS 写法与 less写法: css: a, .link { color: #428bca; } .widget { color: #fff; ...
  • qq_19865749
  • qq_19865749
  • 2016-09-11 12:56:47
  • 1001

less学习变量的定义(1)

less 文件内容 @charset "utf-8"; //定义变量 @test-width:200px; @test-height:300px; //定义样式 .testDiv{ ...
  • caofeilong20941
  • caofeilong20941
  • 2014-11-25 08:02:35
  • 10304

学会如何使用LESS(一)----变量和混合

学会如何使用LESS(一)----变量和混合
  • m0_38099607
  • m0_38099607
  • 2017-06-09 09:08:12
  • 5355

在CSS中实现父选择器效果

为何CSS不支持父选择器?这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?”是一样的。浏览器解析HTML文档,是从前往后,由外及里的。所以,我们时常会看到页面先出现...
  • taotaomin99
  • taotaomin99
  • 2017-06-18 22:54:47
  • 618

LESS详解之变量(@)

变量基本上是每个语言脚本上都会涉及的一个小小知识点,是学好语言脚本的必经之路。LESS中也可以设置变量,然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用法,是LESS的基础。...
  • LiMengXiaoLong
  • LiMengXiaoLong
  • 2013-11-01 08:42:57
  • 9940

写less代码减运算时应注意减号和变量之间必须有空格

写less代码时发现了一个bug,就是写less代码减运算时应注意减号和变量之间加入没有空格时减号会被解析为变量的一部分。 例1:.adapterFuc(@index) when (@index > ...
  • microcosmv
  • microcosmv
  • 2017-02-15 00:08:50
  • 626

less中解决CSS3的calc计算出错

最近在用less的时候发现CSS3的calc函数计算时会出现问题。 问题 .mkt-hover{ width: calc(100% - 16px); } ...
  • canglingyue
  • canglingyue
  • 2018-04-02 14:33:34
  • 12
收藏助手
不良信息举报
您举报文章:Less变量与父选择器&
举报原因:
原因补充:

(最多只允许输入30个字)