ホームページ >ウェブフロントエンド >htmlチュートリアル >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) < 50%){
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:
}
.backcolor(red){background-color: red;}
.backcolor(green){背景色: 緑;}.backcolor(@color) when (default()){背景色: @color;}
.box1{
.backcolor(red);
}
.box2{
.backcolor(green);
}
.box3{
.backcolor(orange);
}
css:
.box {
幅: 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)
● 平方根: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.css";