LESS碎语_html/css_WEB-ITnose

 

推荐在Brackets安装"LESS AutoCompile"插件，当保存less文件会自动生成或保存相应的css文件。

 

变量

 

以@开头声明变量，并且对变量进行分类，比如颜色变量、字体大小变量、模版变量、布局变量，等等。比如：

 

@fontSize:#000;

 

嵌套

 

   

hello

.container{
    font-size: @fontSize;
    p {
        text-align:center;

        &:after{
            content: 'hel';
        }
    }
}

 

以上有3层嵌套，分别是.container, p, &:after(&表示p本身)。

 

Mixins，或者叫css rule

 

把一个类作为另一个类的样式值。

 

● 基本

.myRule {
    text-align: center;
}

p {
    .myRule;
}

 

● 定义一个带变量的类

 

.border-radius(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    -ms-border-radius:@radius;
    border-radius: @radius;
}

 

变量可以有一个默认值：

 

.border-radius(@radius:10px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
    -ms-border-radius:@radius;
    border-radius: @radius;
}

 

定义多个变量也是允许的：

 

.border(@width:2px, @style:solid,@color:@fontColor){
   
}

 

然后使用这个带变量的类，就像使用函数一样。

 

img {
    .border-radius(5px);
}

 

● 可以把一个Mixin放在另一个Maxin中，比如：

 

.myRule {
    text-align: center;
    .border-radius(5px);
}

● 根据变量不同的值使用不同的样式

 

.set-text-color(@bg-color) when (lightness(@bg-color) >= 50%){
    color: @dark;
    background: @bg-color;
}

.set-text-color(@bg-color) when (lightness(@bg-color)     color: @light;
    background: @bg-color;
}

 

然后这样应用：

.box-1{
    .set-text-color(darken(@template_color,20%));
}

 

操作符

 

@padding:10px;

.container{
   
    padding: @padding+10;
}

 

可以用+,-,*,/。

 

less的内置函数

 

● 让颜色更深：darken(@color,20%);
● 获取颜色值：color("fff")，返回#aaa
● 获取图片大小：image-size("temp.png")，返回10px 10px
● 获取图片宽度：image-width("temp.png")
● 获取图片高度：image-height("temp.png")
● 单位转换：convert(9s, "ms"), convert(14cm, mm)
● 链接资源 data-uri(mimetype,url),第一个参数可省

 

例子：data-uri('../data/temp.jpg')
CSS输出：url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
浏览器中输出：url('../data/temp.jpg');

例子：data-uri('image/jpeg;base64', '../data/image.jpg');
CSS输出：url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

例子：data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
CSS输出：url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

 

● 默认值 default()

 

例子：在CSS规则中，default()表示true

 

html：

   

       

box1

box{
幅: 100px;
高さ: 100px;ボーダー: 1pxソリッドブラック;

}

.backcolor(red){background-color: red;}

.backcolor(green){背景色: 緑;}

.backcolor(@color) when (default()){背景色: @color;}

.box1{
.backcolor(red);
}

.box2{
.backcolor(green);
}

.box3{
.backcolor(orange);
}

css:

.box {
幅: 100px;

高さ: 100px;

境界線: 1px 黒一色

}

。 box1 {

背景色: red;

}

.box2 {

背景色: 緑;
}
.box3 {
背景色: orange;
}



● スプライシング値と単位:unit(5) , px )、出力: 5px
● 単位を削除して値を取得:unit(5px)、output 5
● 数値単位で単位を取得: get-unit(5px)
● 上限付きの整数値を取得: ceil( 2.4)
● ベースプレートの整数値を取得します：floor(2.6)
● 浮動小数点数のパーセンテージを取得します：percentage(0.5)

● 丸め：round(1.67)、指定された精度：round(1.67,1) 、出力1.7

● 平方根：sqrt( 25cm)

● 絶対値： abs(-5px)

● 整数かどうか： isnumber()
● 文字列かどうか： isstring()
● であるかどうかcolor: iscolor()
● CSSキーワードかどうか: iskeyword
● URLかどうか: isurl()
● ピクセルかどうか: ispixel()
● アクセントフォントかどうか: isem()
●パーセンテージかどうか：ispercentage()
●カラーを作成：rgb(90,129,32)
●透明度付きで作成カラー：rgba(90,129,32,0.5)、css出力rgba(90,129,32,0.5); argb(rgba(90, 23, 148, 0.5)); 出力 #805a1794


その他の参照: http ://lesscss.org/functions/



@import

外部 CSS ファイルを導入してマージする現在の CSS ファイルを使用します。

@import "vendors/bootstrap/bootstrap.less";

@import "vendors/bootstrap/bootstrap.css";