less语法基础

引入less

  1. 语法

    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>
    
    • 说明:
      • less.js文件必须在引入的less文件之后
      • 引入less文件事rel的值必须为 stylesheet/less

变量



变量声明
  • less变量声明通过@+变量名,后面跟css类型的值或其他变量的值; 

  1. 变量的使用

    • 只需将变量名写在css属性后面即可
    • 例:

      @width:100px;
      div{
          width:@widht;
      }
      
  2. 变量的值参与计算

    • 变量可以直接与 加,减,乘,除运算
    • 例:

      @width:100px
      @width+100px ;结果为200px
      @width*2; 结果为200px
      
  3. 作用域(scope)

    作用域是程序中的一个标准,LESS中也是。如果你在你样式表的root级声明一个变量,它在整个文档中都是可以调用的。然而,如果你在一个选择器,比如id或者class中,重新定义了这个变量,那么,它就只能在这个选择器中可用了——当然是重新定义后的新值。
    
    @color: #00c; /* 蓝色 */
    
    #header {
      @color: #c00; /* 红色 */
       border: 1px solid @color; /* 红色边框 */
    }
    
    #footer {
      border: 1px solid @color; /*蓝色边框 */
    }
    

声明类(函数)

  1. 类的声明通过 “.” +类名(参数列表){css申明}

    • 说明:
      • “.”不能少必须加不能少
      • 类名和css类名命名规则相同
      • 参数列表和变量声明一样,可带默认值
      • css申明可以用参数也可用常量值
    • 例:

      .myClass(@color:red,@length){
          background-color:@color
          width:@length;
          height:@length;
          border:1px solid @color
      }
      
  2. 类(函数的调用)

    • 直接在css声明中调用类名并传入参数即可
    • 说明:
      • “.”不能少
      • 如果参数没有默认值则必须传入参数,如果都有默认值则可以不传入参数,直接写类名即可
    • 例:

      .myClass(@color:red ,@length:100px){
          background-color:@color;
          width:@length;
          height:@length;
          border:1px solid @color
      }
      
      .div1{
          .myClass(grenn,200px);
      }
      .div1{
          .myClass;
      }
      

类声明的扩展

  1. 以使用@arguments来引用所有传入的变量

    • 例:

      .border(@a,@b,@color:blue){
      
          border:@arguments;
      
      }
      
  2. 使用参数的控制位来控制相同的类输出不同的样式

    .border(cool,@color){
    
      border:2px solid @color;
    
    }
    
    .border(hot,@color){
    
      border:1px solid @color
    
    }
    
    .border(@_,@ye){
    
      color:@ye;
    
    }
    
    
    
    调用:
    
    .con2{.border(hot,red)}
    
    .con1{.border(cool,blue)}
    
    输出为:.con2(border:1px solid red;color:red)
    
          .con1{border:2px solid blue;color:blue}
    
  3. 使用参数个数来控制输出那个类:

    .border(@a){….}
    
    .border(@a,@b){...}
    
    如果传入一个参数则调用第一个定义,传入2个则调用第二个定义
    
  4. 使用@arguments来引用所有传入的变量

    .border(@a,@b,@color:blue){
    
      border:@arguments;
    }
    
  5. 条件语句判断:

    • 可以在类函数定义时候使用条件判断

      .border(@a) when (@a>10),(@a<3){
      
        border:@a solid blue;
      }
      .con1{.border(5px)}
      
      这里的条件是大于10或者小于3,所以调用不成立
      
      .border(@a) when (@a>10) and (@a<15){
      
        border:@a solid blue;
      }
      
      .con1{.border(12px)}
      
      这里的条件是大于10并且小于15 ,调用成立,条件语句中那个px可以加也可以不加,判断都通过
      
  6. 以使用内置函数unit来增加或者取出单位

    .border(@a) {
      border:unit(@a,px) solid red;
    }
    
     .con2{.border(5)}
    
    输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5
    

