首页 > 其他分享> 文章详细

less&sass&postcss文档

2021-02-02 22:02:07 阅读：254 来源： 互联网

标签：pink sass less 混合编译 test postcss CSS

前端技术之CSS工程化

V1.0

第1章CSS预处理器

1.1 less

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

Ø 初次邂逅

浏览器本身是不支持less语法的。我们需要通过编译将less转化为css代码。

可以通过less官网提供的js文件进行编译。

less编译文件的bootCDN地址:

https://cdn.bootcss.com/less.js/3.0.4/less.min.js

需要注意的是,该js文件必须要在style标签下面.因为这是一个解析动作需要拿到style中的信息。且这个style标签的type一定得是text/less的。

也可以通过编译工具来进行编译，比如考拉。

下载地址：http://koala-app.com/

当然，最终对less的编译我们都会放进我们项目的工程化流程中使用构建工具来

Ø 变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

使用@来申明一个变量：@pink：pink;

注意（如果属性值有单位一般我们都会把单位放到变量上,这样）

1.作为普通属性值只来使用：直接使用@pink

2.作为选择器和属性名URL：@{selector} @{url}的形式

3.变量的延迟加载

   @var: 0;

   .class {

   @var: 1;

       .brass {

        @var: 2;

        three: @var;  //3

        @var: 3;

    }

  one: @var;  //1

}

Ø 嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

 #list{

      list-style: none;

      line-height: 30px;

      width: 300px;

      background: pink;

      margin: 0 auto;

      li{

          height: 30px;

      }

      a{

          float: left;

         &:hover{

             color: red;

          }

       }
 
       span{

            float: right;

       }

}

Ø 混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1.普通混合

最终编译时会输出到目标文件中

.juzhong{

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    margin: auto;

}

2.不带输出的混合

最终编译时不会输出到目标文件中

.juzhong(){

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    margin: auto;

}

3.带参数的混合

使混合更为灵活

.juzhong(@w,@h,@c){

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    margin: auto;

    width: @w;

    height: @h;

    background: @c;

}

4.带参数并且有默认值的混合

.juzhong(@w:100px,@h:100px,@c:pink){

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    margin: auto;

    width: @w;

    height: @h;

    background: @c;

}

5.命名参数

当实参与形参不匹配时，可以命名传参

.juzhong(@h:200px;@c:deeppink;);

6.匹配模式

定义的混合命名一致时，可以通过第一个参数进行标识区分

.triangle(top,@w:10px,@c:pink){}

.triangle(bottom,@w:10px,@c:pink){}

.triangle(left,@w:10px,@c:pink){}

.triangle(right,@w:10px,@c:pink){}

//不管哪个同名混合被调用时，都会隐式的执行@_标识的混合

.triangle(@_,@w:10px,@c:pink){}

7.arguments变量

实参列表

Ø 继承

继承是对选择器的组合，而不是对样式集的复制

nav ul {

&:extend(.inline);

background: blue;

 }

Ø Import

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:


@import "lib.less";

@import "lib";

Ø 循环

less本身没有循环的语法是通过递归来构建循环

.test(@n) when(@n > 0){

    .test(@n - 1);

    .box{

        width: 100px * @n;

    }

}

.test(12);

1.2 sass

Sass 是成熟、稳定、强大的 CSS 扩展语言。（扩展名一般使用scss）

Ø 变量

变量使用$定义,有别于less中的@

Ø 嵌套

规则与less类似 ; 但是建议不要出现; 和 {}

Ø 混合

混合使用@mixin声明有别于less中的.

调用时必须@include


@mixin black($color){

    background: $color;

}

@include black(#000000);

Ø 继承

@extend .class

Ø 循环

less本身没有循环的语法是通过递归来构建循环

sass也可以利用递归来构建循环。但sass平台另外提供了一套循环语法


@mixin test($n){

    @if $n > 0{

        @include test($n - 1);

        .test{

            width: 100px*$n;

        }

    }

}

@include test(12);

@for $a  from 1 through 9{

    .test{

        width:100px*$a;

    }

}

1.3 预处理器总结

1.嵌套可以反映html的层级和约束

2.变量和计算可以减少重复代码

3.Extend 和 Mixin可以复用代码片段

4.循环适用于复杂有规律的样式

5.import css文件模块化

第2章 CSS后置处理器

2.1 PostCss

Ø 安装node

安装包一键安装

Ø 安装postcss-cli

npm install postcss-cli postcss –D

Ø 安装插件


npm install autoprefixer -D

npm install cssnano -D

Ø 配置文件(.postcssrc.js)


const autoprefixer = require("autoprefixer");

const  cssnanao =  require("cssnano");

module.exports={

    plugins:[

        autoprefixer(),

        cssnanao

    ]

}

Ø 编译命令

postcss src/index.css  -o build/index.css

标签：pink,sass,less,混合,编译,test,postcss,CSS
来源： https://blog.csdn.net/weixin_50365835/article/details/113574546

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

less&sass&postcss文档

第1章CSS预处理器

1.1 less

Ø 初次邂逅

Ø 变量

Ø 嵌套

Ø 混合

Ø 继承

Ø Import

Ø 循环

1.2 sass

Ø 变量

Ø 嵌套

Ø 混合

Ø 继承

Ø 循环

1.3 预处理器总结

第2章 CSS后置处理器

2.1 PostCss

Ø 安装node

Ø 安装postcss-cli

Ø 安装插件

Ø 配置文件(.postcssrc.js)

Ø 编译命令