CSS 前処理 Less_html/css_WEB-ITnose

最近の空き時間を利用して CSS の前処理について学びましょう

less の紹介

Less は Css プリコンパイラーです。つまり、Css 言語を拡張し、変数 (変数)、ミックスインを許可するなどの機能を追加できます。 、関数、およびその他の多くのテクニックを使用すると、CSS の保守性、テーマ性、拡張性が向上します。

Less は、Node 環境、ブラウザ環境、Rhino 環境で実行でき、ファイルをコンパイルして変更を監視するための 3 つのオプション ツールもあります。

構文

変数

変数の宣言:

@width：100px；.test {    width: @width;}

混合

.border {    border: 1px solid red;}.test {    width: @box_width;    height: 100px;    background: #ccc;    .border;  //直接混合使用}    

ネスト

通常の書き込み

.test {  font-size: 10px;}. test a {  color: red;}

なしの書き込み:

.test {   font-size: 10px;a {  color: red;  }}

疑似クラスを含めることもできます:

.test {    font-size: 10px;    a {       &:hover {          color: blue;       }      color: red;    }}

Operation

@width: 5px;.test { width: @width + 10;  //15px}

less Canここで単位を推論します

関数

.border_radius(@width:5px) { //5px是可选参数，表示默认值    -webkit-border-radius: @width;    -moz-border-radius: @width;    -ms-border-radius: @width;    border-radius: @width;}.test {    .border_radius(20px);  }

名前空間

.bundle {  .button {    display: block;    border: 1px solid black;    background-color: grey;    &:hover {      background-color: white    }  }}//现在如果我们想在 .header a 中混合 .button 类，那么我们可以这样做：.header a {      color: orange;      .bundle > .button;    }

スコープ

@var: red;.page {  #header {    color: @var; // white  }  @var: white;}

コンパイルを回避します

.test {    width: ~'calc(300px - 30px)';}

アノテーション

// コンパイルされません css /** / は css に編集されます

詳細文法、中国語の少ないウェブサイトをチェックしてください。 http://lesscss.net/ 個人の github ブログ: aralic.github.io