混合(Mixin)

  1. 有时,我们会创建一些样式,目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class,但是你可以使用LESS,在样式表中完成。为了说明这一点,我粘贴了一些代码示例: .border { border-top: 1px dotted #333; }

    article.post {
      background: #eee;
      .border;
    }
    
    ul.menu {
      background: #ccc;
      .border;
    }
    

选择器继承

  1. 下面这些是LESS中没有提供的。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了:

    .menu {
      border: 1px solid #ddd;
    }
    .footer {
      @extend .menu;
    }
    /* 上面的规则和下面的规则是一样的效果 */
    .menu, .footer {
      border: 1px solid #ddd;
    }
    

嵌套规则(Nested rules)

  1. 在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器,类似于"#site-body .post .post-header h2"是毫无用处,而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子,你可以这样写:

    #site-body { …
      .post { …
        .post-header { …
          h2 { … }
          a { …
            &:visited { … }
            &:hover { … }
          }
        }
      }
    }
    上面的代码最终效果和上面的一大串选择器效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,这个功能类似于javascript中的this。
    

命名空间(namespaces)

  1. 命名空间可以用于组织我们的CSS,从而提高到另一个层次,我们将一些公用的样式创建分组,然后在使用的时候直接调用。例如,如果我们创建了一个名为“default”的样式分组,我们就可以在使用到的时候直接从该组中调用。

    #defaults {
      .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
       }
       .button () { … }
       .quote () { … }
    }
    然后,在我们的代码中,如果我们正好在一个nav元素中使用了ul元素,我们就会想到我们需要default样式。那么我们就可以简单的调用它,它也会被直接应用。
    
    nav ul {
      #defaults > .nav_list;
    }
    

注解

  1. 这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释,/* comment */,是有效的,而且能够通过处理并正确输出。当行注释,// comment,同样可以用但是不能够通过处理也不能被输出,然后,结果是,“无声的”。

导入

  1. 导入也相当符合标准。标准的 @import ‘classes.less’; 处理的很好。然而,如果你想要导入其它的LESS文件,那么文件的扩展名是可选的,所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容,你可以使用 .css 扩展 (比如, @import ‘reset.css’;)。

字符串插入

  1. 字符串也是可以用于变量中的,然后通过@{name}来调用。

    @base_url = 'http://coding.smashingmagazine.com';
    background-image: url("@{base_url}/images/background.png");
    

转义(Escaping)

  1. 有时候,你需要引入一个值,它是无效的CSS语法或者LESS不能识别。通常是一些IE的Hack。要避免抛出异常并破坏LESS,你将需要避开它们。

    .class {
      filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
    }
    
    /* 实际上会输出下面的代码: */
    .class {
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    }
    

javascript的表达式

  1. 这是LESS中我最中意的部分:在样式表中使用Javascript——相当精彩。你可以使用表达式,也可以参考环境方向来使用反单引号。

    @string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */
    
    /* You can also use the previously mentioned interpolation: */
    @string: 'howdy';
    @var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */
    
    /* Here we access part of the document */
    @height = `document.body.clientHeight`;
    

LESS内置函数:

+ ceil(@number);                               // 向上取整

+ floor(@number);                              // 向下取整

+ percentage(@number);                  // 将浮点数转换为百分比,例如 0.5 -> 50%

+ round(number, [places: 0]);                  // 四舍五入取整

+ saturate(@color, 10%);                       // 饱和度增加 10%

+ desaturate(@color, 10%);                     // 饱和度降低 10%

+ lighten(@color, 10%);                        // 亮度增加 10%

+ darken(@color, 10%);                         // 亮度降低 10%

+ fadein(@color, 10%);                         // 透明度增加 10%

+ fadeout(@color, 10%);                        // 透明度降低 10%

