Home >Web Front-end >HTML Tutorial >LESS碎语_html/css_WEB-ITnose

LESS碎语_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:36:031082browse

 

推荐在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

       
box2

       
box3

   

 

less:

.box{
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.backcolor(red){background-color: red;}
.backcolor(green){background-color: green;}
.backcolor(@color) when (default()){background-color: @color;}

.box1{
    .backcolor(red);
}

.box2{
    .backcolor(green);
}

.box3{
    .backcolor(orange);
}

 

css:

 

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: green;
}
.box3 {
  background-color: orange;
}

 

● 拼接数值和单位:unit(5, px), 输出:5px
● 去掉单位获取值:unit(5px),输出5
● 获取数值单位中的单位:get-unit(5px)
● 获取封顶整型值:ceil(2.4)
● 获取底板整型值:floor(2.6)
● 获取浮点数的百分比:percentage(0.5)
● 四舍五入:round(1.67),输出2;规定精度:round(1.67,1),输出1.7
● 平方根:sqrt(25cm)
● 绝对值:abs(-5px)
● 是否是整数:isnumber()
● 是否是字符串:isstring()
● 是否是颜色: iscolor()
● 是否是CSS关键字:iskeyword
● 是否是url: isurl()
● 是否是像素:ispixeel()
● 是否加重字体: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";

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn