less编写css代码

LuDongWei

css编写样式表我想大家应该都已经熟悉了。我在这里说的是使用sublime的插件进行less样式的编写,使用起来比原本的直接编写css样式,更加的简单与方便,css代码也变得更加的整齐。

sublime上直接使用less编写css代码

准备

  1. 电脑上的sublime已经安装了Less插件。(npm install less -gd)

  2. 电脑上安装了nodejs,并全局安装lessc插件。

使用(简单)

  1. 直接新建一个aa.less的文件,在其中编写less的代码。

  2. ctrl+s保存下,在目录中出现aa.css文件可以直接在页面中使用。

less的简单介绍

什么是less

LESSCSS是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css的赋予了动态语言的特性,如变量,继承,运算,函数等,更加方便css的编写和维护。

变量

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。

@color:#4d926F;
#header{
   color:@color;
}
h2{
   color:@color
}
//编译后--
#header{
   color:#4d926F;
}
h2{
   color:#4d926F;
}

混合

可以将一个定义好的classA 轻松的引入到另外一个classB中。

    .rounded-corners (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }   
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(10px);
    }
    // 编译后 --
     #header {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    #footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

嵌套(最常使用)

我们可以在一个选择器中嵌套一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

   #header{
      h1{
        font-size:26px;
        font-weight:bold;
      }
      p{
        font-size:12px;
        a{
          text-decoration: none;
          &:hover{
            border-width: 1px;
          } 
        }
      }
   }
   // 编译后 --
   #header h1 {
    font-size: 26px;
    font-weight: bold;
   }
   #header p {
    font-size: 12px;
   }
   #header p a {
    text-decoration: none;
   }
   #header p a:hover {
    border-width: 1px;
   } 

函数和运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值直接的复杂关系。

   @the-border: 1px;
   @base-color: #111;
   @red:        #842210;
    
   #header {
        color: (@base-color * 3);
        border-left: @the-border;
        border-right: (@the-border * 2);
   }
   #footer {
        color: (@base-color + #003300);
        border-color: desaturate(@red, 10%);
   }
   // 编译后--
   #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
   }
   #footer {
        color: #114411;
        border-color: #7d2717;
   }

   
阅读 4.1k

笔记与心得
记录自己在前端开发中碰到的事物。

英语不擅长的前端工作者

620 声望
20 粉丝
0 条评论

英语不擅长的前端工作者

620 声望
20 粉丝
文章目录
宣传栏