Home > Web Front-end > HTML Tutorial > less编写css代码_html/css_WEB-ITnose

less编写css代码_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:02:08
Original
1371 people have browsed it

原文 http://segmentfault.com/a/1190000004137275


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

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

准备

  • 电脑上的sublime已经安装了Less2Css插件。

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

  • 使用(简单)

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

  • 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;}
    Copy after login

    混合

    可以将一个定义好的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;    }
    Copy after login

    嵌套(最常使用)

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

    #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;   }
    Copy after login

    函数和运算

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

    @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;   }
    Copy after login
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template