less_html/css_WEB-ITnose に CSS コードを記述します

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

CSS でスタイルシートを書くことは誰でも慣れているはずです。ここで私が話しているのは、Sublime プラグインを使用して作成するスタイルを減らすことです。これは、CSS スタイルを直接記述するよりも簡単で使いやすく、CSS コードがより整理されます。

less を使用して、sublime に 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;}

を混合すると、定義された 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;   }