当前位置: 首页>前端>正文

less转css说明 less怎么转换css

1.了解

Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。更少可以运行在Node或浏览器端。

2.使用方法

方法一:“袋鼠”工具,下载单独软件先在本地转译,再把生成的.css文件引入;

方法二:使用less的脚本进行实时转译,如下:

<link rel="stylesheet/less"  href="styles.less" />
...
<script src="less.js" type="text/javascript"></script>

注意: 
    1.link中自己写的less的rel=“stylesheet/less”;
    2.引入less脚本之前书写.less自书写需转译的less ;

方法三:使用npm全局安装less,然后逐步转译less文件

//安装
$ npm install -g less
//解析
$ lessc  styles.less
//解析完后保存
$ lessc styles.less > styles.css

方法四:在vue中使用less-loader,具体修改如下:

step1:安装 less 和 less-loader ,在项目目录下运行如下命令:
    npm install less less-loader --save-dev

step2:webpack.config.js中添加如下代码,对后缀为less的文件进行解析依赖
    module: {
        rules: [
            ...
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
            }
        ]
    }

step3:页面中<style>标签中添加 lang="less"
    <style scoped lang="less"> ... </style>

3.语法

1、变量:其实本质是常量,因为它是不可变的,只允许定义一次。

@val001 : #5B83AD;                  //变量为:属性值
@val002 : color;                    //变量为:属性值
@val003 : className;                //变量为:类名
@val004 : "../image";               //变量为:url
@val005 : "../../themes";           //变量为:导入半路径
@val006 : "content string";         
@val007 : "val006";                 //变量为:变量名称

@import "@{val005}/backTheme.less";
div { 
    @{val002}: @val001; 
    content: @@val007;
    background: url("@{val004}/big/big.png");
} 
.@{val003}{ 
    font-size: 10px;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
div { 
    color: #5B83AD; 
    content: "content string";
    background:yrl("../image/big/big.png");
}
.className{ 
    font-size:10px;
}

2、混入(Mixins):一组属性在其他样式中出现。

.redColor{                          //输出的被混入对象
    color:red;
}
.noshow(){                          //不输出的被混入对象
    padding:10px;
    &:hover{                        //属性的混入
        color:blue;
    }
}
.cont{
    font-size:16px;
    .redColor() !important;         //redColor里的所有属性都会带 !important
    .noshow;                        //有木有小括号都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.redColor{
    color:red;
}
//.noshow不会输出
.cont{
    font-size:16px;
    color:red !important;
    padding:10px;
}
.cont:hover{
    color:blue;
}

注意:
    1.混入时属性混入可以将()小括号去掉;
    2.可以使用类名,id名进行混入;
    3.不想要引用的样式输出,可以使用.noshow(){},加小括号的方式;

3、参数混入:可以理解成函数传递参数。

.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
    width:@x;
    height:@y;
    padding:@z;
    color:@color;
    box-shadom:@arguments;
}
.class1 {
    .mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
    width:50px;
    height:10px;
    padding:10px;
    color:#ddd;
    box-shadom:10px 10px 10px #ddd;
}

注意:
    1.传参可以对参数名称进行规定,如:@color
    2.传参可以设定默认的数值,如:@clor:#aaa
    3.传递参数可以是多个,如:@x:10px; @y:10px; @z:10px; @color:#aaa
    4.传参定义了名称,其传递的实际参数顺序无所谓,如:@color:#ddd; @x:50px
    5.@arguments类似一个伪数组,可以直接使用,如:box-shadom:@arguments
//特殊:混入作为函数
.mixin2(@x;@y){
    @wid:@x;
    @hei:@y;
}
.class2{
    .maxin2(10px,20px);
    width:@wid;
    height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.class2 {
    width:10px;
    height:10px;
}

注意:
    1.混入可作为函数,进行调用,然后返回对应的变量再赋值,如:.maxin2(10px,20px);width:@wid;
//特殊:条件混入
.mixin (@a) when (@a >= 50%) {
  background-color: black;
}
.mixin (@a) when (@a < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}
//特殊:循环在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
      }
    .generate-columns(@n, (@i + 1));
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出:
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }

4、嵌套:有父子关系的写在一起,接近于html的写法。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

5、运算:利用+ - * / 进行计算得出最后的值并附上单位,常用的是宽高,百分比,颜色值

@val001:5px+10;      15px
@val002:5px+10px;    15px
@val003:5px+10cm;    15px
@val004:5%*2;        10%

注意:
    1.计算中出现多单位,单位以最左边单位为最终结果;
    2.计算中最好将单位标清楚,方便修改和设定;

6、格式化:使用“ ~ ”符号,允许任意字符串作为属性或属性值,并以原样返回

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.weird-element {
  content: ^//* some horrible but needed css hack;
}

7、功能:可以转换颜色,操纵字符串和进行数学运算(使用较少,但在效果变更还是很实用的)

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`        //将0.5%转换为50%
  color: saturate(@base, 5%);                        //将基色的饱和度增加5%
  background-color: spin(lighten(@base, 25%), 8);    //将背景颜色设置为减轻25%并旋转8度的颜色
}

8、范围作用域:类似js中局部和全局的感觉,不一样的是局部的变量可以在后边定义

@var: red;

#page {
  #header {
    color: @var;      //white
  }
  @var: white;        //引用后边定义变量
}

9、导入:导入外部的样式,可以是less或者css等

@import "foo";             foo.less
@import "foo.less";        foo.less
@import "foo.php";         foo.less
@import "foo.css";         foo.css
@import (optional, reference) "foo.less";    //指令控制导入文件

注意:
    1.导入的语句写在哪里都无所谓,但是建议写在最顶端;
    2.根据文件扩展名,有如下规范:
        (1)如果文件有.css扩展名,则将其视为CSS,并将@import语句保留为原样;
        (2)如果它有任何其他扩展名,它将被视为less并导入;
        (3)如果它没有扩展名,以扩展名.less进行导入;
    3.@import (keyword) "文件名称";这才是最全的导入语法,其中【keyword】代表指令,可进行一些导入 
      文件的控制,并支持多指令控制且用逗号分开,可选指令如下:
            reference: 使用Less文件但不输出
            inline:    在输出中包含源文件但不处理它
            less:      无论文件扩展名是什么,都将文件视为Less文件
            css:       无论文件扩展名是什么,都将文件视为CSS文件
            once:      只包含一次文件(默认就是包含一次)
            multiple:  多次包含该文件
            optional:  找不到文件时继续编译(默认找不到就停止编译了)

4.常用内置函数

//字符串
    替换:replace(字符串,要替换的文本,替换成文本,正则标志);
            replace("One + one = 4", "one", "2", "gi");    //2+2=4

//列表
    长度:length(list的变量名称);
            @listall:1,2,3,4;
            n: length(@listall);    //n: 4
    提取:extract(list的变量名称,下标数字);
            val: extract(@listall,2)    //val: 3

//数字
    取整:ceil(小数)    向上取整
         floor(小数)    向下取整
         round(小数,小数位数)    四舍五入(并保留几位小数)

 

 

 


https://www.xamrdz.com/web/2t91924727.html

相关文章: