web前端入门到实战:css预处理器 - sass/scss、less、stylus

css 预处理工具,可以将其对应的DSL(领域特定语言)编译为 css

基本介绍

sass/scss

  • SASS 2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架

  • Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,sass 不兼容 css 代码

  • Sass3 就变成了Scss(sassy css) 与原来的语法兼容,只是用{}取代了原来的缩进

  • sass 的运行 依赖于 ruby 环境(compass 将 sass 编译为 css

  • 现在可用 node-sass 来编译 sass/scss 文件

    • node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具

    • 原始的sass 是用 ruby 编写的,所以需要 ruby 环境,libSass 是原始sass引擎的一个 c/c++ 接口,使用它编译sass不依赖于ruby,可以使用其他语言使用libSass

    • 安装node-sass时,会去GitHub 下载一个 .node的文件而这个文件托管在墙外的服务器上,所以失败了node-sass安装失败解决方案

  • .sass.scss 为文件后缀名称(现在一般都是用 scss)

less

  • less 2009年出现,受sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了sass演变到了scss的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。
  • less 可以使用 less.js 在浏览器运行时中解析 less 代码
  • 也可以在 node环境中 安装 less,提前编译 less 文件 npm install -g less &lessc styles.less styles.css (可以加参数控制编译后的css排版及压缩)
  • .less 为文件后缀名称

stylus

  • Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,由 TJ大神开发
  • 安装及编译 npm install stylus -g & stylus src/ (可以加参数控制编译后的css排版及压缩)
  • .styl 为文件后缀

使用现状

  • 现在一般都是配合webpack使用这几种预处理语言,需要先安装 编译器、对应 loader,然后再 module.rules 配置其具体规则

基本语法

  • less 基本语法属于 css 风格,而 sass,stylus 利用缩进,空格,换行来减少需要输入的 字符
  • 目前 scss, stylus 也可以支持 css 风格,用大括号 来书写
  1. 变量符 @ $ 无变量符号直接变量名

    less 
    @size: 10px;
    .box {
        width: @size;
    }
    
    scss
    $red: #c00;
    strong {
        color: $red;
    }
    
    stylus
    red = #c00
    strong
        color: red
    
    css 的变量规范
    /* global scope */
    :root {
        --red: #c00;
    }
    strong {
        color: var(--red);
    }
     web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
    
    * 变量作用域:less 惰性加载,sass,stylus 就近加载
    
  2. 嵌套语法一致,用 & 引用父集 -- 嵌套不建议超过 4 层

    * less 不支持跳出嵌套
    * sass `@at-root`
    

    @at-root 支持参数,跳出不同的嵌套
    without: all,表示所有
    without: rule,表示常规css,rule是默认值
    without: media,表示media
    without: support,@support现在使用还不广泛

    // child1 将跳出 parent 的嵌套
    .parent1{
    color:#f00;
    @at-root .child1 {
    width:200px;
    }
    }
    }

  3. 插值

    less
    @prefix: ui;
    .@{prefix}-button {
    color: #333;
    }
    
    sass
    $prefix: ui
    .#{$prefix}-button {
        color: #333;
    }
    
    stylus
    prefix = ui
    .{prefix}-button
        color #333
    
  4. 混入(mixin):预处理器最精髓的功能,样式层面上的抽象(相当于copy代码片段)

    • less 直接引入
    • scss 要先声明 @mixin,使用时 @include
  5. 继承

  6. 函数

  7. 逻辑控制:sass, stylus 支持 if else for each while, less 使用 mixin when 处理

  • 具体语法看官方文档

总结:

  • sass 大而全,出现时间最久,但依赖于 ruby (compass)
  • less 可以平滑的从 css 过度而来,可以在运行时解析,逻辑功能有些缺失
  • stylus 起源 nodejs 社区,语法灵活, 有一个官方开发的样式库 nib,同样提供了不少好用的 mixin

Postcss 是什么样的一种存在?

  • PostCSS 既不是预处理器也不是后处理器,而是一个平台,其本身并不处理任何具体任务,只有当我们为其附加各种插件之后,他才具有实用性

  • PostCSS 就像是一个使能器(enabler),他可以不用完全替代现有的预处理器或后处理器,而只是作为他们的补充工具。PostCSS的工作机制主要包含解析代码、执行插件、渲染结果三部分:

  • PostCSS 会将css代码解析成包含一系列节点的抽象语法树(AST, Abtract Syntax Tree)。

  • PostCSS常用插件 (用这些插件集合其实已经可以代替 三大 css 预处理器)

    • cssnext, 未来语法,颜色函数...
    • postcss-import, 导入文件
    • autoprefixer, 自动前缀
    • precss, 集成sass预处理器,功能强大包括 autoprefixer mixins
    • postcss-mixins, 混合宏,是用类似sass的混合宏,不可与 precss 混用
    • postcss-conditions 逻辑判断
    • ...
  • 目前 Postcss 在一般项目中的用途

    • 使用其 autoprefixer 插件,为css 属性增加前缀
    • 创建 postcss.config.js
    // webpack.config.js
    {
        test: /\.less$/,
        loader: ExtractTextWebpackPlugin.extract([
            {loader: 'css-loader', options: { minimize: true }},
            'postcss-loader', // 要在预处理器处理完之后,在使用 postcss-loader 
            'less-loader',
        ]),
    }
    
    // postcss.config.js
    module.exports = {
        plugins: [
            require('autoprefixer')({
                'browsers': ['> 1%', 'last 2 versions']
            })
        ]
    }
    

web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
```

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容