cssプリプロセッサ

cssプリプロセッサとは

cssベースの別の言語

ツールによりcss

にコンパイル

cssにはない多くの特性

が追加する.

cssファイルの組織方式を向上させることができる

一般的なcssプリプロセッサ

less(nodeベース)-コンパイル速度が速く、事前コンパイルを必要とせず、複雑な特性が煩雑である

sass(rubyベース)

プリプロセッサが提供する機能

ネスト反映レベルおよび制約

変数および計算減少反復コード

ExtendとMixinコードフラグメント(JSの関数のようなもの)

サイクルは、複雑で規則的なスタイル

に適用される.

import cssファイルモジュール化

lessネスト

npm install less //   less
//  t1.less  
.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}
//  npm install less -g  less          lessc   .less  
//    ./node_modules/.bin/lessc t1.less>t1.css     ，       t1.css  
//t1.css  
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sassネスト

npm install node-sass//   sass
//   s1.scss  （ t1.less    ）
//  npm install node-sass -g  less          node-sass   .scss  
//    ./node_modules/.bin/node-sass s1.scss>s1.css     ，       s1.css  
//   less   
node-sass --output-style expanded s1.scss>s1.css    css      ，            

less変数

//s2.less  
@fontSize: 12px;
@bgColor: red;
.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize + 2px;
        &:hover{
            background:@bgColor;
        }
    }
}
//lessc s2.less>s2.css
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass変数

 less     @， sass   $

less mixin

//t3.less
@fontSize: 12px;
@bgColor: red;
.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        .block(@fontSize);
    }
    .content{
        .block(@fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}
//               ，      
//     

    

    


//      block      ，        ， nav  content    ，     block     

    

    


//     ，block   ，     nav content    
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}

sass mixin

less     .block     
sass   @mixin block   ,    @include

$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize){
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @include block($fontSize);
    }
    .content{
        @include block($fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}

less extend

// extend               ，   mixin       
@fontSize: 12px;
@bgColor: red;
.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten(@bgColor, 40%);

    .nav:extend(.block){
        color: #333;
    }
    .content{
        &:extend(.block);
        &:hover{
            background:red;
        }
    }
}
//    css  
.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  color: #333;
}
.wrapper .content:hover {
  background: red;
}

sass extend

//   @extend   
$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @extend .block;
        color: #333;
    }
    .content{
        @extend .block;
        &:hover{
            background:red;
        }
    }
}

less loop

//         css  
.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);
//     
.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}

sass loop

//less when,  mixin   ,sass if   
@mixin gen-col($n){
 @if $n > 0 {
     @include gen-col($n - 1);
     .col-#{$n}{
         width: 1000px/12*$n;
     }
 }
}

@include gen-col(12);
 
//         ，   for    （less   for  ）
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
} 

less import

//       ，           
// main.less
@import "./import-variable";
@import "./import-module1";
@import "./import-module2";
// import-variable.less
@themeColor: blue;
@fontSize: 14px;
// import-module1.less
.module1{
    .box{
        font-size:@fontSize + 2px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize;
        color:lighten(@themeColor, 40%);
    }
}
// import-module2.less
.module2{
    .box{
        font-size:@fontSize + 4px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize + 2px;
        color:lighten(@themeColor, 20%);
    }
}

//     css  
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .tips {
  font-size: 16px;
  color: #6666ff;
}
           less  ，      css      

sass import

 less  

プリプロセッサフレーム

sass - Compass

less - Lesshat/EST

は、既存のmixin

を提供する.

JSクラスライブラリパッケージ共通機能

類似