とっとこ駆け出しエンジニアぶろぐ: LESSを使用して保守性の高いCSSコーディングをする

2013年12月31日火曜日

LESSを使用して保守性の高いCSSコーディングをする

あと数時間で年越しですね。どのような年末をお過ごしですか？

僕は家で特番を見ながらネットサーフィンをしてまったりしています。

さて、昨日まで旅行に行っていたため久しぶりのブログ更新です。

CSSのコーディング後に修正ってなった場合、結構面倒ですよね？

なんとか楽できないか調べてみたところLESSというCSSの拡張したものがありました。

//@変数名: 値;
@background: red;

h1 {
  background: @background;
}

h2 {
  background: @background;
}

h3 {
  background: @background;
}

h4 {
  background: @background;
}

<!DOCTYPE html>
<html>
<head>
    
    
    
</head>
<body>
    
        h1
        h2
        h3
        h4
    
    
</body>
</html>

div.menu {
  border: solid 1px pink;
  a {
    color: red;
  }
  ul {
    font-size: 30px;
    li.sono1 {
      color: blue;
    }
    li.sono2 {
      color: green;
    }
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
    
    
    
</head>
<body>
    
        h1
        h2
        h3
        h4
    
    
        hoge
        
            その１
            その２
        
    
    
</body>
</html>

  
//Mixins
.h_style(@background: #FFFFFF, @fontsize : 10px) {
  background: @background;
  font-size: @fontsize;
}

h1 {
  .h_style(#FF0000, 50px);
}

h2 {
  .h_style(#00FF00, 40px);
}

h3 {
  .h_style(#0000FF, 30px);
}

h4 {
  .h_style;
}