安装

变量

定义使用 @

  1. @grass： #009900
  3. h1{
  4.     color: @grass;
  5.     font-family: Tahoma, sans-serif;
  6. }
  8. p{
  9.     color: @grass;
  10. }

Mixin 混合宏

  1. .panel{
  2.     border: 3px solid dodgerblue;
  3.     background-color: lightgreen;
  4.     margin: 10px;
  5. }
  7. .little-panel{
  8.     .panel;  //include mixin
  9.     font-size: 12px;
  10.     padding: 5px;
  11. }
  13. .big-panel{
  14.     .panel;
  15.     font-size: 32px;
  16.     padding: 20px;
  17. }

嵌套规则

#sid-nav{
    background-color: #333;

    a:link{
        color: #fff;
        display: block;
        padding: 8px;
    }

    a:hover{
        backgrond-color: #777;
    }
}

嵌套条件句

#welcome-banner{
    font-size:32px;
    background-colo: lightgreen;

    @media screen{
        @media (max-width: 768px){
            font-size: 18px;
            background-color: lightsteelblue;
        }
    }
}

数学运算

@buttonBackground: #006699;
@buttonColor: #ff;
@buttonPadding: 5px;

.button{
    background-color: @buttonBackground;
    color: @buttonColor;
    padding: @buttonPadding;
    display: inline-block;
    bordre-radius: 4px;
}

.jumbo-button{
    .button; //include mixin
    padding: @buttonPadding + 30; //不需要添加其单位
}

.light-button{
    .button;
    background-color: @buttonBackground * 1.8; // 使其颜色更白
}

注释

/ / 多行
// 单行

文件导入

@import "button";
@import "form";

文件引用

@{ } 字符串占位

@images: "images/";
@homepage-images: "images/homepage/";

#one{
    height:500px;
    width: 800px;
    margin-bottom: 10px;
    background: url("@{images}sea.jpg");
}

#one{
    height:500px;
    width: 800px;
    margin-bottom: 10px;
    background: url("@{homepage-images}tree.jpg");
}