Help us understand the problem. What is going on with this article?

プログラミング初心者のLESS備忘録

More than 1 year has passed since last update.

LESSとは?

LESSはCSSを簡単かつ効率的に書くことができる言語である。

特徴

1.変数が使える
@~で変数を宣言できる
例:@mycolor

2.変数を使って四則計算ができる

3.変数は「p」や「h」などのプロパティにも使える

4.階層的な書き方ができる
LESSでは階層構造を使用できるためプロパティの宣言をいちいち行わなくていい
例:
[CSS]

header{}

header a{}

のような書き方だったがLESSでは
[LESS]
header{
a{
}
}
↑のように階層構造にすることができ、格段に見やすくなる

☆ミックスイン

ミックスインとは要は関数のようなもので何度も使うであろう処理などを一つにまとめておくことで、ミックスイン名を宣言することで簡単に呼び出すことができる
例:
my-mixin(@width){
  border @width solid red;
  padding 7px;
  margin 7px;
}
これを呼び出すには
h1{
my-mixin(7px);
font-size:20px;
のようになる
ミックスイン名の後ろの()は引数のような使い方ができる

LESSファイル作成法

☐.lessでlessファイルを作成できる

パワーシェルなどでコマンド
lessc style.less(lessファイル名) styles.css(CSS名)でlessをCSSに変換してくれる


・豆知識
./と../は意味が違う
前者は下の階層、後者は上の階層へアクセスする

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away