CSS系列：less备忘

阅读目录

• less备忘
• 生成CSS

回到顶部

less备忘

---

//这是一个运行在koala中的less文件，//注释不会被编译到css文件中，/**/注释会           ****************by 李可 2016/04/19
/*所有，所有伪类*/
*,*:after,*:before{   
    margin: 0;
    padding: 0;  
};

/*2种盒子类型，*/
.divouter{
   box-sizing:border-box;//写width会把margin算进去
//box-sizing:content-box;//默认
}

/*****************************************变量(值) 层级关系(嵌套)*************************************************/
@a:20px;
.divouter{
    width:@a;
        .divinner
        {
        width:@a;
       }
    .divinner2
      {
        width: 300px;
      }
}

/*********************************************混合（多个属性的集合）**********************************************/
.border-radius{
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
     border-radius:5px;
}
#divmix{
    .border-radius;
    //.border-radius()
}


/***********************************命名空间（多个模块）,每个模块就是将变量，混合弄成一个块。*******************************/
/*变量或者混合夹杂着层级*/
#namespaceLi{
    .button{// 按钮模块   将一些变量和嵌套组合成一个个的小模块，外面调用具体模块的时候，这个模块的所有变量值和&和层级嵌套就会对应的
        border-radius:1px;
        &-primary{
        background:gray;
             &:hover{
            background:red;
         }
        }
        &:hover{
        background:blue;
        }
    }
    .tree{
        height:800px;
        &:hover{
        background:red;
        }
    }
    .accrdtion{
        height:800px;
        &:hover{
        background:red;
        }
    }
}
/*使用：命名空间名 >模块名*/
#divoop1{//调用命名空间 > 模块名，（结果和命名空间 > 模块名字没关系哦）：会自动将自己的选择器名传进去，生成自己的
    #namespaceLi .button
}
#divoop2{
    #namespaceLi > .button
}

/**************************************运算+ - * / 数字，颜色，变量值都可以*************************************************/
@temp:30px;
@left:@a+50;
.calcdiv{
    color:#999/3;
    background-color:1/3; /* background-color: 0.3333333333333333;*/
    height:200+50;
    width:200px+50; /* width: 250px一个带单位，一个不带;*/
    position:relative;
    left:@left;
}
/*******************************方法(相同属性，不同属性值，就像一个方法，封装多个属性，供外部调用)************************/
.div(@w:200px,@h:200px){//默认属性值
width:@w;
height:@h
}
#div2{
    .div(400px,300px)
}
#div3{
    .div
}
#div4{
    .div()
}
/************************************层级（嵌套）+拼接选择器(&拼接符号)************************************/
.divouter{
   width:200px;
   .divouter8{
   background:red;
   }
   &-header{
   width:300px;
   }
    &-slideBar{
   .div(200px,800px)
   }
   &-body{
   .div(600px,300px)
   }

   &:hover{
   backgroud:red;
   }
}



/************************************************清楚浮动***********************************************************/
.clearfix:after{
    content:"";
    width: 0;
    height: 0;
    display: block;
}
.clearfix{
    zoom:1;  
}

回到顶部

生成CSS

---

/*所有，所有伪类*/
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}
/*2种盒子类型，*/
.divouter {
  box-sizing: border-box;
}
/*****************************************变量(值) 层级关系(嵌套)*************************************************/
.divouter {
  width: 20px;
}
.divouter .divinner {
  width: 20px;
}
.divouter .divinner2 {
  width: 300px;
}
/*********************************************混合（多个属性的集合）**********************************************/
.border-radius {
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
#divmix {
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}
/***********************************命名空间（多个模块）,每个模块就是将变量，混合弄成一个块。*******************************/
/*变量或者混合夹杂着层级*/
#namespaceLi .button {
  border-radius: 1px;
}
#namespaceLi .button-primary {
  background: gray;
}
#namespaceLi .button-primary:hover {
  background: red;
}
#namespaceLi .button:hover {
  background: blue;
}
#namespaceLi .tree {
  height: 800px;
}
#namespaceLi .tree:hover {
  background: red;
}
#namespaceLi .accrdtion {
  height: 800px;
}
#namespaceLi .accrdtion:hover {
  background: red;
}
/*使用：命名空间名 >模块名*/
#divoop1 {
  border-radius: 1px;
}
#divoop1-primary {
  background: gray;
}
#divoop1-primary:hover {
  background: red;
}
#divoop1:hover {
  background: blue;
}
#divoop2 {
  border-radius: 1px;
}
#divoop2-primary {
  background: gray;
}
#divoop2-primary:hover {
  background: red;
}
#divoop2:hover {
  background: blue;
}
/**************************************运算+ - * / 数字，颜色，变量值都可以*************************************************/
.calcdiv {
  color: #333333;
  background-color: 0.3333333333333333;
  /* background-color: 0.3333333333333333;*/

  height: 250;
  width: 250px;
  /* width: 250px一个带单位，一个不带;*/

  position: relative;
  left: 70px;
}
/*******************************方法(相同属性，不同属性值，就像一个方法，封装多个属性，供外部调用)************************/
#div2 {
  width: 400px;
  height: 300px;
}
#div3 {
  width: 200px;
  height: 200px;
}
#div4 {
  width: 200px;
  height: 200px;
}
/************************************层级（嵌套）+拼接选择器(&拼接符号)************************************/
.divouter {
  width: 200px;
}
.divouter .divouter8 {
  background: red;
}
.divouter-header {
  width: 300px;
}
.divouter-slideBar {
  width: 200px;
  height: 800px;
}
.divouter-body {
  width: 600px;
  height: 300px;
}
.divouter:hover {
  backgroud: red;
}
/************************************************清楚浮动***********************************************************/
.clearfix:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
}
.clearfix {
  zoom: 1;
}