less 和 sass的区别

  1. LESS和Sass中的变量的唯一区别就是,LESS使用@,而Sass使用$。同时还有一些作用域上的差别,我们后面会介绍。

  2. 条件语句和控制

    这是一个很强大的功能,也是LESS不支持的功能。使用Sass,你可以使用if{}else{}这样的条件语句,以及for{}循环语句,他甚至还支持and、or和not,以及<、>、<=、>=和==等操作符。
    
    /* Sass中简单的if语句 */
    @if lightness($color) > 30% {
      background-color: #000;
    } @else {
      background-color: #fff;
    }
    
    /* Sass中简单的for循环语句*/
    @for $i from 1px to 10px {
      .border-#{i} {
        border: $i solid blue;
      }
    }
    
  3. 作用域区别

    作用域在Sass中稍有不同。在上面的代码中,当@color变量变为红色后,代码中,此处之后的该变量的值,将会被重写(成为红色)。
    
  4. 输出格式

    • 然而LESS并没有输出设置,而Sass提供4中输出选项:nested, compact, compressed 和 expanded。
  5. 默认变量sass的默认变量仅需要在值后面加上!default即可。

    //sass style
    //-------------------------------
    $baseLineHeight:        1.5 !default;
    body{
        line-height: $baseLineHeight; 
    }
    
    //css style
    //-------------------------------
    body{
        line-height:1.5;
    }
    sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
    //sass style
    //-------------------------------
    $baseLineHeight:        2;
    $baseLineHeight:        1.5 !default;
    body{
        line-height: $baseLineHeight; 
    }
    
    //css style
    //-------------------------------
    body{
        line-height:2;
    }
    
  6. 特殊变量

    一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
    //sass style
    //-------------------------------
    $borderDirection:       top !default; 
    $baseFontSize:          12px !default;
    $baseLineHeight:        1.5 !default;
    
    //应用于class和属性
    .border-#{$borderDirection}{
      border-#{$borderDirection}:1px solid #ccc;
    }
    //应用于复杂的属性值
    body{
        font:#{$baseFontSize}/#{$baseLineHeight};
    }
    
    //css style
    //-------------------------------
    .border-top{
      border-top:1px solid #ccc;
    }
    body {
      font: 12px/1.5;
    }
    
  7. 多值变量

    多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
    list
    list数据可通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list),join($list1,$list2,[$separator]),append($list,$value,[$separator])等,具体可参考sass Functions(搜索List Functions即可)
    定义
    //一维数据
    $px: 5px 10px 20px 30px;
    
    //二维数据,相当于js中的二维数组
    $px: 5px 10px, 20px 30px;
    $px: (5px 10px) (20px 30px);
    使用
    //sass style
    //-------------------------------
    $linkColor:         #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
    a{
      color:nth($linkColor,1);
    
      &:hover{
        color:nth($linkColor,2);
      }
    }
    
    //css style
    //-------------------------------
    a{
      color:#08c;
    }
    a:hover{
      color:#333;
    }
    map
    map数据以key和value成对出现,其中value又可以是list。格式为:$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2),map-keys($map),map-values($map)等,具体可参考sass Functions(搜索Map Functions即可)
    定义
    $heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
    使用
    //sass style
    //-------------------------------
    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
    @each $header, $size in $headings {
      #{$header} {
        font-size: $size;
      }
    }
    
    //css style
    //-------------------------------
    h1 {
      font-size: 2em; 
    }
    h2 {
      font-size: 1.5em; 
    }
    h3 {
      font-size: 1.2em; 
    }
    
  8. 属性嵌套

    所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。拿个官网的实例看下:
    //sass style
    //-------------------------------
    .fakeshadow {
      border: {
        style: solid;
        left: {
          width: 4px;
          color: #888;
        }
        right: {
          width: 2px;
          color: #ccc;
        }
      }
    }
    
    //css style
    //-------------------------------
    .fakeshadow {
      border-style: solid;
      border-left-width: 4px;
      border-left-color: #888;
      border-right-width: 2px;
      border-right-color: #ccc; 
    }
    当然这只是个属性嵌套的例子,如果实际这样使用,那估计得疯掉。
    
  9. @at-root

    sass3.3.0中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。
    普通跳出嵌套
    //sass style
    //-------------------------------
    //没有跳出
    .parent-1 {
      color:#f00;
      .child {
        width:100px;
      }
    }
    
    //单个选择器跳出
    .parent-2 {
      color:#f00;
      @at-root .child {
        width:200px;
      }
    }
    
    //多个选择器跳出
    .parent-3 {
      background:#f00;
      @at-root {
        .child1 {
          width:300px;
        }
        .child2 {
          width:400px;
        }
      }
    }
    
    //css style
    //-------------------------------
    .parent-1 {
      color: #f00;
    }
    .parent-1 .child {
      width: 100px;
    }
    
    .parent-2 {
      color: #f00;
    }
    .child {
      width: 200px;
    }
    
    .parent-3 {
      background: #f00;
    }
    .child1 {
      width: 300px;
    }
    .child2 {
      width: 400px;
    }
    

变量声明
  • less变量声明通过@+变量名,后面跟css类型的值或其他变量的值; 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值