LESS 基础 css的系统写法

LESS 基础

LESS是一种动态语言，属于【CSS预处理语言】的一种

在 CSS 语法的基础上，为 CSS 加入【程序式语言的特性】

使CSS更加简洁、适应性更强、可读性更佳，更易于web的开发、维护。

扩展名

.less

设置输出路径

.less文件右键—设置输出路径—找到对应的css文件

1.变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单

变量以@开头,变量名与变量值之间用【冒号】分隔

定义变量：

@skin:red;

使用变量

.box{
	color:@skin;
}

注：如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中。

背景图中的路径中的字符串

@url:"../static/base/images/";
.price{
    color: @skin;
    background:url("@{url}1.jpg");
}

属性名称中的字符串

@side : left;
.rounded {
	border-@{side}-radius: 5px;
}

2、嵌套

.navbox{
    height:40px;
    background-color:@skin;
    ul{
        margin:0 auto;
       
    }
    li{
        float:left;
        a{
            color:#fff;
        }
    }
}

.navbox ul {
  margin: 0 auto;
}
.navbox li {
  float: left;
}
.navbox li a {
  color: #fff;
}

&可以用于指代父级

a{
    color:#fff;
    &:hover{
   		 color:red;
    }
}

a:hover {
  color: red;
}

3.混入

是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样

不带变量的混入

//定义了一个混入
.whitebg{
    background-color: #fff;
}
.tuijianbox{
	//调用混入
    .whitebg;
}
.remenbox{
    .whitebg;
}

加小括号避免编译
.whitebg(){
    background-color: #fff;
}

带参数的混入

//定义混入
.bg(@bgc){
    width:100px;
    height:100px;
    background-color:@bgc;
}

.degnlu{
	//调用混入时传入参数
    .bg(#ff0000);
}

.footer{
    .bg(#cccccc);
}

.degnlu {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
.footer {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

1）带参数但不带默认值 的混入，调用时必须传参，否则报错

2）带参数并且带有默认值的混入，调用时可以不传参，不传参时使用默认值 ，传参使用传入的参数

.bg(@bgc:#ffffff){
    width:100px;
    height:100px;
    background-color:@bgc;
}

.degnlu{
    .bg;
}

.footer{
    .bg(#cccccc);
}

.degnlu {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
}
.footer {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

3）多个参数

• 定义混入时，参数逗号隔开

.box(@w:100px,@h:200px,@bgc:#ffffff){
    width:@w;
    height:@h;
    background-color:@bgc;
}

• 调用时，一 一对应

.footer{
    .box(200px,400px,red);
}

• 调用时如果不一一对应，就要命名参数

   //调用时命名参数
    .box(@bgc:red,@h:400px);

4)@arguments变量

作为一组值，指代所有的参数

.shadow(@x:0,@y:0,@blur:10px,@color:#000){
  // box-shadow:@x @y @blur @color;
  box-shadow:@arguments;
}

4.继承、扩展

:extend(“混入名”)

• 编译之后，联合声明

.center{
    text-align: center;
}

.testbox1:extend(.center){
     width:200px;
     height:100px;
}

.testbox2{
    &:extend(.center);
    width:200px;
    height:100px;
}

.center,
.testbox1,
.testbox2 {
  text-align: center;
}
.testbox1 {
  width: 200px;
  height: 100px;
}
.testbox2 {
  width: 200px;
  height: 100px;
}

5.计算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)的操作

less会为你自动推断数值的单位，所以不必每一个值都加上单位

注意：涉及优先级时以()进行优先级运算

.wrapbox{
    width:(1000px - 20) / 2;
    padding:0 20px;
}

ter){
width:200px;
height:100px;
}

.testbox2{
&:extend(.center);
width:200px;
height:100px;
}

.center,
.testbox1,
.testbox2 {
text-align: center;
}
.testbox1 {
width: 200px;
height: 100px;
}
.testbox2 {
width: 200px;
height: 100px;
}

## 5.计算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)的操作

 less会为你自动推断数值的单位，所以不必每一个值都加上单位 

注意：涉及优先级时以()进行优先级运算

.wrapbox{
width:(1000px - 20) / 2;
padding:0 20px;
}