预处理语言

你就没有错吗
630 阅读3分钟

#预处理语言less

预处理语言类似的css代码，但是比css代码更加强大方便，但是不能在浏览器当中运行，因为浏览器只支持css、html、js语言，不支持其他的语言，但是可以使用预处理less语言，提前写好代码，在转换成css语言，因为less语言可以做到很多css语言做不到的地方，而且方便后期的维护。

less它扩展了css语言，增加了变量、mixin、函数等特性，使css更易维护和扩展。

如何将less文件转换成css文件和工具怎么进行安装1、安装Nodejs，安装完毕之后，使用node -v进行测试是否安装成功或者使用npm -v 2、npm install less -g（global），安装完毕之后就可以在cmd窗口当中使用lessc代码

变量
首先使用@定义一个变量可以使@color：red；

然后在使用变量
div {
    color:使用变量@color;
}

这里设置完之后，打开cmd窗口，然后拷贝文件地址，在cmd窗口中，首先转换到文件所存在的磁盘中，比如D盘，使用d：先切换到D盘，然后输入cd粘贴所复制的文件路径，然后切换到相关的目录，不要切换到相关的文件，因为切换不到相关的文件，之后可以输入ls查看相关的文件，之后输入lessc 文件名称.less 文件名称.css这样就完成了转换

混入
.temp {
    border-top:1px solid red;
    border-bottom:1px solid black
}

#header {
    background: #f1f1f1;
    less使用混入直接输入名称就可以.temp
}

div{
    font-size:18px;
    .temp
}
混入适合经常引用到的代码比如版心什么的

带参数的混入
.border-radius(此处是定义的意思@radius){
    border-radius:@radius;
    需要加上浏览器的前缀
    -moz-border-radius:@radius;
    -webkit-border-radius:@radius;
    -o-border-radius:@radius;
}

div{
    background:red;
    .border-radius(此处就可以直接输入参数4px)
}

div.home{
    .border-radius(10px)
}
带参数的混入适合经常用到的代码但是参数却不同的地方

嵌套
#footer{
    font-size:20px;
    ul{
        color:red;
        li{
            background:f1f1f1;
            a{
                &:hover{
                    &符号代表的父类本身
                }
            }
        }
    }
}
嵌套相当于后代选择器

运算
任何数字、颜色都可以参与运算
首先定义@width: 300px;

div{
    width: @width;
    height:@width / 2;相当于@width的二分之一的数值
}
在css当中可以使用height： calc（300px / 2）；进行运算

内置函数
@color: #e9232c
div{
    color: lighten(@color,10%);比@color低10%更轻的颜色
}

import导入文件
首先要有一个文件，然后在新的文件里面输入
@import ".import文件名.less"（就相当于倒入了文件）

.home{
    color:@color;
}

#sass语言

sass也是一种css预编译语言，它提供了变量、嵌套、混合、函数等功能，并且完全兼容了css语法sass能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。

sass 文件也是不能在浏览器中运行的，安装sass也是需要Nodejs的，然后在cmd当中输入npm install sass -g， sass的后缀名是 .scss，sass --version可以查看sass版本是否安装成功

变量
sass使用$来定义变量
$color: #e9232c;

div{
    color:$color;
}

作用域
$mycolor: red;

h {
    $mycolor: black;
    color:$mycolor;黑色
}

div {
    color:$mycolor;红色
}
变量首先找离自己进的变量
！global吧变量声明为全局的跟在颜色后面。

嵌套
sass的嵌套跟less的嵌套是一样的
#header {
    ul{
        li{
            a{
                &:hover{}
            }
        }
    }
}

import导入文件
首先要有需要倒入的文件
然后输入@import "./需要导入的文件名.scss";

div{
    color：red；
}

混入
@mixin important-text{
    color: red;
    font-size:20px;
}在css当中这点是不会保留的

div{
    @mixin important-text;
}

混入带参数
使用@mixin来定义混入的名称
@mixin border($radius){
    border-radius:$radius;
    -moz-border-radius:$radius;
    -webkit-border-radius:$radius;
    -o-border-radius:$radius;
}

#header {
    @include border(10px)
}

继承
.button-basic{
    border:1px solid red;
    padding:10px
}

.button-success{
    @extend .button-basic;继承的意思
    color： green；
}

.button-error{
    @extend .button-basic;
    color: red;
}

经常见到的英语install：安装、package：包、manager：管理者

avatar
文章
阅读
粉丝