オリジナルリンク：https://www.cnblogs.com/xinjie-just/p/6715189.html
15年忘れて、あまり自分自身を教えたが、無用となっています。その後、開発のスピードを上げるCSSを保持する目的で、すぐに完了して、より少ない学ぶために行ってきました、効果は即時ですが、また刑務所を覚えています。試験開始前に、私たちは常に使用は、それが学ぶために何であるか、自分自身に質問をします。以下、使用はそれが何であるかを学び、明確書き込みに使用するCSSスタイルがあり、私はあまり勉強する時間を利用したいと思いますが、必ずしも完成し、学校では使用できません、何かを忘れて、これは無駄ではありません取ります私は時間を行います。実際には、それは、後にちょうど彼らの自身の使用を知っている必要がありますどのくらいのあなたに使用するとして有用でもあります。
まあ、あまりプロセスを使用しての私自身の経験について話しています。
まず、少ないコンパイル以下のツールを使用する必要があります。
1.コアラのダウンロードとインストール：
ダウンロードする公式サイトへのダウンロードの推奨 http://koala-app.com/index-zh.htmlを ダウンロード後、圧縮されたパッケージは、解凍に使用する実行可能ファイルをダブルクリックします。これは、インストールする必要はありません。
2.コアラの説明：
オープンコアラソフトウェアは、上記のように、以下のファイルを用意する必要がある唯一のフォルダを選択し、フォルダを選択し、「+」をクリックして以下のファイルの作成を必要とし、このフォルダに追加されたときに、コアラは以下のファイルに基づいて行われます自動的に同じディレクトリ内のCSSファイルの名前を追加します。
あなたは、言語を選択することができます。
[ツール]アイコンをクリックして、あなたは、たとえば、簡体字中国語、ここで、言語を選択することができます。
第二に、以下の準備を使用します
HTML、CSSファイル遺跡で導入されたが、我々はあまり書いてスタイルを選択し、未来を守るために一度は、以下のファイルを維持することです。
第三に、書き込み少ないです
1.注意事項：
以下の注意事項は、「/ ** /」や「//」、CSSファイルに表示されます前者は、後者は、CSSで表示されない2つの方法が、あります。
从两幅图的对比可以看出，less 中 "/**/" 方式添加的注释在 css 中也显示了，而 "//" 方式添加的注释在css 中没有显示
2. 变量
上图中定义了三个变量， text-color, main-color, fs
上图中使用了其中一个变量 text-color，
定义变量的方法："@"加上变量名。
定义变量的好处：当需要更改样式中多处的值时，只需要更改变量的值，提高效率。
3. 运算
如上图，有加法和除法运算，通过前面定义变量 fs ，这里使用它并在其基础上加上 4，所以它的 font-size 值就变成了 20px(16px + 4)。
使用运算的好处：避免人工重复计算！
比如：想要让单行文本竖直居中显示，需要设置高和行高相同。但是如果设置了 box-sizing: border-box; border-bottom-width: 1px; 的话，就需要让行高的值比高的值小 1px。这种情况下，就可以设置变量再结合运算让复杂的工作变得简单。
@height: 30px;
height: @height;
line-height: @height - 1;
如果想要更改高度的值，只需要更改变量 height 的值就行了。而不需要更改 height 和 line-height 两个属性的值，提高效率。
4. 继承
在上面的诸多例子中，都有"&"符号，这个符号起到继承的作用。这个符号就是它的父级标签(类，id等等)用几个例子说明：
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
& > div:not(.heading) {
padding: 40px 150px;
& h3 {
font-size: @fs + 12;
margin-bottom: .5rem;
}
& li {
font-size: @fs + 2;
line-height: 1.6;
}
}
}
相当于：
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
}
.industry-section > div:not(.heading) {
padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
font-size: 28px;
margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
font-size: 18px;
line-height: 1.6;
}
再例如：
& > a {
& > span {
display: block;
&:first-of-type {
font-size: 18px;
}
&:last-of-type {
font-size: 12px;
text-transform: capitalize;
}
}
}
相当于：
a > span {
display: block;
}
a > span:first-of-type {
font-size: 18px;
}
a > span:last-of-type {
font-size: 12px;
text-transform: capitalize;
}
5. 混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
例如：
class A
.page-width { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; }
class B
body {
.page-width;
font-size: @fs;
color: @text-color;
background-color: #fff;
font-family: "Microsoft Yahei", Arial, sans-serif;
}
编译后的css:
body { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; font-size: 16px; color: #333; background-color: #fff; font-family: "Microsoft Yahei", Arial, sans-serif; }
6. 在 less 中依然可以使用媒体查询(工作中用到，更新于20170421)：
less 中使用媒体查询
.application-section {
max-width: 100%;
width: 1920px;
height: 770px;
margin: 30px auto;
background: url(../images/app-scene.png) center top no-repeat;
position: relative;
& h2 {
position: absolute;
top: 70px;
left: 50%;
font-size: 0;
width: 1200px;
transform: translateX(-50%);
@media (max-width: 1600px) {
width: 1000px;
& span {
font-size: @fs + 20;
}
}
}
}
编译后 css
.applicationのセクション{
最大幅：100％。
幅：1920px;
高さ：770px;
マージン：30px自動;
背景：URL（../画像/アプリ-scene.png）中央の上ノー・リピート;
位置：相対;
}
.applicationのセクションH2 {
位置：絶対。
トップ：70ピクセル;
左：50％;
フォントサイズ：0;
幅：1200px;
変換：移動X（-50％）を、
}
@media（最大幅：1600px）{
.applicationのセクションH2 {
幅：1000px。
}
.applicationのセクションH2スパン{
フォントサイズ：36px;
}
}